Angular Cheat Sheet

Creating Components

import { Component } from '@angular/core'
@Component({
 selector: 'courses',
 template: '<h2>Courses</h2>'
})
export class Component { }

Then, register them in AppModule (or the module the belong to):

@NgModule({
 declarations: [CoursesComponent]
})
export class AppModule { … }

Using Components

import { CoursesComponent } from './courses.component'
@Component({
 template: '<courses></courses>'
})

Templates
Interpolation syntax:
{{ title }}

Displaying lists:
<ul>
 <li *ngFor=“let course of courses”>
 {{ course }}
 </li>
</ul>

Services

import { Injectable } from '@angular/core';
@Injectable()
export class CourseService {
}

Dependency Injection

Register a service as a provider in AppModule (or the module it belongs to):

@NgModule({
 providers: [CourseService]
})
export class AppModule { … }

Then, inject it into the constructor of the components that need it:

export class CourseComponent {
 constructor(courseService: CourseService) {}
}

Directives
Basic structure
import { Directive } from '@angular/core'

@Directive({
 selector: '[autoGrow]',
 host: {
 '(focus)': 'onFocus()',
 '(blur)': 'onBlur()'
 }
})
export class AutoGrowDirective {
 onFocus() { … }
 onBlur() { … }
}

To access and modify DOM elements

import { ElementRef, Renderer } from '@angular/core'

export class AutoGrowDirective {
 constructor(
 private el: ElementRef,
 private renderer: Renderer) {
 }
 onFocus(){
 this.renderer.setElementStyle(this.el.nativeElement,
 'width', '200');
 }
}

Registration

Once you implement a directive, you should register it in AppModule (or the module it belong to):

@NgModule({
 declarations: [AutoGrowDirective]
})
export class AppModule { }

Angular Bindings

Interpolation
<h1>{{ title }}</h1>

Property binding
<img [src]="imageUrl" />
<img bind-src="imageUrl" />

Class binding
<li [class.active]="isActive" />

Style binding
<button [style.backgroundColor]="isActive ? 'blue' : 'gray'">

Event binding
<button (click)="onClick($event)">
<button on-click="onClick($event)">

Two-way binding
<input type="text" [(ngModel)]="firstName">
<input type="text" bindon-ngModel="firstName">

Input Properties
Using @Input annotation
import { Input } from ‘@angular/core’;
@Component(…)
export class FavoriteComponent {
 @Input(‘is-favorite’) isFavorite = false;
}

Using component metadata
@Component({
 inputs: [‘isFavorite:is-favorite’]
})
export class FavoriteComponent {
 isFavorite = false;
}

In the host component
<favorite [is-favorite]=“post.isFavorite”></favorite>


Output Properties
Using @Output annotation
import { Output } from ‘@angular/core’;
@Component(…)
export class FavoriteComponent {
 @Output(‘favorite-change’) change = new EventEmitter();

 onClick() {
 this.change.emit({ newValue: this.isFavorite });
 }
}


Using component metadata
@Component({
 outputs: [‘change:favoriteChange’]
})
export class FavoriteComponent {
 change = new EventEmitter();

 onClick() {
 this.change.emit({ newValue: this.isFavorite });
 }
}


In the host component
<favorite (favoriteChange)=“onChange()”></favorite>


Templates
@Component({
 template: ‘…’, // or
 templateUrl: ‘app/template.template.html’
})


Styles
@Component({
 styles: [‘…’],
 styleUrls: [‘…’, ‘…’];
})

Getting Ready for Angular Development

On Ubuntu:
Install nodejs
1. $ sudo apt-get install nodejs
2. $ sudo ln -s /usr/bin/nodejs /usr/bin/node
3. $ sudo apt-get install npm

Install typescript
1. $ sudo npm install -g typescript
2. $ sudo npm install -g typings

Install angular cli
1. $ sudo npm install -g @angular/cli

On Debian:
$ curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh -o install_nvm.sh
$ bash install_nvm.sh
$ source ~/.profile
$ nvm ls-remote
$ nvm install 8.5.0
$ nvm use 8.5.0
$ node -v
v8.5.0
$ npm -v
5.3.0
$ npm install -g yarn
$ yarn global add @angular/cli
$ vi ~/.profile
# yarn
export PATH="$PATH:`yarn global bin`"
$ ng set --global packageManager=yarn
$ ng --version
@angular/cli: 1.4.3
node: 8.5.0
os: linux x64

On Mac:
I followed this and this

Install nodejs
1. Install xcode
$ xcode-select --install
2. Install nvm
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
3. Open another bash session to get settings from nvm install
4. List installed node versions
$ nvm list
5. Or list from the cloud (last 9 versions)
$ nvm ls-remote | tail -n9
6. Install latest
$ nvm install 8.2.1
7. Setup this version as default
$ nvm use 8.2.1
$ nvm alias default 8.2.1
8. Check node version
$ node -v
v8.2.1
9. Update npm
$ npm install -g npm
10. Check npm version
$ npm -v
5.3.0

Install yarn package manager
1. $ npm install -g yarn

Install angular cli
1. $ yarn global add @angular/cli@1.2.7
2. Check version
$ ng --version
@angular/cli: 1.2.7
node: 8.2.1
os: darwin x64
3. Globally config angular-cli to use yarn
$ ng set --global packageManager=yarn

Test scaffold first angular app
1. $ ng new hello-world-app
2. Start server
$ cd hello-world-app
$ ng serve
3. Browse http://localhost:4200

Setup IDE
1. Install Visual Studio Code