Angular Cheat Sheet // Just Code

A quick reference guide, for angular templates, router, authguard and components.

Template Syntax

Interpolation


  <p>Hello {{ponyName}}</p>   

  <div title="Hello {{ponyName}}">   

  <div><img src="{{itemImageUrl}}"></div>

  <p>The sum of 1 + 1 is {{1 + 1}}.</p>

  <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>

  <p>Employer: {{employer?.companyName}}</p>  


  // template statements
  <button (click)="readRainbow($event)">  

  <button (click)="deleteHero()">Delete hero</button>

  <button (click)="onSave($event)">Save</button>

  <button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>

  <form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>


  // binding
  <input [value]="firstName">   

  <div [attr.role]="myAriaRole">  

  <div [class.extra-sparkle]="isDelightful">  

  <div [style.width.px]="mySize">   

  <div [title]="'Hello ' + ponyName">

  <my-cmp [(title)]="name">

Router

<router-outlet name="aux"></router-outlet>

<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">

Components

Parent Child - two way communication

Just put the bannana in a box, but there is a lot more going on here than meets the eye.

The effect is that the parent and child both have access to the same data and changes are reflected in both.

  <child [(amount)]="amount"> </child>

  export class ChildComponent{
    @Input() amount: number;
    @Output() amountChange = new EventEmitter();

    withdraw(){
      this.amount -= 100;
      this.amountChange.emit(this.amount);
    }
  }

AuthGuard


import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('security')) {
            return true;
        }

        this.router.navigate(['signin'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}



import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('security')) {
            return true;
        }

        this.router.navigate(['signin'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}

Class field decorators for directives and components

@HostListener('click', ['$event']) onClick(e) {...}