What do we need ?

Technical Skill : HTML5, CSS3, JavaScript 1.8.5

Hardware and software
IDE : webstorm / atom / visual studio code
Browsers : chrome latest
Platform : nodejs latest
Database : mongodb / firebase
Version Control : git
Network : internet access to download
from git and npmjs.org
 Objective About this course

Understand and explore ES6 / ES7

Write Programs using Typescript 2.7
Understand members of Angular bundle
Develop programs using Angular platform
Workflow for fast Angular application creation with Angular CLI
Unit Testing Angular code

www.technicaltrainings.com
 About me

Vijay Shivakumar
Designer | Developer | Trainer

Training & Consultation of

Contemporary Web Technologies and Adobe products from past 14 years

www.technicaltrainings.com
 About you

Designer
Developer
Architect
Business Analyst
Technology Enthusiast

www.technicaltrainings.com
 Benefits Angular Advantage

Open Source
Reduction in development time
Latest Compliances
ES6
Modular
Internationalization and Accessibility
Performance
Popularity / Availability of resources
Clear Documentation

www.technicaltrainings.com
 Angular Features

Leverages on new HTML5 Features

Includes cutting edge JavaScript features ES6, ES7
TypeScript for strong data typing
Better error handling
Speed and performance
Modular approach
Hybrid (Mobile, Tablet and Web support)
Feature rich to create SPAs
(DOM handling, 2 way Binding, Routing, Animation, Validation, Ajax,
consumes RESTful APIs)

www.technicaltrainings.com
 Setup / Tooling What to know / use ?

NodeJS Git
TypeScript MongoDB Mlab ID / Firebase ID
TraceurJS NodeMon
BableJS NVM
SystemJS
Webpack
Express
Jasmine
Karma

www.technicaltrainings.com
 Angular CLI What is used…

NodeJS Git
TypeScript MongoDB Mlab ID / Firebase ID
TraceurJS NodeMon
BableJS NVM
SystemJS
Webpack
Express
Jasmine
Karma

www.technicaltrainings.com
 Build Tools Using Angular-CLI

ES5 None

ES6 Traceur
BableJS
SystemJS
Webpack
Express

TypeScript TypeScript
SystemJS
Traceur / BableJS
Webpack
Express
www.technicaltrainings.com
 Architecture What make Angular ?

One way data flow : Data flow only from parent to child unlike angular1
Dependency Injection : Resources are passed to a component as and when
required
Components : Creates a custom tag where the component replaces its content
Directives : Adds new functionality to HTML elements that they never had
Templates : Are separate from component
Zone.js : Manages change detection
Rendering Targets : Render an app for many devices with
Browser-platform
Browser-platform-dymanic

www.technicaltrainings.com
 Angular Architecture

HEADER

NAVIGATION

MAIN HEADER
ASIDE
ARTICLE

ARTICLE

www.technicaltrainings.com
 Module What is it doing..?

Is different from ES6 module

Every application must have at least 1 module (root module)
Root module is decorated with ‘NgModule’ from @angular/core

import : [FirstModule, SecondModule],

declarations : [Components, Pipes, Directives]
providers: [servicesToInject1, servicesToInject2]
bootstrap : [mainComponent]

www.technicaltrainings.com
 Component What is it ?

A basic Component has two parts.

1. A Component decorator
2. A component definition class

Component Decorator :
We can think of decorators as metadata added to our code.
When we use @Component on a class,
we are “decorating” that class as a Component.
Component Class :
Will have a constructor, properties , methods and life cycle events by default

www.technicaltrainings.com
 Component What is it doing..?

A component is a combination of a view (the template) and some logic

Is decorated with ‘Component’ from @angular/core
By convention every application must have a main component which is
bootstrapped via module.

selector: ‘aDomElement’(usually a custom tag name)

template:
templateUrl:
styles:[]
stylesUrl:[]

www.technicaltrainings.com
 Component What is it ?

HTML
template

Data
content Component

CSS
styles

www.technicaltrainings.com
 Templates View

template : Inline
templateUrl : external

Display Data
Format Data
User Interaction
Avoid business logic

www.technicaltrainings.com
 Styling Component v/s Page

Styling a component
styles:[`
selector { property : value; property : value }
selector { property : value; property : value }
`]
OR
stylesUrl:[ “location/style.css”, “anotherlocation/style.css” ]

Styling a page
That you define in the html page in the head or body section

www.technicaltrainings.com
 Binding
Interpolation Property Binding

<h1>{{ 2+2 }}</h1>

<h1>{{ user.name }}</h1>
<h1 [textContent]=“user.name”></h1>
<h1 bind-innerHTML='user.name'></h1>
<h1>{{ user.message() }}</h1>

Keep it simple and fast (they should not take more time to compute)
Avoid multiple statements
You can not use assignment operators e.g. = , +=, ++, - - in property binding
You can not create an object e.g. new User().

www.technicaltrainings.com
 Binding
Interpolation Property Binding

<h1>{{ 2+2 }}</h1>

<h1>{{ user.name }}</h1>
<h1 [textContent]=“user.name”></h1>
<h1 bind-innerHTML='user.name'></h1>
<h1>{{ user.message() }}</h1>

Keep it simple and fast (they should not take more time to compute)
Avoid multiple statements
You can not use assignment operators e.g. = , +=, ++, - - in property binding
You can not create an object e.g. new User().

www.technicaltrainings.com
 Event Binding Statement Binding

<button (click)=“callfun()”> Click Me </button>

<input (keydown.space)=“onSpaceBarDownEvent()”> Click Me </button>
<button on-click="onButtonClick()">Click me!</button>

Keep it simple and fast (they should not take more time to compute)
The callback functions can take a single parameter which is referred as $event
( If you wish to send multiple params you can wrap them in an object and send )
Avoid business logic on templates
You can not create an object e.g. new User().

www.technicaltrainings.com
 Events Element events supported

mouseenter dragover cut

mousedown drop copy
mouseup focus paste
click blur keydown
dblclick submit keypress
drag scroll keyup

www.technicaltrainings.com
 Style Binding class / ngClass

[class.className] =“stronghero”
[ngClass]={ expression that returns a string, object or an array}

In the example below both stronghero and boxclass can be applied if it

matches the conditions
Eg;
[ngClass]="{ stronghero: heroPower > 5, boxclass: rating > 0.5}

www.technicaltrainings.com
 Style Binding style/

As a property binding
[style.color] =“ ‘#333’ ” or [style.background-color] =“ ‘yellow’ ”
[ngStyle]={ expression that returns a style value}

In the example below the ternary operator will return a style property and
value combination
Eg;
[ngStyle]="{‘color’: ‘red’, ‘background-color’ : ’gray’}”
[ngStyle]="{‘color’: heroPower > 5 ? ‘green’ : ‘red’}”

www.technicaltrainings.com
 Local Variables Temporary variables

<input type="text" #name>

{{ name.value }}
Or
<input type="text" #name>
<button (click)="name.focus()">Focus the input</button>
Or
<video #player src=‘myvideo.mp4’></video>
<button (click)="player.play()">Play </button>
Or (usage of ref- attribute to create a local variable )
<input type="text" ref-name>
<button on-click="name.focus()">Focus the input</button>

www.technicaltrainings.com
 Directive Structural Directives

*ngIf
*ngFor
*ngSwitch

NgIf *ngIf
NgSwitch *ngSwitch
NgFor *ngFor
NgStyle [ngStyle]
NgClass [ngClass]
NgNonBindable ngNonBindable

www.technicaltrainings.com
 Structural
Directive Built in Directives

Adds or removes the DOM contents or they change the structure of DOM
hence the name
<ul>
<li *ngFor = “let user of users”> </li>
</ul>
In this example it shall loop over and for users
and create a temp variable user in the scope of the loop
For every loop the li and its content is repeated
<li *ngIf=“true/false”>{{ data }}</li> OR <li [hidden]=“true/false”>{{ data }}</li>

www.technicaltrainings.com
 Structural
Directive Built in Directives

Adds or removes the DOM contents or they change the structure of DOM
hence the name
<ul>
<li *ngFor = “let user of users”> </li>
</ul>
In this example it shall loop over and for users
and create a temp variable user in the scope of the loop
For every loop the li and its content is repeated
<li *ngIf=“true/false”>{{ data }}</li> OR <li [hidden]=“true/false”>{{ data }}</li>

www.technicaltrainings.com
 Structural
Directive The ng-template way

*ngIf
*ngFor
*ngSwitch

NgIf
NgSwitch
NgStyle
NgClass
NgFor
NgNonBindable

www.technicaltrainings.com
 Structural
Directive Switch

<div [ngSwitch]="hero.power">
<h1 *ngSwitchCase="8">Strong</h1>
<h1 *ngSwitchCase="7">Weak</h1>
<h1 *ngSwitchDefault>Recovering</h1>
</div>

www.technicaltrainings.com
 Binding
Summary When to use what ?

{{}} for interpolation

[] for property binding
() for event binding
[(ngModel)] for two way binding
# for variable declaration
* for structural directives

www.technicaltrainings.com
 Communication Input & Outputs

@Input decorator from @angular/core

allows data inlet in to the component
@Output decorator from @angular/core
allows data to be sent from the component

The same can be done with these properties of a component

input :
output :

www.technicaltrainings.com
 Communication alias

@Input(“externalName”) internalName: string ;

www.technicaltrainings.com
 Pipes Format your output

DatePipe used to format the date as needed

LowerCasePipe converts to lowercase
UpperCasePipe converts to uppercase
CurrencyPipe applies a currency symbol and manage integer and decimals
DecimalPipe manages decimal values
AsyncPipe will deal with observable values and display latest result

www.technicaltrainings.com
 Life Cycle Hook Angular Events

ngOnChange :
happens when ever the component is changed via an input directive
ngOnInit : happens only once when the component is initialized called only once
ngDoCheck : happens after the ngOnChange is called you can here access the old
value and the new value for the property that changed Called during every
change detection before ngOnChanges() and ngOnInit()
ngAfterContentInit : Called once after the first ngDoCheck()
ngAfterContentChecked :
ngAfterViewInit :
ngAfterViewChecked :
ngOnDestroy :

www.technicaltrainings.com
 Services Dealing with Data

Reusable functionality shared across components yet independent from

components ( not tied to any specific component )
Responsible for a single piece of functionality simple classes that fetch data or
logic across components
Deliver data or logic when and where it is needed yet encapsulates external
interactions such as with data

www.technicaltrainings.com
 Services How to Create ?

1 Build a service
2 Register the service
3 Inject the service

www.technicaltrainings.com
 DI Inversion of control

Dependency injection is a well-known design pattern.

A component may need some features offered by other parts of our app
such as a services. ( referred as dependency )
Instead of letting the component create its dependencies, the idea is to let the
framework create them, and provide them to the component.
That is known as "inversion of control".
Declare dependencies with providers : [] either on module or on component

To inform Angular that this service has some dependencies itself,

we need to add a class decorator: @Injectable()

www.technicaltrainings.com
 Dependency
Injection Dealing with Data

www.technicaltrainings.com
 Forms Forms & User Inputs

Forms are everywhere in an application…

FormControls
encapsulate the inputs in our forms and give us objects to work with them
Validators
give us the ability to validate inputs, any way we’d like
Observers
let us watch our form for changes and respond accordingly

www.technicaltrainings.com
 Forms FormControl

FormControl
Represents a single input field - it is the smallest unit of an Angular form.

Eg: // create a new FormControl with the value “foo”

let nameControl = new FormControl(“foo")
let name = nameControl.value; // foo
// now we can query this control for certain values:
nameControl.errors // -> StringMap<string, any> of errors
nameControl.dirty // -> false
nameControl.valid // -> true
<input type="text" [formControl]="name" />

www.technicaltrainings.com
 Forms FormGroup

FormGroup
Provides a wrapper interface around more than one FormControls so we
can manage multiple fields to validate them.

Eg: // create a new FormControl with the value “foo”

let heroInfo = new FormGroup({
firstName: new FormControl(“Bruce"),
lastName: new FormControl(“Wayne"),
power: new FormControl(“7")
})

www.technicaltrainings.com
 Template Forms Forms & User Inputs

Easy to use
Similar to legacy forms
Uses 2 way data binding
Minimal component code
Automatically track form input element and state

www.technicaltrainings.com
 Reactive Forms Forms & User Inputs

More Flexible
Used for complex scenarios
Model is immutable
Easier to perform action upon value change
Reactive Transformations (debounce)
Add input elements dynamically
Unit test forms

www.technicaltrainings.com
 Validation Forms & User Inputs

html5 validations css validations JavaScript validations

minimum .ng-invalid input.invalid
maximum .ng-touched input.touched
require .ng-valid input.valid
pattern

www.technicaltrainings.com
 Validation States

Value Changed Form Group

Pristine Form Control
Dirty Form Control
Validity
Valid Form Control
Invalid Form Control
Visited
Form Control
Touched
Untouched Form Control

www.technicaltrainings.com
 HTTP Loading Data

Http is available in HttpClientModule from @angular/common/http

www.technicaltrainings.com
 RXJS Observables

Helps manage asynchronous data

Events are treated as collections
like an array whose items arrive asynchronously over time
Subscribe to receive notifications
Used widely in Angular

www.technicaltrainings.com
 Rxjs Principles

A Store : Single source of truth called store

An Action : State is read only and only changed by dispatching actions
Reducers : Changes are made using pure functions which are called reducers

View Action Reducer Store / State

www.technicaltrainings.com
 Store What is it?

A Store : is a JavaScript object, like client side database

www.technicaltrainings.com
 NgRx Observables

www.technicaltrainings.com
 Routing Navigating / Multipage

Routing : Map a URL to a state of the application

Angular supports HTML5 and Hash based URL Routing

Define Base Path : implemented by default with angular-cli <base href=“/” />
recommended to be the first child of head tag
Import Router : import { Routes } from '@angular/router';
Configure Routes : export let ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: about', component: AboutComponent }
];
Place Templates : <router-outlet>
Activate Routes : navigate to that path in browser url

www.technicaltrainings.com
 Unit Testing Fundamentals

Jasmine for assertion

Karma for testing angular modules

www.technicaltrainings.com
www.technicaltrainings.com