Show Menu
Cheatography

Angular Quick Reference using Angular Version 16

Example Project

Example Component

Binding

One Way Binding
<h1>{{pageTitle}}</h1>
Two Way Binding
<input [(ngMo­del­)]=­"­cus­tom­er.F­ir­stN­ame­">
Property Binding
<img [src]=­"­cus­tom­er.i­ma­geU­rl">
Attribute Binding
<button [attr.a­ri­a-l­abe­l]=­"­ok">­Ok<­/bu­tto­n>
Class Binding
<div [class.Se­lec­ted­]="S­ele­cte­d">S­ele­cte­d</­div>
ngClass
<div [ngClass]="setClasses()">
  {{customer.name}}
</div>
Style Binding
button [style.co­lor­]="i­sSe­lected ? 'red' : 'white­'">
ngStyle
<div [ngStyle]="setStyles()">
  {{customer.name}}
</div>
Component Binding
<cu­sto­mer­-detail [customer]="currentCustomer">
<customer-detail>
Directive Binding
<div [ngClass] = "­{se­lected: isSele­cte­d}">­Cus­tom­er<­/di­v>
Event Binding
<button (click­)="s­ave­()">­Sav­e</­but­ton>
$event
<input [value]="customer.name"
 (input)="customer.name=$event.target.value">

Lifecycle Hooks

OnChanges
export class Customer implements OnChanges {
  ngOnChanges() {}
}
OnInit
export class Customer implements OnInit {
  ngOnInit() {}
}
DoCheck
export class Customer implements DoCheck {
  ngDoCheck() {}
}
AfterC­ont­entInit
export class Customer implements AfterC­ont­entInit {
  ngAfterContentInit() {}
}
AfterC­ont­ent­Checked
export class Customer implements AfterC­ont­ent­Checked {
  ngAfterContentChecked() {}
}
AfterV­iewInit
export class Customer implements AfterV­iewInit {
  ngAfterViewInit() {}
}
AfterV­iew­Checked
export class Customer implements AfterV­iew­Checked {
  ngAfterViewChecked() {}
}
OnDestroy
export class Customer implements OnDestroy {
  ngOnDestroy() {}
}

Component with Inline Template

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

@Component({
  moduleId: module.id,
  selector: 'customer',
  template: `
    <h3>{{customer.name}}</h3>
  `
})

export class CustomerComponent {
  customer = { id: 100, name: 'John Smith' };
}
 

Structural Directives

*ngIf
<div *ngIf=­"­cur­ren­tCu­sto­mer­;else noCustomerTemplate">
   Selected {{currentCustomer.Name}}
</div>
<ng­-te­mplate #noCustomerTemplate>
   No Customer Selected
</n­g-t­emp­lat­e>
*ngFor
<ul>
  <li *ngFor­="let customer of customers">
    {{ custom­er.name }}
  </li>
</ul>
*ngSwitch
<div [ngSwitch]="orderStatus">
  <template [ngSwitchCase]="purchased"></template>
  <template [ngSwitchCase]="shipped"></template>
  <template [ngSwitchDefault]></template>
</div>
Create Custom Directive
ng generate directive <di­rective name>

Pipes

Async
<ng­-co­ntainer *ngIf=­"­cus­tomers$ | async as customers">
 ­ ­<span *ngFor­="let customer of customers">{{customer.firstName}}</span>
</n­g-c­ont­ain­er>
Currency
<p>{{price | curren­cy}­}</­p>
Date
<p>{{orderDate | date:'­med­ium­'}}­</p>
Date Format
<p>{{orderDate | date:'­yMM­Md'­'}}­</p>
Decimal
<p>{{ 12345.6789 | number­:'3.1-2' }}<­/p>
JSON Debugging
<pre>{{Customer | json}}­</p­re>
Key Value (Object or Map)
<div *ngFor­="let item of objectData | keyvalue">
  {{ item.key }}: {{ item.value }}
</d­iv>
Lower Case
<p>{{customer.name | lowerc­ase­}}<­/p>
Number
<p>­value | number­:'1.1-­2'}­}</­p>
Percent
<p>{{taxes | percen­t:'­1.1­-1'­}}<­/p>
Title Case
<p>{{ 'hello world' | titlecase }}<­/p>
Upper Case
<p>{{customer.name | upperc­ase­}}<­/p>

Component Linked Template

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

@Component({
  moduleId: module.id,
  selector: 'customer',
  templateUrl: 'customer.component.html',
  styleUrls: ['customer.component.css']
})

export class CustomerComponent {
  customer = { id: 100, name: 'John Smith' };
}
               
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          JavaScript Cheat Sheet
          CoffeeScript language Cheat Sheet

          More Cheat Sheets by GregFinzer

          Salesforce CLI Cheat Sheet
          Angular CLI Cheat Sheet
          Elasticsearch Example Queries Cheat Sheet