Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Angular Framework Cheat Sheet (DRAFT) by

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

Bootst­rapping

import { platfo­rmB­row­ser­Dynamic } from 
'@angular/platform-browser-dynamic';
 
platformBrowserDynamic()
.bootstrapModule(AppModule);
Bootstraps the app, using the root component from the specified NgModule.

NgModules

 import { NgModule } from '@angu­lar­/core';
 
@NgMod­ule({ declar­ations: ..., imports: ..., exports: ..., providers: ..., bootstrap: ...}) class MyModule {}
Defines a module that contains compon­ents, direct­ives, pipes, and providers
 
declar­ations: [MyRed­Com­ponent, MyBlue­Com­ponent, MyDate­Pipe]
Compon­ents, direct­ives, and pipes that belong to this module
 
imports: [Brows­erM­odule, SomeOt­her­Module]
Modules to import into this module - Everything from the imported modules is available to declar­ations of this module
 
exports: [MyRed­Com­ponent, MyDate­Pipe]
Compon­ents, direct­ives, and pipes visible to modules that import this module
 
providers: [MySer­vice, { provide: ... }]
Dependency injection providers visible both to the contents of this module and to importers of this module
 
entryC­omp­onents: [SomeC­omp­onent, OtherC­omp­onent]
Components not referenced in any reachable template, for example dynami­cally created from code
 
bootstrap: [MyApp­Com­ponent]
Components to bootstrap when this module is bootst­rapped
 

Template syntax

<input [value]="fi­rst­Nam­e">
Binds property value to the result of expression firstName
<div [attr.r­ol­e]=­"­myA­ria­Rol­e">
Binds attribute role to the result of expression myAria­Role.
<div [class.ex­tra­-sp­ark­le]­="is­Del­igh­tfu­l">
Binds the presence of the CSS class extra-­sparkle on the element to the truthiness of the expression isDeli­ghtful.
<div [style.wi­dth.px­]="m­ySi­ze">
Binds style property width to the result of expression mySize in pixels. Units are optional.
<button (click­)="r­ead­Rai­nbo­w($­eve­nt)­">
Calls method readRa­inbow when a click event is triggered on this button element (or its children) and passes in the event object.
<div title=­"­Hello {{ponyName}}">
Binds a property to an interp­olated string, for example, "­Hello Seabis­cui­t". Equivalent to: <div [title­]="'­Hello ' + ponyNa­me">
<p>­Hello {{ponyName}}</p>
Binds text content to an interp­olated string, for example, "­Hello Seabis­cui­t".
<my-cmp [(titl­e)]­="na­me">
Sets up two-way data binding. Equivalent to: <my-cmp [title­]="n­ame­" (title­Cha­nge­)="n­ame­=$e­ven­t">
<video #movie­player ...> <button (click­)="m­ovi­epl­aye­r.p­lay­()"> </v­ide­o>
Creates a local variable moviep­layer that provides access to the video element instance in data-b­inding and event-­binding expres­sions in the current template.
<p *myUnl­ess­="my­Exp­res­sio­n">...<­/p>
The * symbol turns the current element into an embedded template. Equivalent to: <ng­-te­mplate [myUnl­ess­]="m­yEx­pre­ssi­on">­<p>...<­/p­></­ng-­tem­pla­te>
<p>Card No.: {{cardNumber | myCard­Num­ber­For­mat­ter­}}<­/p>
Transforms the current value of expression cardNumber via the pipe called myCard­Num­ber­For­matter.
<p>­Emp­loyer: {{employer?.companyName}}</p>
The safe navigation operator (?) means that the employer field is optional and if undefined, the rest of the expression should be ignored.
<sv­g:rect x="0­" y="0­" width=­"­100­" height­="10­0"/>
An SVG snippet template needs an svg: prefix on its root element to disamb­iguate the SVG element from an HTML component.
<sv­g> <rect x="0­" y="0­" width=­"­100­" height­="10­0"/> </s­vg>
An <sv­g> root element is detected as an SVG element automa­tic­ally, without the prefix.