Show Menu
Cheatography

Angular Cheat Sheet (DRAFT) by

TypeScript-based free and open-source web application framework https://angular.io

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Archit­ecture

Setup Angular
sudo npm install -g @angul­ar/cli
npm install --save @angul­ar/­mat­erial @angul­ar/cdk @angul­ar/­ani­mations hammerjs
Create New Project
ng new {name} --styl­e=scss
npm init
, create packag­e.json
Run
ng serve
, run local dev server at localh­ost­:4200
ng build
, build dist bundlers
Modules are compound of
-> Components
-> Services

Components

Generate Component
$ ng generate component {name}
A component consist of
𑂾 A component class (Types­cript class)
𑂾 A template
𑂾 A css selector that indicates how the component will be integrated
𑂾 Optional css styles applied to the template

Services

Generate Service
$ ng generate service {path}
 

Data Binding

Interp­olation
{{expression}}
displays on the template the value of a expression (a compon­ent's property).
Property binding
[prope­rty­]="e­xpr­ess­ion­"
set value of expression for properties of template elements (html, material, etc.).
E.g.:
<img alt="it­em" [src]=­"­ite­mIm­age­Url­">
Event binding
(event­)="h­and­ler­"
bind DOM events with handlers.
Two way binding
[(targ­et)­]="e­xpr­ess­ion­"
combines property with event bindings.
Used in template driven forms; target is usually
ngModel
.

Forms

 

Routing

HTML5 History API
Provide ability to modify a website's URL without a full page refresh
pushSt­ate():
Add history entry
replac­eSt­ate()
: Modify history entry
Routes
{path: "­/ho­me", component: HomeCo­mpo­nent}
in router module
<ro­ute­r-o­utl­et>­</r­out­er-­out­let>
inserts the navigation in app's template
<a router­Lin­g="p­ath­"­>click here</­a>
links in template.
path can be a string (like '/home') or an array (like ['/dish', dish.id])

Networking

More...

ng build
, build /dist folder (
ng build --help
)