SlideShare ist ein Scribd-Unternehmen logo
1 von 53
Downloaden Sie, um offline zu lesen
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
The parent of all
Directives
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 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
Thank You
ahmedmowd@gmail.com

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Tech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new frameworkTech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new framework
 
Angular2 + rxjs
Angular2 + rxjsAngular2 + rxjs
Angular2 + rxjs
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
Data Flow Patterns in Angular 2 - Sebastian Müller
Data Flow Patterns in Angular 2 -  Sebastian MüllerData Flow Patterns in Angular 2 -  Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
 
Angular2 Development for Java developers
Angular2 Development for Java developersAngular2 Development for Java developers
Angular2 Development for Java developers
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
Angular 4 for Java Developers
Angular 4 for Java DevelopersAngular 4 for Java Developers
Angular 4 for Java Developers
 
Angular 2: core concepts
Angular 2: core conceptsAngular 2: core concepts
Angular 2: core concepts
 
An introduction to Angular2
An introduction to Angular2 An introduction to Angular2
An introduction to Angular2
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2 Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
 
Quick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developersQuick introduction to Angular 4 for AngularJS 1.5 developers
Quick introduction to Angular 4 for AngularJS 1.5 developers
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
Async patterns in javascript
Async patterns in javascriptAsync patterns in javascript
Async patterns in javascript
 
Overview of the AngularJS framework
Overview of the AngularJS framework Overview of the AngularJS framework
Overview of the AngularJS framework
 
AngularJs presentation
AngularJs presentation AngularJs presentation
AngularJs presentation
 
Angular1x and Angular 2 for Beginners
Angular1x and Angular 2 for BeginnersAngular1x and Angular 2 for Beginners
Angular1x and Angular 2 for Beginners
 
Angular2 with TypeScript
Angular2 with TypeScript Angular2 with TypeScript
Angular2 with TypeScript
 

Ähnlich wie Exploring Angular 2 - Episode 2

Evan Schultz - Angular Camp - ng2-redux
Evan Schultz - Angular Camp - ng2-reduxEvan Schultz - Angular Camp - ng2-redux
Evan Schultz - Angular Camp - ng2-redux
Evan Schultz
 
What is your money doing?
What is your money doing?What is your money doing?
What is your money doing?
Alfonso Fernández
 

Ähnlich wie Exploring Angular 2 - Episode 2 (20)

Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
 
Angular js 2.0, ng poznań 20.11
Angular js 2.0, ng poznań 20.11Angular js 2.0, ng poznań 20.11
Angular js 2.0, ng poznań 20.11
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법
 
준비하세요 Angular js 2.0
준비하세요 Angular js 2.0준비하세요 Angular js 2.0
준비하세요 Angular js 2.0
 
React for Re-use: Creating UI Components with Confluence Connect
React for Re-use: Creating UI Components with Confluence ConnectReact for Re-use: Creating UI Components with Confluence Connect
React for Re-use: Creating UI Components with Confluence Connect
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2Angular JS2 Training Session #2
Angular JS2 Training Session #2
 
Evan Schultz - Angular Camp - ng2-redux
Evan Schultz - Angular Camp - ng2-reduxEvan Schultz - Angular Camp - ng2-redux
Evan Schultz - Angular Camp - ng2-redux
 
React 16: new features and beyond
React 16: new features and beyondReact 16: new features and beyond
React 16: new features and beyond
 
mean stack
mean stackmean stack
mean stack
 
What is your money doing?
What is your money doing?What is your money doing?
What is your money doing?
 
angular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdfangular fundamentals.pdf angular fundamentals.pdf
angular fundamentals.pdf angular fundamentals.pdf
 
Ngrx
NgrxNgrx
Ngrx
 
Hidden Docs in Angular
Hidden Docs in AngularHidden Docs in Angular
Hidden Docs in Angular
 
Capstone ms2
Capstone ms2Capstone ms2
Capstone ms2
 
Spring Web MVC
Spring Web MVCSpring Web MVC
Spring Web MVC
 
Building a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web ServicesBuilding a TV show with Angular, Bootstrap, and Web Services
Building a TV show with Angular, Bootstrap, and Web Services
 
Jan 2017 - a web of applications (angular 2)
Jan 2017 - a web of applications (angular 2)Jan 2017 - a web of applications (angular 2)
Jan 2017 - a web of applications (angular 2)
 
Angular 2.0 - What to expect
Angular 2.0 - What to expectAngular 2.0 - What to expect
Angular 2.0 - What to expect
 
Peggy angular 2 in meteor
Peggy   angular 2 in meteorPeggy   angular 2 in meteor
Peggy angular 2 in meteor
 
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 TokyoAngular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo
Angular 2 and Wijmo 5 - GrapeCity Echo 2016 Tokyo
 

Kürzlich hochgeladen

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
chiefasafspells
 
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
masabamasaba
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
masabamasaba
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
 

Kürzlich hochgeladen (20)

Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
MarTech Trend 2024 Book : Marketing Technology Trends (2024 Edition) How Data...
 
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
Love witchcraft +27768521739 Binding love spell in Sandy Springs, GA |psychic...
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
Abortion Pills In Pretoria ](+27832195400*)[ 🏥 Women's Abortion Clinic In Pre...
 
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benoni%in Benoni+277-882-255-28 abortion pills for sale in Benoni
%in Benoni+277-882-255-28 abortion pills for sale in Benoni
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
%in Rustenburg+277-882-255-28 abortion pills for sale in Rustenburg
 
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park %in ivory park+277-882-255-28 abortion pills for sale in ivory park
%in ivory park+277-882-255-28 abortion pills for sale in ivory park
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation TemplateAI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
 
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...
 
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Knoxville Psychic Readings, Attraction spells,Br...
 
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
 

Exploring Angular 2 - Episode 2

  • 2. Again, with some other Amazing features Templates
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. The parent of all Directives
  • 9. 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
  • 12. *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
  • 13. *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
  • 14. *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
  • 15. ngSwitch Structural Directives Practical Report Use ngSwitch in Lab
  • 17. 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
  • 18. 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
  • 19. @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
  • 20. @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
  • 21. A new way to treat with HTML Forms Forms
  • 22. 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.
  • 23. 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
  • 24. 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 |
  • 25. 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 |
  • 26. 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 |
  • 27. 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>
  • 28. 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
  • 29. 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
  • 30. 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!
  • 31. Let’s know more about it’s life Components
  • 32. Component Life Cycle constructor ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngOnDestroy ngAfterViewChecked ngAfterViewInit
  • 33. Component Life Cycle constructor ngOnChanges ngDoCheck ngAfterContentChecked ngOnDestroy ngAfterViewChecked After First Initialization
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. ngOnDestroy Component Life Cycle called just before the component is destroyed - Do Clean up tasks before component is destroyed ngOnDestroy() Calling Time Uses
  • 46. Let’s practice what we have learned Lab
  • 47. 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
  • 48. 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
  • 49. LAB Advanced Movie DB App : Add New Movie Title Director Writer Rating Actors Submit
  • 50. 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
  • 51. LAB Bonus Movie DB App : Save Movies on Local Storage
  • 52. 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