This document provides an overview of various Angular concepts including planning an Angular app, component lifecycle, communication between components, directives, pipes, routes, services, and forms. It discusses creating a new Angular project, adding Bootstrap styles, and planning out recipe and shopping list pages. It also covers data models, component lifecycle hooks, using inputs, outputs, viewChild, local variables and services for communication. The document explains attribute directives, built-in and custom pipes, integrating routes, and when to use template-driven versus reactive forms. It wraps up by previewing topics for the next session.

1. presented by
Paras Mendiratta
Session 2

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

3. 1. Planning

4. 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

5. Recipe Page

6. Shopping List Page

7. Edit Recipe Page

8. New Recipe Page

9. 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

10. 2. Data Model

11. 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

12. 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

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

14. 2. Component
LifeCycle

15. Component Life Cycle

16. 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.

17. 3. Communication
Between Components

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

19. 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

20. @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’

21. @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:

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

23. 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 define 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>
Parent Template File:

24. @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());
}
}

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

26. 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

27. 5. Directives

28. 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
“Modifies DOM elements and/or extend their behaviour”
Directives

29. 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 Modifier

30. Using Attribute Directive
// Example: Background Colour Modifier
<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>

31. 6. Pipes

32. “Pipe transform displayed values within a template.”
Pipes

33. 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>

34. 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>

35. 7. Routes

36. 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 }
];

37. 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 { }

38. Route Tags
<router-outlet></router-outlet>
<!-- Routed views go here -->
<!—— Router Link Example ——>
<a routerLink=“/home”>Home</a>
<!—— Currently active link ——>
<a routerLink=“/users” routerLinkActive=“active”>Users</a>

39. 8. Services

40. 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

41. 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

42. 8. Forms

43. 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

44. 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

45. Thank You