EBIA

Tag: 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 Revisited – V4+

Introduction

Setup

ng new ng-testing --routing
npm start
ng test
ng test --code-coverage

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)   
  );

Rendering Data from Observables

Elvis Operator within Template

{{ (__responseData | async)?.calculation | json }}

Or with ngFor

@Component({
  selector: 'my-app',
  providers: [HTTP_PROVIDERS],
  template: `
    <div *ngFor="let calculation of calculations | async">
      Gross: {{ calculation.gross }}<br>
      Net: {{ calculation.net }}
    </div>
  `,
  directives: [NgFor]
})
export class App {
  calculations: Observable<{gross:number; net:number}[]>;

  constructor(private _http: Http) {
    this.calculations = this._http.get("./data.json")
                            .map(res => res.json().calculation)
  }
}

>> See plunker here

Copyright © 2020 EBIA

Theme by Anders NorenUp ↑