Angular Cheat Sheet

A Programming › JavaScript cheat sheet in English by GregFinzer

Angular Quick Reference using Angular Version 16

Development Programming JavaScript Web Angular

49,865 views 22,197 downloads 6 Feb 2017 History

PRs

4.7 avg · 18 ratings

Example Project

Angular UI	https://github.com/GregFinzer/CodePulse.UI
.NET Core API	https://github.com/GregFinzer/CodePulse.API

Example Component

Example Model	https://github.com/GregFinzer/CodePulse.UI/blob/main/src/app/features/category/models/add-category-request.model.ts
Example Component HTML	https://github.com/GregFinzer/CodePulse.UI/blob/main/src/app/features/category/add-category/add-category.component.html
Example Component TypeScript	https://github.com/GregFinzer/CodePulse.UI/blob/main/src/app/features/category/add-category/add-category.component.ts
Example Service	https://github.com/GregFinzer/CodePulse.UI/blob/main/src/app/features/category/services/category.service.ts

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' };
}

Badges

Useful Cheat Sheet Great Cheat Sheet Nice Cheat Sheet Good Cheat Sheet Appreciated Cheat Sheet Downloaded from Unusual Locations × 6

Comments (1)

renukaprasadyarasu 12:26 23 Jul 2019

No comments yet. Add yours below!