General
Case Sensitivity Rules
Variables/Properties | camelCase |
Methods/Functions | camelCase |
Classes | PascalCase |
See Also
- TypeScript Cheat Sheet
- lodash
- rxjs
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
- 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 |