Angular 4/5 Cheat Sheet

General

Case Sensitivity Rules

Variables/Properties camelCase
Methods/Functions camelCase
Classes PascalCase

See Also

Usage Examples

HTML Templates

Data Binding
{{ bind-variable }}
*ngfor (let p in products)
*ngif="<condition>"
[] Pushed data from the model to the form (read-only binding)
() Push data/events from the form to the model (write only binding)
[()] Two way data binding
Data Validation Examples
  1. Validating a field entry
<input type="text" class="form-control" name="username" [(ngModel)]="creds.username" #username="ngModel" required />
<div class="text-danger" *ngif="username.touched && username.invalid && username.errors.required>Username is required</div>

2. Disabling a button if the form is not valid

<form (submit)="onLogin()" #theForm="ngForm" novalidate>
    <input type="submit" class="btn btn-success" value="Login" [disabled]="theForm.invalid" />
</form>
Calling REST APIs

Service code:

import { Injectable } from "@angular/core";
import ( Http, Response, Headers ) from "@angular/http";
import { Observable } from "rxjs";
import { Order, OrderItem } from "./order";

@Injectable()
export class DataService {

  constructor (private http: Http) { }

  private token: string = "";
  this.order = new order();

  public checkout() {
    return this.http.post("/api/orders", this.order, {
      // Assumes we've already retrieved the bearer token from the server
      headers: new Headers({ "Authorization": "Bearer " + this.token })
      .map(response => {
        // Create a new order for the use to restart shopping with a new order
        this.order = new Order();
        return true;
    });
  }
}

Controller Code:

import { Router } from "@angular/router";

errorMessage: string = "";

onCheckout() {
  this.data.checkout()
    .subscribe(success => {
      if (success) {
        this.router.navigate(["/"]);    // Navigate back to home page
      }
    }, err => this.errorMessage = "Failed to save order");
  }
}

Language Specifics

Common Imports

import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { FormsModule } from "@angular/forms";

Classes

export class MyClass { 
    ...
}
Constructor

To create a constructor use the constructor keyword. You can pass in parameters and/or you can use the shortcut syntax below to create and initialize a private member variable.

keyword: constructor (private variable: datatype = value, ...) { }

Angular CLI Commands

ng new create a new application
ng build build the application
ng serve –watch run the application, and rebuild if the code changes