Cheatography
https://cheatography.com
Angular Quick Reference using Angular Version 16
Example Component
Example Model |
|
Example Component HTML |
|
Example Component TypeScript |
|
Example Service |
|
|
Binding
One Way Binding |
<h1>{{pageTitle}}</h1> |
Two Way Binding |
<input [(ngModel)]="customer.FirstName"> |
Property Binding |
<img [src]="customer.imageUrl"> |
Attribute Binding |
<button [attr.aria-label]="ok">Ok</button> |
Class Binding |
<div [class.Selected]="Selected">Selected</div> |
ngClass |
<div [ngClass]="setClasses()">
{{customer.name}}
</div> |
Style Binding |
button [style.color]="isSelected ? 'red' : 'white'"> |
ngStyle |
<div [ngStyle]="setStyles()">
{{customer.name}}
</div> |
Component Binding |
<customer-detail [customer]="currentCustomer">
<customer-detail> |
Directive Binding |
<div [ngClass] = "{selected: isSelected}">Customer</div> |
Event Binding |
<button (click)="save()">Save</button> |
$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() {}
} |
AfterContentInit |
export class Customer implements AfterContentInit {
ngAfterContentInit() {}
} |
AfterContentChecked |
export class Customer implements AfterContentChecked {
ngAfterContentChecked() {}
} |
AfterViewInit |
export class Customer implements AfterViewInit {
ngAfterViewInit() {}
} |
AfterViewChecked |
export class Customer implements AfterViewChecked {
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="currentCustomer;else noCustomerTemplate">
Selected {{currentCustomer.Name}}
</div>
<ng-template #noCustomerTemplate>
No Customer Selected
</ng-template> |
*ngFor |
<ul>
<li *ngFor="let customer of customers">
{{ customer.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 <directive name> |
Pipes
Async |
<ng-container *ngIf="customers$ | async as customers">
<span *ngFor="let customer of customers">{{customer.firstName}}</span>
</ng-container> |
Currency |
<p>{{price | currency}}</p> |
Date |
<p>{{orderDate | date:'medium'}}</p> |
Date Format |
<p>{{orderDate | date:'yMMMd''}}</p> |
Decimal |
<p>{{ 12345.6789 | number:'3.1-2' }}</p> |
JSON Debugging |
<pre>{{Customer | json}}</pre> |
Key Value (Object or Map) |
<div *ngFor="let item of objectData | keyvalue">
{{ item.key }}: {{ item.value }}
</div> |
Lower Case |
<p>{{customer.name | lowercase}}</p> |
Number |
<p>value | number:'1.1-2'}}</p> |
Percent |
<p>{{taxes | percent:'1.1-1'}}</p> |
Title Case |
<p>{{ 'hello world' | titlecase }}</p> |
Upper Case |
<p>{{customer.name | uppercase}}</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' };
}
|
|
Created By
www.kellermansoftware.com
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by GregFinzer