Angular Directives

*ngIf="condition" # conditional rendering
*ngIf="condition; else elseBlock" # with else
*ngFor="let item of items" # loop
*ngFor="let item of items; let i = index" # with index

<div [ngSwitch]="value">
    <p *ngSwitchCase="1">One</p>
    <p *ngSwitchCase="2">Two</p>
    <p *ngSwitchDefault>Other</p>
</div>

[ngClass]="{active: isActive}" # dynamic class
[ngStyle]="{color: textColor}" # dynamic style
[class.active]="isActive" # toggle class
[style.color]="textColor" # bind style

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @HostListener('mouseenter') onMouseEnter() {
        // change appearance
    }
}

ng generate directive highlight # CLI command
ng g d highlight # shorthand