This is a draft cheat sheet. It is a work in progress and is not finished yet.
Cheatsheet version
Version |
1.0.0 |
Last update |
3/31/2018 |
Angular version |
5 |
Angular CLI
Node.js version |
6.9.0 or higher |
npm version |
3.0.0 or higher |
Install Typescript |
npm install -g typescript |
Install Angular CLI |
npm install -g @angular/cli |
Verify |
ng --version |
Help |
ng --help |
New project |
ng new hello-world |
Run |
ng serve |
Run (port) |
ng serve --port 9001 |
Generate component |
ng generate component hello-component |
Generate (blueprints) |
class, component, directive, enum, guard, interface, module, pipe, service |
Build |
ng build --target=production --base-href / |
Typescript data types
Boolean |
isDone: boolean = false; |
Decimal |
decimal: number = 6; |
Hex |
hex: number = 0xf00d; |
Binary |
binary: number = 0b1010; |
Octal |
octal: number = 0o744; |
String |
name: string = 'Bob'; |
String (multi-line, template) |
sentence: string = Hello, my name is ${color}
; |
Array |
list: number[] = [1, 2, 3]; |
Array (generic) |
list: Array<number> = [1, 2, 3]; |
Tuple |
x: [string, number]; x = ["hello", 10]; |
Enum |
enum Color {Red, Green, Blue}; c: Color = Color.Green; |
Enum (number) |
enum Color {Red = 1, Green = 2, Blue = 4} |
Any |
notSure: any = 4; |
Void |
function warnUser(): void {} // Void only accepts undefined or null |
Null |
n: null = null; |
Undefined |
u: undefined = undefined; |
Never |
function error(message: string): never { throw new Error(message); } |
(let) |
(You can use 'let' before variable names) |
(type assertions) |
(<string>someValue) or (someValue as string) |
Inside app.module
Declarations |
Components in this module |
Imports |
Dependencies |
Providers |
For dependency injection (such as services) |
Bootstrap |
Only for top-level component |
|
|
Directives
Component directive |
Has a template (Most common) |
Structural directive |
Changes DOM layout (NgFor, NgIf) |
Attribute directive |
Changes appearance/behavior of element/component/directive (NgStyle) |
NgFor (loop) |
<li *ngFor="let name of names">Hello {{ name }}</li> |
Passing values between components
import { ... Input } from '@angular/core';
export class UserItemComponent implements OnInit {
@Input() name: string; ...
}
<li *ngFor="let name of names">
<app-user-item [name]="name"></app-user-item>
</li> |
|
