Angular Workshop

Learn the basics and advanced topics of Angular within our three-day Angular workshop.

by Gion Kunz

Day 1 Topics

Tooling (Node, Angular CLI, Webpack)
Components, templates and bootstrapping
Property and Event Bindings
View Variables, Pipes and Template Elements
Input and Output properties
Container Components and UI Separation

Day 2 Topics

Routing
Change Detection
Performance optimization
Testing
Data and Reactive Programming with RxJS
HttpClient Service

Angular Tooling

Node.js & NPM

Used for Tooling (TypeScript, Webpack, SystemJS, AoT Compiler etc.)
Can be used for Server-Side-Rendering
Angular CLI runs on Node.js
Version > 8.9.0 is currently used in Angular

Angular CLI

Quickly get started with Angular
Whole tooling ecosystem including
TypeScript, Karma, Protractor E2E, AoT Compilation and more
Generator for project maintenance

Lab 1

Complete local setup and create first project using Angular CLI.

Prerequisites

GIT https://git-scm.com
Nodejs > 8.9.x https://nodejs.org
IDE / Editor of your choice https://www.jetbrains.com/webstorm/

First Steps

# Install Angular CLI
npm install -g @angular/cli

# Create new project
ng new my-first-app
cd my-first-app

# Create components with generator
ng generate component my-component

# Start dev server
ng serve

# Create production build
ng build

Ngmodule, Components and Bootstrap

The @Component decorator

import {Component} from '@angular/core';

@Component({
  selector: 'my-component',
  template: '<p>Hello World!</p>'
})
export class MyComponent {}

NgModules and Components

Module A

Module B

import

Components

runtime

The @NgModule decorator

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@NgModule({
  imports: [BrowserModule],
  declarations: [Comp1, Comp2, Comp3, ...],
  exports: [Comp1, Comp2, Comp3, ...],
  bootstrap: [Component]
})
export class AppModule {}

Bootstrapping

import {platformBrowserDynamic} 
  from '@angular/platform-browser-dynamic';
import {AppModule} from './app-module';

platformBrowserDynamic().bootstrapModule(AppModule);

Component Template Syntax

Expression Bindings

@Component({
  selector: 'app'
  template: '<div>{{message}}</div>'
})
class AppComponent {
  message: string = 'Hello World!';
}

Using double curly braces (mustache)
Scope is limited to component properties only
Supports simple expressions (accessors, operators, function calls etc.)

Property Bindings

@Component({
  selector: 'counter'
  template: '<input type="text" [value]="num">'
})
class AppComponent {
  num: number = 0;

  constructor() {
    setInterval(() => this.num++, 1000);
  }
}

Different Property Binding Types

<p [title]="title"></p>

<p [attr.role]="role"></p>

<p [class.is-active]="isActive()"></p>

<p [style.display]="!isActive() ? 'none' : null"></p>

Regular DOM property

Attribute binding (setAttribute)

CSS class binding (classList)

CSS style binding

Event Bindings

@Component({
  selector: 'app'
  template: `
    <button (click)="onClick()">Click me</button>
  `
})
class AppComponent {
  onClick() {
    alert('Cool!');
  }
}

Local View Variable $event

<input (input)="handleInput($event.target.value)">

Use native DOM Event Object
No new API to learn
Can be used to stop propagation / prevent default browser behavior

Some event bindings support selectors

@Component({
  selector: 'app'
  template: `
    <input (keydown.enter)="submit($event.target.value)">
  `
})
class AppComponent {
  submit(value: string) {
    console.log(value);
  }
}

Repeating template using the NgFor directive

<ul>
  <li *ngFor="let item of items">
    {{item}}
  </li>
</ul>

Using *asterisk notation to indicate template elements
NgFor DSL (let x of x)

Conditional template using the NgIf directive

<p>Sheeps: {{sheepCount}}</p>
<p *ngIf="sheepCount > 1000">
  You should be asleep now!
</p>

Also uses *asterisk syntax, to create template element
Will be attached to DOM when condition is truthy, removed when falsey

Lab 3

Create simple click counter component.

Click counter component

Create a new counter component with Angular CLI
Include a count state within the counter component
Create the necessary template to render the current count
Provide a button with an event binding to increase the count state in the component on every click by 1

Create a clickable component which will increase a counter when clicked.

Component Communication

Component Input

import {Input} from '@angular/core';

@Component({
  selector: 'app-message',
  template: '{{message}}'
})
export class MessageComponent {
  @Input() message: string;
}

Using the @Input decorator on component properties
Input can be passed to component by parent component

Binding to Input

@Component({
  selector: 'app-root',
  template: '<app-message [message]="message"></app-message>'
})
export class AppComponent {
  message: string = 'Hello World!';
}

Component Output

import {Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'timer',
  template: '<button (click)="startTimer()">Start</button>'
})
export class TimerComponent {
  @Output() timeout = new EventEmitter();

  startTimer() {
    setTimeout(
      () => this.timeout.emit('I timed out!'),
      5000
    );
  }
}

Capturing Output

@Component({
  selector: 'app',
  template: '<timer (timeout)="onTimeout($event)"></timer>'
})
export class AppComponent {
  onTimeout(message) {
    console.log(message);
  }
}

Communication in Component Tree

Example: Use component communication to create composition

Lab 4

A small UI Composition Exercise.

Prepare Repository

git clone https://github.com/syncrea/angular-workshop.git

cd angular-workshop

git checkout lab-4
npm install

Refactor ToDo List Application

Create a TodoItem component by extracting the relevant portion from TodoList
Render the component tree correctly TodoList > TodoItem
Pass input correctly and delegate output as required

Refactor an existing ToDo application which consist of only 1 TodoList component into 2 separate components, TodoList and TodoItem.

separation of UI concerns

Mixed Concerns

@Component({
  selector: 'user-profile',
  template: `
    <p class="name">{{name}}</p>
  `
})
class UserProfile {
  constructor() {
    fetch('/api/users/1')
      .then((response) => response.json())
      .then((user) => this.name = user.name);
  }
}

UserProfile component does directly connect to data
Looses UI composability

Introducing container components

@Component({
  selector: 'user-profile-container',
  template: `
    <user-profile [name]="user.name">
    </user-profile>
  `
})
class UserProfileContainer {
  constructor() {
    fetch('/api/users/1')
      .then((response) => response.json())
      .then((user) => this.user = user);
  }
}

Separate Data from UI
Render simple UI components and pass data down
Manipulate data on output of UI components

Simple UI components

@Component({
  selector: 'user-profile',
  template: `
    <p class="name">{{name}}</p>
  `
})
class UserProfile {
  @Input() name;
}

Only display data which gets passed to inputs
Delegate actions to parent components using outputs
Never manipulate data directly

Listing App using Container Component

List container component
List UI component
List Item UI component
UI Actions

Inversion of control with container components

Data gets passed down from the container component
Actions get delegated upwards in the component tree
Data fetching and manipulation only happens in the container components

Container Component

Data

Action

Container Component Wrap Up

Helps you to centralize your data fetching / manipulation
- Transparency and traceability
Re-use Components in different context
- Only the container component decides what data / actions are performed
Loose coupling with Input / Output

Lab 5

Let's introduce a container component within our ToDo app.

Prepare Repository

git stash save -u my-lab-4 
git checkout lab-5

Container for ToDo List Application

Create a TodoListContainer component
Move all data and data manipulation into the newly created container component
Render the component tree correctly TodoListContainer > TodoList > TodoItem
Pass input correctly and delegate output as required

Let's modify our ToDo list application to include a container component which holds and manipulates our Data.

The Router

A Router serves three main purposes

Navigablity & Bookmarkability
UI Composition
State

Configuration

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {MainComponent} from './main.component.ts';
import {ChildlComponent} from './child1/child1.component.ts';
import {Child2Component} from './child2/child2.component.ts';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: 'childl', component: ChildlComponent},
      {path: 'child2', component: Child2Component}
    ])
  ],
  declarations: [MainComponent, ChildlComponent, Child2Component],
  bootstrap: [MainComponent]
})
export class MainModule {}

Redirects and Fallback Component

RouterModule.forRoot([{
  path: 'child1',
  component: Child1Component
},{
  path: '',
  pathMatch: 'full',
  redirectTo: '/child1'
},{
  path: '**',
  component: PageNotFoundComponent
}];

Supports default (empty) path match
Supports redirects
Supports fallback routes
Sequence matters, first match wins strategy

Router Directives

Router Outlet

<h1>Website</h1>

<main class="content">
  <router-outlet></router-outlet>
</main>

Marks the position where Angular will put routed components
Can be nested
Can be named for auxiliary routes

Router Link Directives

<h1>Welcome!</h1>
<nav>
  <a routerLink="/child1"
     routerLinkActive="active">Child1</a>
  <a routerLink="/child2"
     routerLinkActive="active">Child2</a>
</nav>
<router-outlet></router-outlet>

Generate links to routed components
Use RouterLinkActive to attach CSS classes on active routes
Supports Router DSL

Route Parameters

Route Configuration with Parameters

RouterModule.forRoot([{
  path: 'child/:id',
  component: ChildComponent
}])

Use placeholders in route configurations
Parameters in the URL will be parsed and passed to the activated components

Accessing Parameters in Routed Components using Snapshot

import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'ngc-child',
  template: 'Child:<p>Param: {{params.id}}</p>'
})
export class ChildComponent {
  constructor(route: ActivatedRoute) {
    this.params = route.snapshot.params;
  }
}

Access route parameters by injecting ActivatedRoute
Use snapshot to get current parameter value

By default, the router re-uses a component instance when it navigates to the same component.

Using Observable Parameters

@Component({
  selector: 'ngc-child',
  template: `
   Child:
    <p>Param: {{params.id}}</p>`
})
export class ChildComponent {
  params: any;

  constructor(route: ActivatedRoute) {
    route.params.subscribe((params) => {
      this.params = params;
    });
  }
}

Params is an RxJS Observable
We can subscribe to parameter changes using a callback

Dream team: Router & Container components

@Component({
  selector: 'app-details-container',
  template: '<app-details [item]="item"></app-details>'
})
export class DetailsContainerComponent {
  item: Item;

  constructor(route: ActivatedRoute, itemService: ItemService) {
    route.params.subscribe(
      (params) => this.item = itemService.getItemById(params.id)
    );
  }
}

Lab 6

Using the router to create a details view of ToDo items.

Prepare Repository

git stash save -u my-lab-5 
git checkout lab-6

Detail view for ToDo List Application

Replace the static reference to <app-todo-list-container> in the app.component.html template with a <router-outlet> element to enable the router
Include a second route configuration in your main module which includes a parameter :no and routes to the TodoDetailsContainer component
Implement the showDetails method on the TodoListContainer component and navigate to the newly created details route

We want to use the Angular Router to create a navigable detail view in our ToDo application.

Change Detection and Performance

By default Angular Checks every binding of every component on any event

Default Change Detection

Click Event

Pure Components

Pure component only change, if their input is changing.

Is this a pure Component?

@Component({
  selector: 'ngc-list-item',
  template: `
    <div class="content">{{item}}</div>
    <button (click)="remove()" class="remove">Remove</button>`
})
export class ListItemComponent {
  @Input() item: string;
  @Output() onRemove = new EventEmitter<never>();
  
  remove() {
    this.onRemove.emit();
  }
}

"OnPush" Change Detection Strategy

@Component({
  selector: 'ngc-list-item',
  template: `
    <div class="content">{{item}}</div>
    <button (click)="remove()" class="remove">Remove</button>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListItemComponent {
  @Input() item: string;
  @Output() onRemove = new EventEmitter<never>();
  
  remove() {
    this.onRemove.emit();
  }
}

"OnPush" Change Detection

Click Event

Build Pure Components!

Performance Benefit
Simple to reason about
Easy to Reuse (no side effects)

Immutable Data

How to treat your data

const person = {name: 'Peter'};
person.name = 'Peach';


const numbers = [1, 2, 3, 4];
numbers[1] = 20;

You don’t need to use a fancy library like immutable.js
Embrace immutability as a concept

person = {name: 'Peach'};

numbers = numbers.slice();
numbers[1] = 20;

Prefer ES5.1 Array extras

let numbers = [1, 2, 3, 4];
// Mapping to new array
numbers = numbers.map(number => number * 10);
// Filtering an array
numbers = numbers.filter(number => number % 2 === 0);

Spread Operator

let numbers = [1, 2, 3, 4];

// Appending
numbers = [...numbers, 5];

// Prepending 
numbers = [0, ...numbers];

// Convert mutable op to immutable
numbers = [...numbers].sort();

The spread operator helps you to perform immutable operations
Quickly clone arrays

Object Property Spread (ES2018)

// Replace one or many properties
let person = {name: 'Peter', age: 30};
person = {...person, name: 'Peach'};

// Deep immutable operations
let course = {
  title: 'Angular Workshop',
  person: {name: 'Peter', age: 30}
};
course = {
  ...course,
  person: {...course.person, name: 'Peach'}
};

Transpiles to Object.assign
Very useful when treating your data immutably

Embrace Immutablity!

Avoid nasty side effects
Benefit from “OnPush” change detection in pure components
Usually Performance is not a problem
Use Immutable.js in high-performance cases

Lab 7

Work with Pure Components and optimize change detection.

Prepare Repository

git stash save -u my-lab-6 
git checkout lab-7

Pure Components for our ToDo List

Change all components to use ChangeDetectionStrategy.OnPush
Switch all data manipulation within the TodoService to use immutable operations

We want to switch our ToDo List application to use Pure component using “OnPush” change detection and immutable data.

TESTING

Testing a simple Counter Component

Testing with TestBed

import {
  TestBed, 
  ComponentFixture} from '@angular/core/testing';
import {MainComponent} from './main.component';
import {CounterService} from './counter.service';

describe('MainComponent', () => {
  let fixture: ComponentFixture<MainComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MainComponent],
      providers: [CounterService]
    });

    fixture = TestBed.createComponent(MainComponent);
  });
});

Use TestBed to create dynamic test module
Include Components and dependencies within the test module

Component Fixture

class ComponentFixture<T> {
    debugElement: DebugElement
    componentInstance: T
    nativeElement: any
    elementRef: ElementRef
    changeDetectorRef: ChangeDetectorRef
    componentRef: ComponentRef<T>
    detectChanges(): void
    isStable(): boolean
    whenStable(): Promise<any>
    destroy(): void
}

Wrapper around instantiated component
Access debug element, native host element and change detector

Debug Element

class DebugElement {
    nativeElement: any
    query(predicate: Predicate<DebugElement>): DebugElement
    queryAll(predicate: Predicate<DebugElement>): DebugElement[]
    children: DebugElement[]
    triggerEventHandler(eventName: string, eventObj: any)
}

Wrapper around component host element
Allows to travers through DebugElement tree (DOM like)
Can be used to tigger events

Query for DebugElements

import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';

const countElement = fixture.debugElement
  .query(By.css('.count'))
  .nativeElement;

console.log(countElement.textContent);

Triggering Events on DebugElements

import {DebugElement} from '@angular/core';

const buttonDebugElement: DebugElement = 
  fixture.debugElement.query(By.css('button'));

buttonDebugElement.triggerEventHandler('click', null);

Mocking dependencies

import {CounterService} from './counter.service';

export class CounterServiceMock() {
  increment() {}
}

TestBed.configureTestingModule({
  declarations: [MainComponent],
  providers: [{
    provide: CounterService, 
    useClass: CounterServiceMock
  }]
});

Lab 8

Testing our ToDo App.

Prepare Repository

git stash save -u my-lab-7 
git checkout lab-8

Testing our ToDo components

Create a TestBed setup where you include the TodoListContainer, TodoList and TodoItem components into the declarations
Provide your own mock TodoService which will be used by the TodoListContainer
Use the ComponentFixture debug element to query for a TodoItem and tigger a click event on the checkbox element
Assert on the state within your mock TodoService

We want to include a test for our Todo Application where we verify that when we tick off a Todo Item, it will be updated within our state.

Asynchronous Data & Reactive Programming

Reactive Programming with RxJS

Observable Streams

Item

Error

Completed

http://rxmarbles.com/

https://rxviz.com/

Simple Example

import {from} from 'rxjs';
import {filter, map} from 'rxjs/operators';

from([1, 2, 3])
  .pipe(
    map(num => num * num),
    filter(num => num > 3)
  )
  .subscribe(item => console.log(item));

Items are emitted through a stream of items
Each item flows through the stream individually
The subscription will cause the stream start flowing

Chaining Streams with switchMap

import {from, timer} from 'rxjs';
import {map, switchMap} from 'rxjs/operators';

from([1, 2, 3])
  .pipe(
    switchMap(num => timer(1000).pipe(map(() => num * num)))
  )
  .subscribe(item => console.log(item));

http://rxmarbles.com/#switchMap

RxJS and Angular

RxJS is an integral part of Angular

Route Parameters
HttpClient Service
Reactive Forms
Component Output (EventEmitter)

Using Observables in Components

@Component({
  selector: 'my-component',
  template: '{{data}}'
})
export class MyComponent {
  asyncSubscription: Subscription;
  data: number;

  constructor() {
    this.asyncSubscription = of(1)
      .pipe(delay(2000))
      .subscribe(data => this.data = data);
  }

  ngOnDestroy() {
    this.asyncSubscription.unsubscribe();
  }
}

Subscriptions should be cleaned up using unsubscribe()
Within components, the ngOnDestroy lifecycle hook is a good spot for this task
Feels cumbersome and inconvenient

Subscribe in the component view

@Component({
  selector: 'my-component',
  template: '{{asyncData | async}}'
})
export class MyComponent {
  asyncData: Observable<number>;

  constructor() {
    this.asyncData = of(1)
      .pipe(delay(2000));
  }
}

The async Pipe is creating the subscription in the view
Always the latest item in the stream will be rendered
When the component view is destroyed, the subscriptions is automatically unsubscribed

Angular HttpClient Service

HttpClient returns Observables

@Component({
  selector: 'my-component',
  template: `
   <ul>
    <li *ngFor="let item of items | asnyc">{{item}}</li>
   </ul>`
})
export class MyComponent {
  items: Observable<Item[]>;

  constructor(http: HttpClient) {
    this.items = this.http
      .get<Item[]>('/api/items');
  }
}

HttpClient API

class HttpClient {
  delete<T>(url: string, options?: {...}): Observable<T>
  get<T>(url: string, options?: {...}): Observable<T>
  head<T>(url: string, options?: {...}): Observable<T>
  jsonp<T>(url: string, callbackParam?: string): Observable<T>
  options<T>(url: string, options?: {...}): Observable<any>
  patch<T>(url: string, body: any | null, options?: {...}): Observable<T>
  post<T>(url: string, body: any | null, options?: {...}): Observable<T>
  put<T>(url: string, body: any | null, options?: {...}): Observable<T>
}

Lab 9

Use HttpClient service to load data asynchronously.

Prepare Repository

git stash save -u my-lab-8 
git checkout lab-9

Using a fake web service

Inject HttpClient into your TodoService
Create the necessary calls within TodoService to the backend
- GET /api/todos
- PUT /api/todos
- GET /api/todos/:id
- POST /api/todos/:id