SASS / SCSS css compiler

Om het te gebruiken:

npm install -g node-sass

Je kunt dan node-sass aanroepen via de commandline.
SASS / SCSS documentation.

Je kunt ook in Angular 4 sass instellen. https://scotch.io/tutorials/using-sass-with-the-angular-cli
Wat neerkomt op:
ng new my-app --style=scss

Angular : change input from component not working

Changing the input from a component from code does not trigger the change detection.
Meer over change detection.

Cassini : This operation requires IIS integrated pipeline mode.

For anyone arriving here from searching for this error, try using Response.AddHeader instead of Response.Headers.Add()

or IISExpress as an alternative:
https://stackoverflow.com/questions/4772092/starting-and-stopping-iis-express-programmatically/20494039#20494039

MediaQuery: Automatically close menu with Angular and Material design

import { NgZone } from '@angular/core';

const SMALL_WIDTH_BREAKPOINT = 720;

constructor(zone: NgZone)

private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);

this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));

  isScreenSmall(): boolean {
    return this.mediaMatcher.matches;
  }

In de HTML:

  <mat-sidenav #sidenav class="docs-component-viewer-sidenav"
              [opened]="!isScreenSmall()"
              [mode]="isScreenSmall() ? 'over' : 'side'"
              [fixedInViewport]="isScreenSmall()"
              fixedTopGap="92">

Angular template syntax alternative writing

<some-component 
  [prop]="someExp" 
  (event)="someEvent()" 
  [(twoWayProp)]="someExp">
</some-component>
<video-player #player></video-player> 

is the same as:

<some-component 
  bind-prop="someExp" 
  on-event="someEvent()" 
  bindon-twowayprop="someExp">
</some-component>
<video-player ref-player></video-player>

en
<todo-cmp 
  *ngFor="let t of todos; let i=index" 
  [model]="t" [index]="t">
</todo-cmp>

desugars into:

<todo-cmp 
  template="ngFor: let t of todos; let i=index" 
  [model]="t" [index]="i">
</todo-cmp>

desugars into:

<ng-template ngFor [ngForOf]="todos" 
  let-t="$implicit" let-i="index">
  <todo-cmp [model]="t" [index]="i"></todo-cmp>
</ng-template>

Other example. *ngIf desugars into:

<ng-template [ngIf]="true"></ng-template>

Angular Dependency Injection

http://nicholasjohnson.com/blog/how-angular2-di-works-with-typescript/

CSS animations

https://jsfiddle.net/v0vh2jug/
http://danielcwilson.com/blog/2015/07/animations-part-1/

<script src="web-animations.min.js"></script>
<div class="pulse" style="width: 150px;">Hello world!</div>
<script>
    var elem = document.querySelector('.pulse');
    var animation = elem.animate({
        opacity: [0.5, 1],
        transform: ['scale(0.5)', 'scale(1)'],
    }, {
        direction: 'alternate',
        duration: 500,
        iterations: Infinity,
    });
</script>

Angular HostListener is deprecated. Use host.

import { Component, Directive } from '@angular/core';

@Directive({
  selector: 'button[counting]',
  host: {
    '(click)': 'onClick($event.target)'
  }
})
export class CountClicks {
  nrClicks = 0;
  onClick(btn) {
    console.log("bt", btn, "nr of clicks:", this.nrClicks ++);
  }
}

@Component({
  selector: 'app-root',
  template: `<button counting>Increment</button>`
})
export class AppComponent { }

Angular Zone

https://www.youtube.com/watch?v=3IqtmUscE_U
https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html
https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html
https://blog.kwintenp.com/how-the-hell-do-zones-really-work/