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 @Component({ .... }) export class AppComponent{ 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 @Component({ .... }) export class AppComponent{ 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 @Component({ .... }) export class AppComponent{ 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 @Component({ .... }) export class AppComponent{ 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 @Component({ .... }) export class AppComponent{ 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 @Component({ .... }) export class AppComponent{ 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 @Component({ .... }) export class AppComponent{ 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> export class AppComponent{ 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> export class AppComponent{ 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>` }) export class AppComponent { @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({ ... }) export class AppComponent { @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

Similar to Exploring Angular 2 - Episode 2

Recently uploaded

Exploring Angular 2 - Episode 2