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