https://cheatography.com///gregfinzer/cheat-sheets/angular/

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

Created By

GregFinzer
https://github.com/GregFinzer

Metadata

Languages: English

Published: 6th February, 2017
Last Updated: 29th September, 2023
Rated: 5 out of 5 stars based on 15 ratings

Favourited By

Comments

renukaprasadyarasu, 12:26 23 Jul 19

No comments yet. Add yours below!

Add a Comment

Related Cheat Sheets

JavaScript Cheat Sheet

CoffeeScript language Cheat Sheet

TypeScript Cheat Sheet

More Cheat Sheets by GregFinzer

Loving Your Neighbor Cheat Sheet

AWS Core Service Options Cheat Sheet

Unity Container Cheat Sheet