EBIA

Category: Angular

Adding SASS Support in Angular Projects

Once the project is generated with Angular/CLI, set default style extension:

ng set defaults.styleExt scss

After you have generated a new component:

ng g c MyComponent

you will see MyComponent.scss in your MyComponent folder.

If you open the scss-file, WebStorm will ask you, if you want to add file-watchers for this type of extension. This procedure is normally not necessary, because angular/cliwill generate and update your project automatically.

Anyway, If you want to add file-watcher for SCSS (on McOS):

  1.  brew install ruby
  2. gem install sass

WebStorm will automatically recognize the installation path (on McOS /usr/local/bin/scss).

Angular Testing 4+ Keywords

  • Isolated, Shared, Integration, Unit, E2E End to End Tests,
  • Mocks, Stubs, Spies
  • Sync, Async
  • Jasmine, suites, specs, expectations, matchers, tricks (.toEqual,  .toBe,..), beforeEach, afterEach, beforeAll, afterAll, refactoring repetitive code into the setup,
  • Angular, Components, Services, Http, Mock-Backend, Directives, Pipes, Routes, Observables, TestBed, fixtures, async and fakeAsync/tick, jasmine.done

Angular2 & stylelint: Unexpected unknown pseudo-class selector “:host”

If you use css-linters like stylelint in your build-system, you will probably need to ignore Angular2’s pseudo-class host and add the following rule:

"rules": {
    "selector-pseudo-class-no-unknown": [ 
        true, 
        { ignorePseudoClasses: ["host"] } 
    ]
}

Angular2 & Bootstrap-Select

Activate Bootstrap-Select-Box after the data is here:

ngAfterViewChecked () {
    if (this.data_for_selectbox_ready) {  // <-- IMPORTANT!
      //noinspection TypeScriptUnresolvedFunction
      $('.selectpicker').selectpicker();
    }
}

Angular2: NgFor only supports binding to Iterables such as Arrays

Most probably,  the reason is a wrong assignment in the component and corrected into:

this.http.get(serviceUrl)
  .subscribe(
    (data:any) => this.store_it_here = data,  // <-- ONLY HERE
    (err:any) => console.debug('AGENCY ERROR:',err),
    () => console.debug(this.store_it_here)   
  );

Copyright © 2020 EBIA

Theme by Anders NorenUp ↑