Angular Cheat Sheet

A quick guide for angular concepts and commands

Angular CLI

Useful CLI Commands

NOTE in the below commands, <> denote a place holder for an actual word. For example ng new <app-name> would be run with no <> ng new myApp

CLI Command	Description
ng new <app-name>	Creates a new angular app
ng serve	Starts yours angular App
ng generate component <component-name>	Creates a new Component, with the name given
ng generate service <service-name>	Creates a new Service, with the name given
ng build	Puts together an build for deployment

Angular Building Blocks

Building Block	Description
Modules	Largest building block that helps organize our code.
Component	A component has typescript, html and css. This is what will be displayed
Service	Contains our solicitations logic. Components use services.

Routing Boiler Plate Starter

Boilerplate

app-routing.module.ts

import { 
    Routes, 
    RouterModule 
} from '@angular/router';

const routes: Routes = [];

@NgModule({  
    imports: [RouterModule.forRoot(routes)],  
    exports: [RouterModule]
})

export class AppRoutingModule { }

Sample Router

app-routing.module.ts

import { NgModule } from '@angular/core';
import { 
  Routes, 
  RouterModule 
} from '@angular/router';

//Components
import { AboutComponent}  from './about/about.component';
import { HomeComponent} from './home/home.component';
import { ServicesComponent } from './services/services.component';

// Routes for components that will serve as pages
const routes: Routes = [ 
    { path: 'about', component: AboutComponent },
    { path: 'home', component: HomeComponent},
    { path: 'services', component: ServicesComponent },
 ];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

(1) Lines 1-3 import core angular routing (2) Lines 8 -10 are our import for components that will have routes (3) Line 13 define what endpoint / route goes to what component.

app.module.ts

app.module.ts

import { NgModule }      from '@angular/core';            
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';

import { AppRoutingModule } from './app-routing.module.ts'; (1)

@NgModule({
  imports: [ BrowserModule, 
            AppRoutingModule (2)
  ], 
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ] 
  providers: [ SomeService ]
})

(1) We are importing the class from app-routing.module.ts (2) Added AppRoutingModule from line 5 to the imports array, see line 9

Modules Explained

A module

import { NgModule }      from '@angular/core';            
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { SomeService } from './some-service';

@NgModule({
  imports: [ BrowserModule ], (1)
  declarations: [ AppComponent ], (2)
  bootstrap:    [ AppComponent ] (3),
  providers: [ SomeService ]
})

Line #	NgModules	import { NgModule } from '@angular/core';
1	@NgModule({ declarations: ..., imports: ..., exports: ..., providers: ..., bootstrap: ...}) class MyModule {}	Defines a module that contains components, directives, pipes, and providers.
7	declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]	List of components, directives, and pipes that belong to this module.
6	imports: [BrowserModule, SomeOtherModule]	List of modules to import into this module. Everything from the imported modules is available to declarations of this module.
10	providers: [MyService, { provide: ... }]	List of dependency injection providers visible both to the contents of this module and to importers of this module.
9	bootstrap: [MyAppComponent]	List of components to bootstrap when this module is bootstrapped. (Component to load when the app starts)

Components & Templates

Property Binding and Interpolation

Syntax	Description
<button (click)="readRainbow($event)">	Calls method readRainbow when a click event is triggered on this button element (or its children) and passes in the event object.
<p>Hello {{ponyName}}</p>	Binds text content to an interpolated string, for example, "Hello Seabiscuit".
<div [class.extra-sparkle]="isDelightful">	Binds the presence of the CSS class extra-sparkle on the element to the truthiness of the expression isDelightful.
<div [style.width.px]="mySize">	Binds style property width to the result of expression mySize in pixels. Units are optional.
<div title="Hello {{ponyName}}">	Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <div [title]="'Hello ' + ponyName">
<my-cmp [(title)]="name">	Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">
<video #movieplayer ...> <button (click)="movieplayer.play()"> </video>	Creates a local variable movieplayer that provides access to the video element instance in data-binding and event-binding expressions in the current template.
<p>Employer: {{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.