Hot to use import in Angular?

[yalesnikov]

Hi, can you help me to user Beer CSS with Angular?

When I added import to script in angular.json I had some errors in browser (compilation went successful). To avoid this errors I did this: in angular.json:

"assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/beercss/dist/cdn/",
                "output": "/assets/beercss/"
              }
            ],

in index.html:

<script type="module" src="./assets/beercss/beer.min.js"></script>

If script include in main bundle then error appears. My solution work success.

In angular component I write this:

declare const ui: any
@Component({
  template: '
<div class="snackbar error" id="user-saved-failed"><i>warning</i> Error! User cannot add!</div>
'
}) export myComponent {
  save() {
    this._users.addUser(this.form.value).subscribe({
      next: userId => ...,
      error: () => {
        ui('#user-saved-failed')
      },
    })
  }
}

1. Can I use only part of BeerCSS javascript or I must include all bundle (beer.min.js) ?
2. Can I not include BeerCss with script directly and use import in my components?
3. Can I call BeerCSS modules without ui() and declare declare const ui: any, example: beerCss.snackbar.show('text', config) ?

BeerCSS very interesting library but it has less examples and only basic documentation.

[leonardorafael]

Hi @yalesnikov

All documentation are in the repository INDEX.md and the snackbar docs is here SNACKBAR.md (see the trigger section). The JS file of Beer CSS is optional, basically it handles dynamic theme and triggers (using data-ui attribute). Use it If you want to write zero/less JS in your app (is highly recomended).

1) Yes, JS file is optional (but I recommend to install it globally) 2) Yes, JS file is optional (but I recommend to install it globally) 3) Yes, see trigger section of snackbar

[leonardorafael]

Some bundlers can have different ways to handle CSS/JS files. IMO I think this is not a problem with Beer CSS itself, because it is just a regular CSS and JS file (nothing special inside it). At moment is hard for us to have a doc for each bundler (there are many outside).

@yalesnikov Sorry I don't know your bundler/stack, maybe another user can help you with this.

[KicKerBNU]

Hello @yalesnikov, have you tried this configuration here ? https://github.com/beercss/beercss/issues/104