Exploring Angular 2 - Episode 2

Exploring
Angular 2
Ahmed Moawad

Again, with some other Amazing features
Templates

Pipe Operator (|) Templates
Pipes are simple functions that accept an input value and return a transformed value
Example
@Component({ .... })
export class AppComponent{
name: string = “Open Source”;
....
}
<p> Hello, {{ name | uppercase }} </p>
app.component.html
Hello, OPEN SOURCE
app.component.ts

Date Pipe Pipes
date_expression | date[:date_format]
Example
today: number = Date().now();
....
}
<p> Today is {{ today | date: "MM/dd/yy" }} </p>
app.component.html
Today is 02/22/2017
app.component.ts

Decimal Pipe Pipes
number_expression | number[:digitsInfo]
Example
pi: number = 3.1415233455;
....
}
<p> PI: {{ pi | number: ‘1.1-4’ }} </p>
app.component.html
PI: 3.1415
app.component.ts

Safe Navigation Operator (?) Templates
Safe navigation operator (?.) is a fluent and convenient way to guard against null and undefined
values in property paths
Example
movie: any = {name: “up”};
....
}
<p> Movie Name is {{ movie?.name }} </p>
app.component.html
Movie Name is up
app.component.ts

Reference Variables (#) Templates
Reference variable is a reference to a DOM element or directive within a template.
Example
movie: any = “Prestige”;
....
}
<a href=“http://www.google.com” #spy >Google</a>
<p>{{ spy.href }}</p>
app.component.html
Google
http://www.google.com
app.component.ts

Intro Directives
Templates of the Angular are dynamic, when these templates are rendered by Angular, it
changes the DOM according to the Directive fed instructions.
Directive
{}
Metadata

Types Directives
Directive
{}
Metadata
Component
Structural
Directives
Attributes
Directives

Directives
Structural Directives

*ngFor Structural Directives
movies: string[] = [“Forrest Gump”, “Prestige”, “Up” ]
....
}
<ul>
<li *ngFor=“let m of movies”>
{{ m }}
</li>
</ul>
app.component.html
• Forrest Gump
• Prestige
• Up
app.component.ts

*ngIf Structural Directives
movies: string[] = [“Forrest Gump”, “Prestige”, “Up” ];
movie: string = “Prestige”;
temp = “”;
}
<input [(ngModel)]=“temp” >
<p *ngIf =“temp == movie”>Correct Guess!</p>
app.component.html
app.component.ts

*ngIf Structural Directives
movies: string[] = [“Forrest Gump”, “Prestige”, “Up” ];
movie: string = “Prestige”;
temp = “”;
}
<input [(ngModel)]=“temp” >
<p *ngIf =“temp == movie”>Correct Guess!</p>
app.component.html
Correct Guess!
app.component.ts
Prestige

ngSwitch Structural Directives
Practical Report
Use ngSwitch in Lab

Directives
Attribute Directives

ngClass Attribute Directives
NgClass directive may be the better choice when we want to add or remove many CSS classes
at the same time.
Example
<p [ngClass]=‘setClasses()’>Saveable but not modified</p>
setClasses() {
let classes = { saveable: this.canSave,
modified: this.isModified};
return classes;
}
} // canSave is true, isModified is false.
app.component.html
<p class=“saveable” >Saveable but not modified</p>
app.component.ts

ngStyle Attribute Directives
NgStyle directive may be the better choice when we want to modify many CSS styles at the
same time.
Example
<p [ngStyle]=‘setStyles()’> Hello Open Source </p>
setStyles() {
let styles = { ‘font-style’: this.canSave ? ‘italic’: ‘normal’
‘color’: this.isModified ? ‘orange’: ‘green’
};
return styles;
}
} //canSave is true, isModified is false.
app.component.html
Hello, Open Source
app.component.ts

@Input Attribute Directives
Input directive let the component receive inputs from other components
Example
@Component({
selector: ‘app-movie’,
template:`<p>{{movieName}}</p>`
})
export class MovieComponent{
@Input() movieName;
}
<div>
<app-movie [movieName]=‘movie.name’></app-movie>
</div>
app.component.html
Forrest Gump
movie.component.ts

@Output Attribute Directives
Output directive let the component send data to the other components
Example
@Component({ ... })
export class MovieComponent{
@Output() editMovie = new EventEmitter();
newMovie = {title: ‘The Dark Knight’, Actor: ‘Cristian Pale’ }
ngOnInit(){this.editMovie.emit(this.newMovie) }
//You Can Emit the event anytime you want to send data to the parent component
}
<div>
<app-movie (editMovie)=‘getNewMovie($event)’></app-movie>
</div>
app.component.html
movie.component.ts

A new way to treat with HTML Forms
Forms

Intro Forms
A form creates a cohesive, effective, and compelling
data entry experience.
An Angular form coordinates a set of data-bound user
controls, tracks changes, validates input, and
presents errors.

State Tracker Forms
It tracks every change of the form input state and add a class corresponding to it’s current state.
<form>
<input type="text" id="name" required [(ngModel)] ="movie" name="n">
</form>
Prestige
ng-pristine ng-untouched
ng-invalidng-dirty ng-touched
ng-valid

State Tracker Forms
It tracks every change of the form input state and add a class corresponding to it’s current state.
<form>
<input type="text" id="name" required [(ngModel)] ="movie" name="n">
</form>
Prestige
ng-pristine ng-untouched
ng-invalidng-dirty ng-touched
ng-valid
|

State Tracker Benefits Forms
.ng-invalid{
border-color: red;
}
Add Custom CSS for every state:1
Add Custom Error messages based on the State:2
<input type="text" id="name" required [(ngModel)] ="movie"
name="name" #name=ngModel>
<div [hidden] =“name.pristine || name.valid”>Input Not Valid</div>

FormsModule Forms
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/core';
import { MovieFormComponent } from './movie-form.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ MovieFormComponent ],
bootstrap: [ MovieFormComponent ]
})
export class AppModule{}
app.module.ts

ngSubmit & ngForm Forms
<form (ngSubmit)=“submitIt()” #movieForm=“ngForm”>
<input type="text" id="name" required name="n">
<input type=“submit" [disabled]=“!movieForm.form.valid”>
</form>
export class MovieFormComponent{
submitted = false;
submitIt() {
//Any other procedures
this.submitted = true;
}
}
movie-form.component.html
movie-form.component.ts
Save

ngSubmit & ngForm Forms
<form (ngSubmit)=“submitIt()” #movieForm=“ngForm”>
<input type="text" id="name" required name="n">
<input type=“submit" [disabled]=“!movieForm.form.valid”>
</form>
export class MovieFormComponent{
submitted = false;
submitIt() {
//Any other procedures
this.submitted = true;
}
}
movie-form.component.html
movie-form.component.ts
Save
Up!

Let’s know more about it’s life
Components

Component Life Cycle
constructor ngOnChanges ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngOnDestroy ngAfterViewChecked ngAfterViewInit

Component Life Cycle
constructor ngOnChanges
ngDoCheck
ngAfterContentChecked
ngOnDestroy ngAfterViewChecked
After First Initialization

constructor Component Life Cycle
The constructor for component is called before it is mounted
- constructor is the best place to inject the component
dependencies.
constructor()
Calling Time
Uses

ngOnChanges Component Life Cycle
called when an input binding value changes
- Compare The new input properties to the previous input properties.
- Do action based on the new input properties.
- ngOnChanges doesn’t detect mutable input properties changes.
ngOnChanges(changes: SimpleChanges)
Calling Time
Uses
Notes

SimpleChanges Component Life Cycle
An Object that contains all Component input properties current and previous values
import { Component, SimpleChanges, Input } from '@angular/core';
@Component({ ... })
export class AppComponent {
@Input() movies: string[];
constructor(){};
ngOnChanges(changes: SimpleChanges){
console.log(‘Previous’, changes[‘movies’].previousValue);
console.log(‘Current’, changes[‘movies’].currentValue);
}
}
app.component.ts

ngOnInit Component Life Cycle
called after the first ngOnChanges
- To set up the component after Angular sets the input properties
- We can start using input properties in this life hook because it already
have it’s values now.
- To perform complex initializations shortly after construction.
ngOnInit()
Calling Time
Uses

ngDoCheck Component Life Cycle
is triggered every time the input properties of a component are checked
- to detect and act upon changes that Angular doesn't catch on its own
- our implementation to ngDoCheck must be very lightweight or the
user experience suffers.
ngDoCheck()
Calling Time
Uses
Notes

Content Child & View Child Component Life Cycle
<div>
<app-movie [movieName]=‘movie.name’>
<app-director></app-director >
</app-movie>
</div>
<div>
<p>Movie</p>
<ng-content></ng-content>
</div>
app.component.html
movie.component.html
Movie Component is a View Child to App Component.
Director Component is a Content Child to Movie Component.
View Child
Content Child
Directive that used to project
the Content Child in it’s parent

ngAfterContent Component Life Cycle
called after component child content initialized
- take action based on changing values within the child content
ngAfterContentInit()
Calling Time
Uses
called after every check of component content
- take action based on changing values within the child content
ngAfterContentChecked()
Calling Time
Uses

ContentChild Component Life Cycle
A decorator that create a reference to the instance of a specific child Content
<app-comp>
<app-movie><app-movie>
</app-comp>
index.html
import { Component, ContentChild } from '@angular/core';
@Component({ ...,
template: `<p> Content: <ng-content></ng-content></p>`
})
@ContentChild(MovieComponent) movieComp: MovieComponent;
ngOnContentInit(){console.log(this.movieComp)}
}
app.component.ts

ng-content Component Life Cycle
<div>
<app-movie [movieName]=‘movie.name’>
<app-director></app-director>
<p>Paragraph</p>
<p class=‘red’>Paragraph with Class</p>
</app-movie>
</div>
<p>Content</p>
<ng-content selector=‘p’></ng-content>
<p>Class Content</p>
<ng-content selector=‘.red’></ng-content>
app.component.html
movie.component.html
Content
paragraph
Paragraph with Class
Class Content
Paragraph with Class
output

ngAfterView Component Life Cycle
called after component's child views are initialized
- take action based on changing values within the child view
ngAfterViewInit()
Calling Time
Uses
called after every check of a component's view
- take action based on changing values within the child view
ngAfterViewChecked()
Calling Time
Uses

ViewChild Component Life Cycle
A decorator that create a reference to the instance of a specific child Component
import { Component, ViewChild } from '@angular/core';
@Component({ ... })
@ViewChild(MovieComponent) movieComp: MovieComponent;
constructor(){};
getMovie(m){
this.movieComp.movie = m;
}
}
app.component.ts

ngOnDestroy Component Life Cycle
called just before the component is destroyed
- Do Clean up tasks before component is destroyed
ngOnDestroy()
Calling Time
Uses

Let’s practice what we have learned
Lab

LAB Beginner
Movie DB App : Movies List
Moon Light
La La Land
Prestige
The God Father
Spirited Away
Forrest Gump
Life of PI
Green Mile

LAB Intermediate
Movie DB App : Movie Details
Moon Light
La La Land
Prestige
The God Father
Spirited Away
Forrest Gump
Life of PI
Green Mile
Moon Light
Director: Barry Jenkins
Writer: Tarell Alvin
Actors:
Mahershala Ali,
Shariff Earp,
Duan Sanderson
7.8

LAB Advanced
Movie DB App : Add New Movie
Title
Director
Writer
Rating
Actors
Submit

LAB Bonus
Movie DB App : Edit and Delete Movie
Moon Light
La La Land
Prestige
The God Father
Spirited Away
Forrest Gump
Life of PI
Moon Light
Director: Barry Jenkins
Writer: Tarell Alvin
Actors:
Mahershala Ali,
Shariff Earp,
Duan Sanderson
7.8
edit delete
addMovie DB App

LAB Bonus
Movie DB App : Save Movies on Local Storage

Flash
For the first one that who has completed the
required assignments
Captain America
For the one who has the minimum syntax
errors and his code is well organized
Iron Man
For the one who has the most generic
and strong code
Thor
For the one who find the best and
shortest way to solve the problems
LAB Badges

Exploring Angular 2 - Episode 2

More Related Content

What's hot (20)

Similar to Exploring Angular 2 - Episode 2 (20)

Recently uploaded (20)

Exploring Angular 2 - Episode 2