Rajanvora Angular Cheat Sheet

Angular Cheat Sheet Cheat Sheet
by rajanvora via cheatography.com/141179/cs/30219/
ng commands Filters (cont)
ng new app-name data | json

(--routing) add routing Convert a JavaScript object into JSON string.
{{ json_expression | json : spacing}}
ng add @angular/material
e.g.
(install and configure the Angular Material library)
<pre id="default-spacing">
ng build
{{ {'name':'value'} | json:4 }}
(build your application and places directory called "dist") </pre>
ng serve (build and serve on 4200) output:
ng serve -o (automatically open the browser) {
ng serve -p 666 -o (use port 666) "name": "value"

}
ng generate component csr
array | limitTo:limit
or ng g c csr
Creates a new array containing only a
ng g c csr --flat (generate component without folder) specified number of elements in an array.
ng g s csr-data (generate service objects) {{ limitTo_expression | limitTo : limit :
ng g cl models/csr begin}}
(generates the csr class inside of the models folder) text | linky 1
Finds links in text input and turns them into html
ng g i models/csr
links.
(generates the csr interface inside the models folder)
* Requires ngSanitize Module
ng g p shared/init-caps
<span ng-bind-html="linky_expression |
(generates the init-caps pipes) linky"></span>
e,g,
Filters <div ng-bind-html="snippet | linky">
</div>
<div ng-bind-html="snippetWithSingleURL |
linky:'_blank'">
</div>
<div ng-bind-html="snippetWithSingleURL |
linky:'_self':
{rel: 'nofollow'}">
</div>
string | lowercase
Converts string to lowercase.
{{ lowercase_expression | lowercase}}
number | number [:fractionSize]
Formats a number as text.
If the input is not a number an empty string is
returned.
{{ number_expression | number : fractionSize}}
e.g.
Default formatting:
amount | currency [:symbol]
{{ currency_expression | currency : symbol :
fractionSize}}
e.g.
<span id="currency-no-fractions">
{{amount | currency:"USD$":0}}
</span>
Formats a number as a currency (ie $1,234.56).
date | date[:format]
{{ date_expression | date : format : timezone}}
e.g.
<span ng-non-bindable>
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}
</span>
<span>
{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}
</span>
output:
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}:
12/15/2021@11:40PM
array | filter:expression
Selects a subset of items from array.
Expression takes string|Object|funct‐
ion()
{{ filter_expression | filter : expression :
comparator : anyPropertyKey}}
e.g.
ng-repeat="friend in friends | filter:searc‐
hText"
By rajanvora Published 15th December, 2021. Sponsored by Readable.com

cheatography.com/rajanvora/ Last updated 15th December, 2021. Measure your website readability!
Page 1 of 11. https://readable.com
Filters (cont) Forms (cont)
<span id='number-default'> user = {username: '', email: '', password: ''};

{{val | number}} constructor() { }
</span> ngOnInit(): void { }
No fractions: /**
<span> * Called when the user clicks in the "Register"
{{val | number:0}} * button.
</span> */
Negative number: onSubmit() {
<span> console.log('User: ', this.user.username);
{{-val | number:4}} console.log('Email: ', this.user.email);
</span> console.log('Password: ', this.user.passw‐
array | orderBy:predicate
[:reverse] ord);
Predicate is function(*)|string|Array. }
Reverse is boolean }
*{{ orderBy_expression | orderBy : .html
expression : reverse : comparator}}* <div>
e.g. <form novalidate #registerForm="ngForm"
ng-repeat="friend in friends | orderBy:'-ag‐ (ngSubmit)="onSubmit()">
e'" 
string | uppercase <p>
Converts string to uppercase. <mat-form-field>
{{ uppercase_expression | uppercase}} <input
<h1>{{title | uppercase}}</h1> matInput
placeholder="Username"
Forms type="text"
In Angular, there are 2 types: template- [(ngModel)]="user.username"
driven(easier to use) name="username"
and reactive(recommended for large forms) #username="ngModel"
Template-driven: required>
Import FormsModule in app.module.ts <mat-error
Sample: *ngIf=
.ts "username.errors?.required">
import { Component, OnInit } from '@angu‐ Username is required
lar/core'; </mat-error>
@Component({ </mat-form-field>
selector: 'app-newuser', </p>
templateUrl: './newuser.component.html', 
styleUrls: ['./newuser.component.scss']
})
export class NewuserComponent implements
OnInit {
// Data

Forms (cont) Forms (cont)
<p> Register user

<mat-form-field> </button>
<input matInput </p>
placeholder="Email" </form>
type="email" </div>
[(ngModel)]="user.email" this example uses two way binding and templateRef
name="email" (for registerForm)
#email="ngModel"
required> Reactive Forms:
<mat-error import ReactiveFormsModule in app.module.ts
*ngIf="email.errors?.required"> all the form logic and validation are done
Email is required controller
</mat-error> create a model
</mat-form-field> .ts
</p> export class User {
 username: string;
<p> email: string;
<mat-form-field> password: string;
<input }
matInput .ts
placeholder="Password" import { Component, OnInit } from '@angu‐
type="password" [ lar/core';
(ngModel)]="user.password" import { User } from '../shared/user';
name="password" @Component({
#password="ngModel" selector: 'app-newuser',
required> templateUrl: './newuser.component.h‐
<mat-error tml',
*ngIf="password.errors?.required"> styleUrls: ['./newuser.compon‐
Password is required ent.scss']
</mat-error> })
</mat-form-field> export class NewuserComponent implements OnInit
</p> {
<p> // Register form
<button type="submit" registerForm: FormGroup;
mat-button // form for submitting the new user
[disabled]="registerForm.form.invalid"> myUser: User;
// the user generated from the form
@ViewChild('newuserForm') userFormD‐
irective:
FormGroupDirective;
// reference to the form in the HTML
template,
// in order to perform validation
/*

* The errors being shown for each field. }

* The form will automatically update with };
* the errors stored here.
*/ /**
formErrors = { * Inject a FormBuilder for creating a FormGroup.
'username': '', */
'email': '', constructor(private fb: FormBuilder) {
'password': '' this.createForm();
} }
/*
* Messages that will be shown in the /**
* mat-error elements for each type of * Create the comment form with the injected
validation error. FormBuilder.
*/ */
validationMessages = { createForm(){
'username': { this.registerForm = this.fb.group({
'required': username: ['',
'Username is required.', [Validators.required,
'minlength': Validators.minLength(3),
'Username must be at Validators.maxLength(20)] ],
least 3 characters long.', password: ['',
'maxlength': [Validators.required,
'Username cannot be Validators.minLength(8)] ],
more than 20 characters long.' email: ['',
}, [Validators.required,
'password': { Validators.email] ],
'required': });
'Password is required.', this.registerForm.valueChanges.subscribe(
'minlength': data => this.onValueChanged());
'Password must be at // every time a value changes inside the form, the
least 8 characters long.' // onValueChanged() method will be triggered
}, this.onValueChanged();
'email': { // reset validation messages
'required': }
'Email is required.', /**
'email': * Validate the form after a value change.
'Email not in valid format.' */
onValueChanged() {
if(!this.registerForm) { return; }

// in case the form hasn't been created yet this.myUser = this.registerForm.value;

const form = this.registerForm; // TODO: send the form data to somewhere else
// the form values are constantly // Reset the form
changing, this.registerForm.reset({
// that's why we have to take a snapshot username: '',
// Validate the form email: '',
for (const field in this.formErrors) { password: ''
// Iterate the form field by field });
if (this.formErrors.hasOwnProp‐ this.userFormDirective.resetForm();
erty(field)) { }
this.formErrors[field] = ''; }
// clear previous error message (if any) .html
const control = form.get(field); <div>
if (control && control.dirty <form
&& !control.valid) { novalidate
// If this form field has been [formGroup]="registerForm"
// touched an it's not valid #newuserForm="ngForm"
const messages = (ngSubmit)="onSubmit()">
this.validationMessages[field]; <p>
for (const key in control.errors) { <mat-form-field>
if (control.errors.hasOwnProperty(key)) { <input
// Add the corresponding error messages matInput
// to the array of form errors. formControlName="username"
// The form mat-error elements will update placeholder="Username"
// immediatly with the new form errors. type="text"
this.formErrors[field] += required>
messages[key] + ' '; <mat-error
} *ngIf="formErrors.username">
} {{formErrors.username}}
} </mat-error>
} </mat-form-field>
} </p>
} <p>
/** <mat-form-field>
* Called when the user clicks the "Submit" <input
button in the form matInput
*/
onSubmit(){
// Create a User object from the form data

Forms (cont) Directives
formControlName="password" ng-app="plaintext"
placeholder="Password" ng-bind[-html-unsafe]=
"expression"
type="password" ng-bind-temp‐
required> late="string{{expression}}string{{expression}}"
<mat-error ng-change="expression"
*ngIf="formErrors.password"> ng-checked=
"boolean"
{{formErrors.password}} ng-class[-even|-odd]=
"string|object"
</mat-error> ng-[dbl]click=
"expression"
</mat-form-field> ng-cloak="boolean"
</p> ng-controller=
"plaintext"
<p> ng-disabled=
"boolean"
<mat-form-field> <form|ng-form
name="plaintext"> ng-form="‐
|
<input plaintext"
matInput ng-hide|show=
"boolean"
formControlName="email" ng-href="plaintext{{string}}"
placeholder="Email" ng-include=
"string"|
<ng-include
src="st‐
type="email" ring"
required> onload="expression" autoscroll="express‐
<mat-error ion">
*ngIf="formErrors.email"> ng-init="expression"
{{formErrors.email}} <input ng-pattern=
"/regex/"
</mat-error> ng-minlength ng-maxlength ng-required
</mat-form-field> <input ng-list="delimiter|regex">
</p> <input type="checkbox"
ng-true-value=
"‐
<button type="submit" plaintext"
[disabled]="registerForm.invalid" ng-false-value=
"plaintext">
mat-raised-button ng-model="expression"
color="primary"> ng-mousedown=
"expression"
Submit ng-mouseenter=
"expression"
</button> ng-mouseleave=
"expression"
</form> ng-mousemove=
"expression"
</div> ng-mouseover=
"expression"
ng-mouseup=
"expression"
<select ng-multiple
>
ng-non-bindable
ng-options=
"select [as label] [group by group]
for ([key,] value) in object|array"
ng-pluralize|<ng-pluralize
count="num‐
ber"
when="object" offset="number">
ng-readonly=
"expression"
ng-repeat="([key,] value) in object|array"
<option ng-selected=
"boolean">
ng-src="string"

Directives (cont) Template-Reference Variables
ng-style="string|object" Inside the template of a component, we can assign

ng-submit="expression" a
ng-switch="expression"|<
ng-switch on="exp‐ reference to an HTML element so we can access
ression"> its content
ng-switch-when=
"plaintext" from other elements inside the DOM.
ng-switch-default
ng-view|<ng-view> RxJS
ng-bind-html=
"expression" A library for reactive programming in JS, an
asynchronous-programming paradigm where it
Routing exists an
With routing, you can introduce navigation between entity called Observable<T>, which consists
screens in a value
(actually, between Angular components) in your of type T that changes over time.
app. Our application components can subscribe to this
Define routes in app-routing.module.ts observable,
Instantiate the router in html as : becoming observers by implementing a callback
<router-outlet></router-outlet> which will be
To redirect the user to a defined route triggered whenever the value changes.
use the routerLink directive The main method of observable objects is
subscribe(data => {}), which enables us to
Data Binding ask Angular to
Angular components are defined in three files: notify us whenever the data changes.
an HTML file for the layout (view), Other interesting functions: map, pipe, filter,
a TypeScript file for the logic (controller), and delay..
a CSS file for the style.

One-way data binding is the mechanism for rendering Services
in the Components without UI

view objects defined in the controller (property ng g s services/datafetch
binding) Tell Angular to inject this service in all of the
and for allowing the view to call methods in the app components that ask for it, so let’s add it
controller (event binding). to
Two-way data binding, where using the notation the providers section of the app.module.tsfile
[(object)], To use it in any component of our app,
a bidirectional relationship between the view you just have to ask for it in the constructor.
and
the controller is established, so any changes on Promises
the bound
object from the controller will be reproduced in
the
view and vice versa.
Structural Directives
Structural directives allow the developers to These are JS mechanism for async programming,
include where a
some code logic inside the HTML template in a very pending value is returned, which might be
quick available soon
and easy way in order to determine when and how (resolve) or never (reject)
many Promises allow you to specify what to do when the
times an HTML element has to be rendered answer to
your request arrives or when something goes
wrong, and
meanwhile you can continue with the execution of
your program.
.service.ts
@Injectable({
providedIn: 'root'
})
export class UserService {

Promises (cont) HTTP Request
constructor() {} The HttpClient class underlies the JavaScript

getUsers(): Promise<User> { XMLHttpRequest
return new Promise( object and returns an observable with the
function(resolve, reject){ server-response
// get the data from body encoded as an object of the specified class.
some API... Sample:
if(successful) { Image a GET request to http://localhost:1‐
// Data was 234/items
successfully retrieved returns following JSON
resolve(r‐ [
esult); {
} else { "name": "Porcelain cup",
// There was an "price": 9.99,
error retrieving the data "quantity": 20
reject(er‐ },
ror); {
} "name": "Photo frame",
}); "price": 5.99,
} "quantity": 50
} }
.ts (component that consumes the service) ]
@Component({ create a model to capture the data
selector: 'app-users', export class Item {
templateUrl: './users.component.html', name: string;
styleUrls: ['./users.component.scss'] price: number;
}) quantity: number;
export class UsersComponent implements OnInit { }
constructor(private userService: After importing HttpClientModule in app.mo‐
UserService) {} dule.ts
myUsers: User[]; .service.ts
getUsers(){ import { Injectable, Inject } from '@angu‐
this.userService.getUsers() lar/core';
.then(users => this.myUsers = users) import { Item } from '../shared/item'
// the Promise import { Observable } from 'rxjs';
was resolved import { map, catchError } from 'rxjs/operat‐
.catch(error => console.log(error)) ors';
// the Promise was rejected import { HttpClient } from '@angular/commo‐
} n/http';
ngOnInit(): void {} @Injectable({
} providedIn: 'root'
})
export class ItemService {
baseURL = 'http://localhost:1234/'

HTTP Request (cont) HTTP Request (cont)
/** export class ItemsComponent implements OnInit {

* Injects an HTTPClient and the BaseURL constructor(private itemService: ItemService)
* into the service. {}
* @param http HTTPClient used for making myItems: Item[];
* HTTP requests to the backend. ngOnInit(): void {
*/ this.itemService.getItems()
constructor(private http: HttpClient) { } .subscribe(items => this.myItems = items,
/** // any time the value of the Observable
* Return the list of items from the API, // changes, update the myItems object
* as an array of Item objects error => console.log(error));
*/ // if there is an error, log it to the
getItems(): Observable<Item[]> { // console
return this.http.get<Item[]> }
(this.baseURL + 'items'); }
// make the HTTP GET request
} Workflow
/** Steps to creating a reactive form:
* Send a new item to the API, as 1. Create the Domain Model
* an Item object 2. Create the Controller with references to View
*/ 3. Create the View
addItem(item: Item): Observable<Item> { 4. Add Validations
return this.http.post<Item> 5. Add Submit Validation Control
(this.baseURL + 'items', item); 6. Add Dynamic Behaviors
// make the HTTP POST request
}
}
component to consume the service:
.ts
import { Component, OnInit } from '@angu‐
lar/core';
import { ItemService } from '../servi‐
ces/item';
import { Item } from '../shared/item';
@Component({
selector: 'app-items',
templateUrl: './items.component.html',
styleUrls: ['./items.component.scss']
})

Rajanvora Angular Cheat Sheet

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rajanvora Angular Cheat Sheet

Uploaded by

Copyright:

Available Formats

Angular Cheat Sheet Cheat Sheet

by rajanvora via cheatography.com/141179/cs/30219/

ng commands Filters (cont)

ng new app-name data | json

ng serve -p 666 -o (use port 666) ​ ​"​nam​e": "​val​ue"

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

Filters (cont) Forms (cont)

<span id='nu​mbe​r-d​efa​ult​'> user = {username: '', email: '', password: ''};

In Angular, there are 2 types: template- [(ngMo​del​)]=​"​use​r.u​ser​nam​e"

driven(easier to use) name="u​ser​nam​e"

and reacti​ve(​rec​omm​ended for large forms) #usern​ame​="ng​Mod​el"

Import FormsM​odule in app.mo​dule.ts <ma​t-error

import { Component, OnInit } from '@angu​‐ Username is required

​ ​ ​ ​ ​ ​ ​ ​sel​ector: 'app-n​ewu​ser', </p>

templa​teUrl: './new​use​r.c​omp​one​nt.h​tml',

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

Forms (cont) Forms (cont)

<p> Register user

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

Forms (cont) Forms (cont)

​ ​ ​ * The errors being shown for each field. ​ ​ }

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

Forms (cont) Forms (cont)

​ ​ // in case the form hasn't been created yet this.m​yUser = this.r​egi​ste​rFo​rm.v​alue;

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

Forms (cont) Directives

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

Directives (cont) Templa​te-​Ref​erence Variables

ng-style="​str​ing​|ob​jec​t" Inside the template of a component, we can assign

a TypeScript file for the logic (contr​oller), and delay..

a CSS file for the style.

in the Components without UI

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

Promises (cont) HTTP Request

​ ​ ​con​str​uctor() {} The HttpClient class underlies the JavaScript

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

HTTP Request (cont) HTTP Request (cont)

/** export class ItemsC​omp​onent implements OnInit {

By rajanvora Published 15th December, 2021. Sponsored by Readable.com

You might also like

ng serve -p 666 -o (use port 666) "name": "value"

<span id='number-default'> user = {username: '', email: '', password: ''};

In Angular, there are 2 types: template- [(ngModel)]="user.username"

driven(easier to use) name="username"

and reactive(recommended for large forms) #username="ngModel"

Import FormsModule in app.module.ts <mat-error

import { Component, OnInit } from '@angu‐ Username is required

selector: 'app-newuser', </p>

templateUrl: './newuser.component.html',

* The errors being shown for each field. }

// in case the form hasn't been created yet this.myUser = this.registerForm.value;

Directives (cont) Template-Reference Variables

ng-style="string|object" Inside the template of a component, we can assign

a TypeScript file for the logic (controller), and delay..

constructor() {} The HttpClient class underlies the JavaScript

/** export class ItemsComponent implements OnInit {