Angular JS2 Training Session #2

presented by
Paras Mendiratta
Session 2

Topics for Today
1. Planning App
2. Data Model
3. Component LifeCycle
4. Communication Between Components
5. Directives
6. Pipes
7. Routes
8. Services
9. Forms
2

Create Project
// 1. Create New Project
ng new cookbook
// 2. Go to Project Directory
cd cookbook
// 3. Add Bootstrap Library
npm install bootstrap
// 4. Add Styles in “.angular-cli.json” file
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
// 5. Run Project & open browser with URL: http://localhost:4200
ng serve

9
Root
Header
Shopping List Recipe Book
FeatureComponent
Shopping List
Shopping List Edit
Recipe List
Recipe Item
Recipe Detail
Model
Ingredient
Recipe
Recipe Edit
Service
Recipe ServiceShoppingList Service

Data Model
★ Data model is simple typescript class which binds JSON model data and provides 
OOPS advantage on top of it.
Example:
export class Product {
 
private name: string;
protected value: string;
public game: string; 
constructor(name: string) {
this.name = name;
}
getName(): string {
return this.name;
}
}
11

Recipe Model
recipe.model.ts File:
export class Recipe {
public name: string;
public description: string;
public imagePath: string;
public ingredients: Ingredient[];
// Constructor  
constructor(name:string, desc:string, imgPath:string,
ingredients:Ingredient[]) {
this.name = name;
this.description = desc;
this.imagePath = imgPath;
this.ingredients = ingredients;
}
}
12

Ingredient Model
ingredient.model.ts File:
export class Ingredient {
// Constructor  
constructor(public name:string, public amount:number) {} 
}
13

import { Component, OnInit, OnDestroy, OnChanges, AfterContentInit, AfterViewInit, SimpleChanges
} from '@angular/core';
@Component({
    selector: 'app-shopping-edit',
    templateUrl: './shopping-edit.component.html',
    styleUrls: ['./shopping-edit.component.css']
})
export class TestComponent implements OnInit, OnDestroy, OnChanges, AfterContentInit, AfterViewInit {
    constructor() { }
    ngOnInit() {
        console.log('#ngOnInit');
    }
    ngOnDestroy(): void {
        console.log('#ngOnDestroy');
    }
    ngOnChanges(changes: SimpleChanges): void {
        console.log('#ngOnChanges');
    }
    ngAfterViewInit(): void {
        console.log('#ngAfterViewInit');
    }
    ngAfterContentInit(): void {
        console.log('#ngAfterContentInit');
    }
}
Console Output 
 
1. #ngOnInit
2, #ngAfterContentInit
3. #ngAfterViewInit 
4. #ngOnDestroy
#ngOnChanges is not called because it is called when bounded property gets
changed. Example property bound with @Input tag.

3. Communication
Between Components

Types of Communication
1. Informing changes to Peer Component
2. Informing changes to Parent Component
3. Informing changes to Child Component

How to Communicate?
Service
Layer
Used for
passing data
from parent to
child
components
Used for
informing parent
for data change
happen in Child
using Events
Allows Parent to
access Child’s
public variable
and methods
@ViewChild 
Tag
Allows Parent to
access Child
Component
Public
Variables
Using  
Local
Variable
Allows
Bidirectional
Communication
@Input 
Tag
@Output
Tag

@Input
export class ChildComponent {
@Input() child: Child;
@Input('master') masterName: string;
}
Child Component File:
Parent Template File:
<h2>{{master}} controls {{children.length}} Children</h2>
<app-child *ngFor="let child of children"
[child]="child"
[master]="master">
</app-child>
Alias Name for ‘masterName’

@Output
✓ The child component exposes an EventEmitter property with which it emits 
events when something happens.
✓ The parent binds to that event property and reacts to those events.
export class ChildComponent {
@Output() onTouched = new EventEmitter<boolean>();
touched(agreed: boolean) {
this.onTouched.emit(agreed);
}
}
Child Component File:
<button (click)="touched(true)">Agree</button>
<button (click)="touched(false)">Disagree</button>
Child Template File:

@Output
export class ParentComponent {
onTouched(agreed: boolean) {
console.log(“Agreed:”, agreed);
}
}
Parent Component File:
<app-child (onTouched)=“onTouched($event)”></app-child>

Using Local Variable
✓ A parent cannot directly access the child component. However, if assign a local 
variable to child component tag then we can access its public variables.
✓ To deﬁne a local variable we use hash (#) tag.
✓ It is simple and easy to use.
✓ It has drawback that all parent-child wiring has to be done on parent side only.
<div>{{agreed}}</button>
<app-child #agreed></app-child>

@ViewChild
✓ When parent need to access the methods of child or wants to alter the variables 
of child component then @ViewChild is useful.
Parent Component File:
export class ParentComponent implements AfterViewInit {
@ViewChild(ChildComponent); 
private childComponent: ChildComponent; 
 
ngAfterViewInit() {
console.log(“Current State: ”, this.childComponent.getState());
} 
}

Using Services
✓ Services support bidirectional communication within the family.
✓ We use observer-observable design pattern to achieve this.

Component A
Button A
Component B
Button B
dataAcopy, dataB,
dataCcopy
dataA, dataBcopy,
dataCcopy
Component C
Button C
dataAcopy, dataBcopy,
dataC
Objective: Updates the value of A, B, C in all components when  
Button A, Button B, or Button C presses respectively.
Assignm
ent

1. Component Level - directives with template 
<app-child></app-child>
2. Structural Level - helps in changing DOM Layout 
<div *ngIf="isValid;then content else other_content"> 
here is ignored 
</div> 
 
<ng-template #content>content here...</ng-template> 
<ng-template #other_content>other content here...</ng-template>
3. Attribute Level - Changes the appearance or behaviour of the
component
“Modiﬁes DOM elements and/or extend their behaviour”
Directives

Attribute Directive
import { Directive, ElementRef, Input } from ‘@angular/core’;
@Directive({
selector: [‘app-background’]
})
export class BackgroundDirective {
@Input(‘app-background’) backgroundValue: string; 
 
constructor(private el: ElementRef) {}
ngOnInit() {
this.setBackgroundColor(this.backgroundValue);
}
setBackgroundColor(value:string) {
this.el.nativeElement.style.background = value;
}
}
Background Colour Modiﬁer

Using Attribute Directive
// Example: Background Colour Modiﬁer 
<div app-background=“green”>This is with green colour background.</div>
<div app-background=“pink”>This is with pink colour background.</div>
<div app-background=“seagreen”>This is with ‘sea green’ colour background.</div>

“Pipe transform displayed values within a template.”
Pipes

Pipe Example
// Here birthday is date object and pipe prints birthday in format of
// “MM/DD/YY”
<div> Ram’s birthday comes on {{ birthday | date:“MM/dd/yy” }} </div>
// Prints Name of product in UPPERCASE letters
<div> Ram’s birthday comes on {{ productName | uppercase }} </div>
// Prints Name of product in LOWERCASE letters
<div> Ram’s birthday comes on {{ productName | lowercase }} </div>

Custom Pipe
exponential-strength.pipe.ts 
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
}
}
ComponentA.template.html 
<h2>Power Booster</h2>
<p>Super power boost: {{2 | exponentialStrength: 10}}</p>

Route Example
const appRoutes: Routes = [
{ path: ‘home’, redirectTo:‘/’, pathMatch: ‘full’},
{ path: ‘users’, component: UserComponent, children:[
{ path: ‘’, component: NoUserComponent },
{ path: ‘new’, component: UserEditComponent },
{ path: ‘:id’, component: UserProfileComponent },
{ path: ‘:id/edit’, component: UserEditComponent }],
{ path: ‘game-list’, component: GameListComponent },
{ path: ‘’, component: HomeComponent }
];

Integrating Route
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from ‘@angular/platform-browser';
import { Routes, RouterModule } from ‘@angular/router‘;
import { AppComponent } from ‘./app.component';
@NgModule({
imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Route Tags
<router-outlet></router-outlet>

<!—— Router Link Example ——>
<a routerLink=“/home”>Home</a>
<!—— Currently active link ——>
<a routerLink=“/users” routerLinkActive=“active”>Users</a>

Service
“ Responsible for arranging data for view components. ”
★ Services are injectable.
★ A service provided in a component, can be reused by its children.
★ Normally, we keep business logics in services.
★ Services can be used:-
- For fetching data from server
- For fetching data from LocalStorage or SessionStorage
★ Service can be used for passing data from one component to any other
component.
★ Service can be used to inform change in data in one component to
another component who is observing the data.
We never create instance of service. It is created by Angular.
40

Service Example
Example:
import { Injectable } from ‘@angular/core’;
import { Product } from ‘./product.model’;
import { PriceService } from ‘./price.service’;
@Injectable()
export class ProductService {
private products: Product[] = [
new Product(‘Product #A’, ‘Plier’),
new Product(‘Product #B’, ‘Wrench’)
];
constructor(private priceService: PriceService) { }
getProduct(index: number): Promise<Product> {
return Promise.resolve(this.products[index]);
}
}
41

Forms
Template
Driven
Reactive
Forms
43
Easy to Use
Suitable for simple scenarios
Similar to Angular 1.x
Two way data binding (NgModel)
Minimal component code
Automatic track of form & its data
Unit testing is another challenge
Flexible but needs lot of practice
Handles any complex scenarios
Introduce in Angular 2
No data binding is done
More code in Component over HTML
Data tracked via events & dynamically
added elements
Easier Unit Testing

Wrapping up
✓ Planning Angular App
✓ Component LifeCycle
✓ Communication between components
✓ Routes
✓ Directives
Next Session
๏ User Authentication
๏ Consuming HTTP API
๏ Integrating with Firebase
๏ Production Deployment
44
Topics Covered
✓ Routes
✓ Data Model
✓ Services
✓ Forms
✓ Pipes

Angular JS2 Training Session #2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Angular JS2 Training Session #2

Similar to Angular JS2 Training Session #2 (20)

Recently uploaded

Recently uploaded (20)

Angular JS2 Training Session #2