Angular 7

c:\angular\app1\src\app\washington\washington.component.ts

c:\angular\app1\src\app\washington\washington.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 151 | 454

 Angular 7

Sharing Data from Parent Component to Child Component

• We can share the data from parent component to child component using “property binding”.
• Assign the value of “parent component’s property” to “child component’s property”, using “property
binding”.
• Set @Input() decorator for the child component’s property to accept value from parent component’s
property. You can import “Input” decorator from “@angular/core” package.

Steps:
• Import “Input”:

import { Input } from “@angular/core”;

• Create data in parent property at parent component:

class parentcomponent
{
parentproperty: datatype;
…
}

• Pass data from parent property to child property:

<child [childproperty]=”parentproperty” …>

</child>

• Receive data into child property at child component:

class childcomponent
{
@Input( ) childproperty : datatype;
…
}

Sharing Data from Parent Component to Child Component - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

D. Harsha Vardhan (UI Expert) P a g e 152 | 454

 Angular 7

ng g component company

ng g component employee

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 153 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

D. Harsha Vardhan (UI Expert) P a g e 154 | 454

 Angular 7

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\company\company.component.ts

c:\angular\app1\src\app\company\company.component.html

c:\angular\app1\src\app\employee\employee.component.ts

D. Harsha Vardhan (UI Expert) P a g e 155 | 454

 Angular 7

c:\angular\app1\src\app\employee\employee.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

ViewChild
• The “ViewChild” represents an element, which is a child of the view (template) of the component.
• ViewChild is used to access an element, that is present in the view (template) of the component.
• ViewChild can contain a child element of a specific type (class).

D. Harsha Vardhan (UI Expert) P a g e 156 | 454

 Angular 7

• ViewChild is used to access properties / methods of the child.

Steps:
• Import “ViewChild”:

import { ViewChild } from “@angular/core”;

• Create ViewChild property:

class parentcomponent
{
@ViewChild(classname) propertyname: classname;
…
}

• Access properties / methods of the child element, using ViewChild’s property:

this.propertyname.property

this.propertyname.method( )

ViewChild - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Company

ng g component Employee

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 157 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 158 | 454

 Angular 7

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\company\company.component.ts

D. Harsha Vardhan (UI Expert) P a g e 159 | 454

 Angular 7

c:\angular\app1\src\app\company\company.component.html

c:\angular\app1\src\app\employee\employee.component.ts

c:\angular\app1\src\app\employee\employee.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 160 | 454

 Angular 7

• Click on “Click Me”.

D. Harsha Vardhan (UI Expert) P a g e 161 | 454

 Angular 7

ViewChildren
• The “ViewChildren” represents a set of elements of specific type, which is a child of the view (template) of
the component.
• ViewChildren is used to access elements, that is present in the view (template) of the component.
• ViewChildren is used to access properties / methods of the children.

Steps:
• Import “ViewChildren” and “QueryList”:

import { ViewChildren, QueryList } from “@angular/core”;

D. Harsha Vardhan (UI Expert) P a g e 162 | 454

 Angular 7

• Create ViewChildren property:

class parentcomponent
{
@ViewChildren(classname) propertyname: QueryList<classname>;
…
}

• Access properties / methods of the child element, using ViewChildren’s property:

var array = this.propertyname.toArray();

array[index].property

array[index].method( )

ViewChildren - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Company

ng g component Employee

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 163 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 164 | 454

 Angular 7

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\company\company.component.ts

D. Harsha Vardhan (UI Expert) P a g e 165 | 454

 Angular 7

c:\angular\app1\src\app\company\company.component.html

c:\angular\app1\src\app\employee\employee.component.ts

c:\angular\app1\src\app\employee\employee.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 166 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 167 | 454

 Angular 7

• Click on “Click Me”.

D. Harsha Vardhan (UI Expert) P a g e 168 | 454

 Angular 7

ContentChild
• The “ContentChild” represents an element, which is a child of the content of the component.
• ContentChild is used to access an element, that is present in the content of the component.
• ContentChild can contain a child element of a specific type (class).
• ContentChild is used to access properties / methods of the child.

Steps:
• Import “ContentChild”:

import { ContentChild } from “@angular/core”;

• Create ContentChild property:

class parentcomponent
{
@ContentChild(classname) propertyname: classname;
…
}

• Access properties / methods of the child element, using ContentChild’s property:

this.propertyname.property

this.propertyname.method( )

ContentChild - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Company

ng g component Employee

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 169 | 454

 Angular 7

c:\angular\app1\src\styles.css

D. Harsha Vardhan (UI Expert) P a g e 170 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\company\company.component.ts

D. Harsha Vardhan (UI Expert) P a g e 171 | 454

 Angular 7

c:\angular\app1\src\app\company\company.component.html

c:\angular\app1\src\app\employee\employee.component.ts

c:\angular\app1\src\app\employee\employee.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 172 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 173 | 454

 Angular 7

• Click on “Click Me”.

ContentChildren
• The “ContentChildren” represents a set of elements of specific type, which is a child of the content of the
component.
• ContentChildren is used to access elements, that is present in the content of the component.
• ContentChildren is used to access properties / methods of the children.

D. Harsha Vardhan (UI Expert) P a g e 174 | 454

 Angular 7

Steps:
• Import “ContentChildren” and “QueryList”:

import { ContentChildren, QueryList } from “@angular/core”;

• Create ContentChildren property:

class parentcomponent
{
@ContentChildren(classname) propertyname: QueryList<classname>;
…
}

• Access properties / methods of the child element, using ContentChildren’s property:

var array = this.propertyname.toArray();

array[index].property

array[index].method( )

ContentChildren - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Company

ng g component Employee

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 175 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 176 | 454

 Angular 7

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\company\company.component.ts

D. Harsha Vardhan (UI Expert) P a g e 177 | 454

 Angular 7

c:\angular\app1\src\app\company\company.component.html

c:\angular\app1\src\app\employee\employee.component.ts

c:\angular\app1\src\app\employee\employee.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 178 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 179 | 454

 Angular 7

• Click on “Click Me”.

D. Harsha Vardhan (UI Expert) P a g e 180 | 454

 Angular 7

Reference Names
• Reference names are used to access specific instance of the element in the template or content.
• You can create the reference name by writing “#” and followed by reference name in the template.
• You can access the element by specifying its reference name in the @ViewChild or @ContentChild
decorator.
Syntax:
• Create reference name:

<tag #referencename> </tag>

• Access the element

class parentcomponent
{
@ViewChild(“referencename”) propertyname: classname;
@ContentChild(“referencename”) propertyname: classname;
…
}

• Access properties / methods of the child element

this.propertyname.property

this.propertyname.method

Reference Names - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Company

ng g component Employee

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 181 | 454

 Angular 7

c:\angular\app1\src\styles.css

D. Harsha Vardhan (UI Expert) P a g e 182 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\company\company.component.ts

D. Harsha Vardhan (UI Expert) P a g e 183 | 454

 Angular 7

c:\angular\app1\src\app\company\company.component.html

c:\angular\app1\src\app\employee\employee.component.ts

c:\angular\app1\src\app\employee\employee.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 184 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 185 | 454

 Angular 7

• Click on “Click Me”.

D. Harsha Vardhan (UI Expert) P a g e 186 | 454

 Angular 7

ElementRef
• ElementRef represents a specific normal tag (not component) in the template / content.
• You can create the reference name by writing “#” and followed by reference name in the template.
• You can access the element by specifying its reference name in the @ViewChild or @ContentChild
decorator.
Syntax:
• Create reference name:

<tag #referencename> </tag>

• Access the element

class parentcomponent
{
@ViewChild(“referencename”) propertyname: ElementRef;
@ContentChild(“referencename”) propertyname: ElementRef;
…
}

• Access properties / methods of the child element

this.propertyname.property

this.propertyname.method

ElementRef - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Company

ng g component Employee

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 187 | 454

 Angular 7

c:\angular\app1\src\styles.css

D. Harsha Vardhan (UI Expert) P a g e 188 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\company\company.component.ts

D. Harsha Vardhan (UI Expert) P a g e 189 | 454

 Angular 7

c:\angular\app1\src\app\company\company.component.html

c:\angular\app1\src\app\employee\employee.component.ts

c:\angular\app1\src\app\employee\employee.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 190 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 191 | 454

 Angular 7

• Click on “Click Me”.

• Component has a life cycle, which is managed by Angular.

• Angular creates it, renders it, creates and renders its children, checks it when its properties changed, and
destroys it before removing it from the DOM.
• Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when
they occur.
• The life cycle events will execute automatically at different stages, while executing the component.

D. Harsha Vardhan (UI Expert) P a g e 192 | 454

 Angular 7

First run:
1. Component Object: First, an object will be created for the component class. That means, the properties and
methods of the component class, will be stored in the component object.

2. Constructor: Next, the “constructor” of component class will be executed. Use the constructor, to set
default values to any properties of the component, inject services into the component.

3. OnChanges.ngOnChanges: Next, “ngOnChanges” method of “OnChanges” interface will be executed. This

method executes when a new object is received with the new values of the input properties and just before a
moment of assigning those new values into the respective input properties of the component. This mthod
executes executes, only if the component has input properties.

4. OnInit.ngOnInit: Next, “ngOnInit” method of “OnInit” interface will be executed. Use this method to call
services to get data from database or any other data source.

5. DoCheck.ngDoCheck( ): Next, “ngDoCheck” method of “DoCheck” interface will execute. This method
executes when an event occurs, such as clicking, typing some key in the board etc. Use this method to
identify whether the “change detection” process occurs or not.

6. AfterContentInit.ngAfterContentInit( ): Next, “ngAfterContentInit” method of “AfterContentInit” interface

will execute. This method executes after initializing the content of the component, which is passed while
invoking the component. Use this method to set the properties of content children.

7. AfterContentChecked.ngAfterContentChecked( ): Next, “ngAfterContentInit” method of

“AfterContentInit” interface will execute. This method executes after “change detection” process of the
content is completed. Use this method to check any properties of the content children, whether those are
having specific values or not.

D. Harsha Vardhan (UI Expert) P a g e 193 | 454

 Angular 7

8. AfterViewInit.ngAfterViewInit( ): Next, “ngAfterViewInit” method of “AfterViewInit” interface will execute.

This method executes after initializing the view (template) of the component. Use this method to set the
properties of view children.

9. AfterViewChecked.ngAfterViewChecked( ): Next, “ngAfterViewInit” method of “AfterViewInit” interface

will execute. This method executes after “change detection” process of view is completed. Use this method
to check any properties of the view children, whether those are having specific values or not.

On an event occurs:
1. DoCheck.ngDoCheck( )

2. AfterContentChecked.ngAfterContentChecked( )

3. AfterViewChecked.ngAfterViewChecked( )

On deleting the component:

1. OnDestroy.ngOnDestroy( ): This method executes when the component is deleted from memory (when we
close the web page in the browser).

Steps to handle event:

1. Import the interface:
import { interfacename } from “@angular/core”;

2. Implement the interface:

export class componentclassname implements interfacename
{
}

3. Create the method:

methodname()
{
//code here
}

Life Cycle Hooks - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

D. Harsha Vardhan (UI Expert) P a g e 194 | 454

 Angular 7

cd c:\angular\app1

ng g component company

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 195 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

D. Harsha Vardhan (UI Expert) P a g e 196 | 454

 Angular 7

c:\angular\app1\src\app\company\company.component.ts

D. Harsha Vardhan (UI Expert) P a g e 197 | 454

 Angular 7

c:\angular\app1\src\app\company\company.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 198 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 199 | 454

 Angular 7

After typing some character in the textbox:

D. Harsha Vardhan (UI Expert) P a g e 200 | 454

 Angular 7

• The service is a class contains re-usable code (business logic, validations, calculations etc.), which can be
called in one or more components. If you place the re-usable set of properties and methods as a service
class, it can be called from any component or any other service in the entire application.
• We must decorate the service class with “@Injectable()” decorator, to make the service accessible from any
other component. You can import “@Injectable” decorator from “@angular/core” package.
• We must use “@Inject()” decorator, to request angular to create an object for the service class. Then the
angular framework will automatically creates an object for the service class and passes the object as
argument for your component’s constructor; you can receive it into a reference variable in the constructor.
You can use “@Inject” only in the constructor of component. To make the reference variable as member of
the component class, add “private” or “public” keyword at left side of the reference variable in the
constructor.
• In realtime, all the CRUD operations (Ajax calls) are created in the service; the same is called in the
component class, whenever required.

Steps to handle event:

• Create Service:

import { Injectable } from “@angular/core”;

@Injectable( )

class Serviceclassname

Methods here

• Add service as provider in the component:

@Component( { …, providers: [ Serviceclassname ] } )

class ComponentClassname

D. Harsha Vardhan (UI Expert) P a g e 201 | 454

 Angular 7

• (or) Add service as provider in the module:

@NgModule( { providers: [ Serviceclassname ] } )

class ModuleClassname

• Get the instance of service using dependency injection:

import { Inject } from “@angular/core”;

@Component( { … } )

class ComponentClassname

constructor(@Inject(Serviceclassname) variable : Serviceclassname)

Services - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g class User

ng g service Login

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 202 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 203 | 454

 Angular 7

c:\angular\app1\src\app\user.ts

c:\angular\app1\src\app\login.service.ts

D. Harsha Vardhan (UI Expert) P a g e 204 | 454

 Angular 7

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

D. Harsha Vardhan (UI Expert) P a g e 205 | 454

 Angular 7

http://localhost:4200

Sharing Data using Services

• We can’t share data among sibling components directly; but we can do it by using service.
• We can set data from component1 to service; Then the component2 can access data from service.

Sharing Data using Services - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

D. Harsha Vardhan (UI Expert) P a g e 206 | 454

 Angular 7

cd c:\angular\app1

ng g component India

ng g component Usa

ng g service Population

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 207 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\population.service.ts

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

D. Harsha Vardhan (UI Expert) P a g e 208 | 454

 Angular 7

c:\angular\app1\src\app\india\india.component.ts

c:\angular\app1\src\app\india\india.component.html

c:\angular\app1\src\app\usa\Usa.component.ts

D. Harsha Vardhan (UI Expert) P a g e 209 | 454

 Angular 7

c:\angular\app1\src\app\usa\Usa.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

• Directive is a class, that can be invoked (called) through an attribute of a tag in the template.
• Directive provides additional functionality for the html element.
• For example, "ngIf" directive checks the condition, displays the element if the condition is TRUE; and
removes the element if the condition is false.
• The "ElementRef" class represents the element, in which the directive is invoked.
• Directive can receive values from the element using @Input() decorator.
• Directive can add events to the element by using @HostListener() decorator.

D. Harsha Vardhan (UI Expert) P a g e 210 | 454

 Angular 7

• We can communicate between the component to the directive, using @ViewChild decorator in the
component.

Steps for Working with Directives

• Create directive:

@Directive( { selector: "[directiveattributename]" } )

class directiveclassname

constructor(@Inject(ElementRef) referencename : ElementRef)

@Input() directiveproperty : datatype;

@HostListener("eventname")

methodname( )

• Add directive to the module:

@NgModule( { …, declarations: [ …, directiveclassname] } )

class moduleclassname

• Invoke directive from html tag:

<tag directiveattributename directiveproperty=" value "> </tag>

Custom Directives - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

D. Harsha Vardhan (UI Expert) P a g e 211 | 454

 Angular 7

ng g directive Sample

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 212 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

D. Harsha Vardhan (UI Expert) P a g e 213 | 454

 Angular 7

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\sample.directive.ts

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 214 | 454

 Angular 7

• Pipes transform the value into “user-expected format”.

• Pipes are invoked in expressions (interpolation binding), through pipe ( | ) symbol.
Syntax: {{ property | pipe }}

List of Built-in Pipes in Angular 2+

1. uppercase
2. lowercase
3. slice
4. number
5. currency
6. percent
7. date
8. json

Pipes - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

D. Harsha Vardhan (UI Expert) P a g e 215 | 454

 Angular 7

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 216 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

D. Harsha Vardhan (UI Expert) P a g e 217 | 454

 Angular 7

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 218 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 219 | 454

 Angular 7

Custom Pipes
• Custom pipes are the user-defined pipes.
• Custom pipe must be a class that has @Pipe( ) decorator and implements “PipeTransform” interface.
• The “PipeTransform” interface has “transform” method, which must be implemented in your pipe class.
• The “transform” method will be executed automatically, when the pipe is invoked in the expression
(through pipe ( | ) symbol).
• The “transform” method receive the input value as argument, do process, and return the result value, which
will be displayed in the output.
Syntax to call pipe: {{ property | pipe }}

Syntax of Custom Pipe Class

import { Pipe, PipeTransform } from “@angular/core”;

@Pipe( { name: “namehere” } )

class custompipeclassname implements PipeTransform

transform(value: datatype) : returndatatype

//do something the value here

return (modified value);

Add Pipe to the module

@NgModule( { …, declarations: [ custompipeclassname ], … } )

class moduleclassname

Invoke the pipe in the template

{{componentproperty | pipename}}

D. Harsha Vardhan (UI Expert) P a g e 220 | 454

 Angular 7

Custom Pipes - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g pipe Duration

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 221 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

D. Harsha Vardhan (UI Expert) P a g e 222 | 454

 Angular 7

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\duration.pipe.ts

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 223 | 454

 Angular 7

Template Driven Forms

• Template Driven Forms are suitable for development of simple forms with limited no. of fields and simple
validations.
• In these forms, each field is represented as a property in the component class.
• Validations rules are defined in the template, using “html 5” attributes. Validation messages are displayed
using “validation properties” of angular.
• “FormsModule” should be imported from “@angular/forms” package.

HTML 5 attributes for validations:

o required=”required” : Field is mandatory

o minlength=”n” : Minimum no. of characters

o pattern=”reg exp” : Regular expression

Validation Properties:

o untouched

▪ true : Field is not focused.

▪ false : Field is focused.

o touched

▪ true : Field is focused.

▪ false : Field is not focused.

o pristine

▪ true : Field is not modified by the user.

▪ false : Field is modified by the user.

o dirty

▪ true : Field is modified by the user.

▪ false : Field is not modified by the user.

o valid

▪ true : Field value is valid.

▪ false : Field value is invalid

o invalid

▪ true : Field value is invalid.

▪ false : Field value is valid.

o errors : Represents the list of errors of the field.

▪ required : true / false

▪ minlength : true / false

D. Harsha Vardhan (UI Expert) P a g e 224 | 454

 Angular 7

▪ pattern : true / false

▪ number : true / false
▪ email : true / false
▪ url : true / false

Sl. Description Regular Expression

No
1 Digits only ^[0-9]*$
2 Alphabets only ^[a-zA-Z ]*$
3 Indian Mobile Number ^[789]\d{9}$
4 Email \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
5 Usernames: Alphabets, Digits and ([A-Za-z0-9-]+)
Hyphens only
6 Passwords: 6 to 15 characters; ((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15})
atleast one upper case letter, one
lower case letter and one digit

Template Driven Forms - Example

• We are going to create a sample template driven form with validations.
Fields:

o Firstname

o Lastname

o Email

o Amount

o Gender

o Country

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 225 | 454

 Angular 7

c:\angular\app1\src\styles.css

D. Harsha Vardhan (UI Expert) P a g e 226 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

D. Harsha Vardhan (UI Expert) P a g e 227 | 454

 Angular 7

c:\angular\app1\src\app\app.component.html

D. Harsha Vardhan (UI Expert) P a g e 228 | 454

 Angular 7

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 229 | 454

 Angular 7

Reactive Forms (or) Model Driven Forms

• Reactive Forms (or) Model Driven Forms are new types of forms in angular, which are suitable for creating
large forms with many fields and complex validations.
• In these forms, each field is represented as “FormControl” and group of controls is represented as
“FormGroup”.
• “ReactiveFormsModule” should be imported from “@angular/forms” package.
• Validation rules are defined in the component using "Validators" object of angular and validation messages
are displayed in the template using "validation properties" of angular.

Validations in Reactive Forms:

o Validators.required : Field is mandatory

o Validators.minLength : Minimum no. of characters
o Validators.maxLength : Maximum no. of characters
o Validators.pattern : Regular expression

Validation Properties:

D. Harsha Vardhan (UI Expert) P a g e 230 | 454

 Angular 7

o untouched

▪ true : Field is not focused.

▪ false : Field is focused.

o touched

▪ true : Field is focused.

▪ false : Field is not focused.

o pristine

▪ true : Field is not modified by the user.

▪ false : Field is modified by the user.

o dirty

▪ true : Field is modified by the user.

▪ false : Field is not modified by the user.

o valid

▪ true : Field value is valid.

▪ false : Field value is invalid

o invalid

▪ true : Field value is invalid.

▪ false : Field value is valid.

o errors : Represents the list of errors of the field.

▪ required : true / false

▪ minlength : true / false
▪ maxlength : true / false
▪ pattern : true / false

Reactive Forms - Example

• We are going to create a sample reactive form with validations.

Fields:

o Firstname

o Lastname

o Email

o Amount

o Gender

o Country

D. Harsha Vardhan (UI Expert) P a g e 231 | 454

 Angular 7

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 232 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

D. Harsha Vardhan (UI Expert) P a g e 233 | 454

 Angular 7

c:\angular\app1\src\app\app.component.html

D. Harsha Vardhan (UI Expert) P a g e 234 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 235 | 454

 Angular 7

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

• The “Routing” concept is used to create page navigation in angular 2+ applications.

• “Routing” includes the process of mapping between the “route (url)” and corresponding component. Ex:
o http://localhost:8080/home ➔ HomeComponent

o http://localhost:8080/about ➔ AboutComponent

• The “@angular/router” package provides essential API to create routing.

• Angular 2+ supports two types of routing.
1. Hash-less routing Ex: /home

D. Harsha Vardhan (UI Expert) P a g e 236 | 454

 Angular 7

2. Hash routing Ex: #/home

Steps for working with Routing

• Import “@angular/router” package in “package.json” file:
“dependencies”:
{
“@angular/router”: “latest”
}

• Set the base location of the application on server:

<base href=”/”>

• Import “Router” from “@angular/router” package:

Import { Routes } from “@angular/router”;

• Create routes:
var variable1 : Routes = [
{ path: “path here”, component: ComponentClassName },
{ path: “path here”, component: ComponentClassName },
….
];

• Import “RouterModule” from “@angular/router” package:

Import { RoutesModule} from “@angular/router”;

• Combine “your routes” and “RouterModule”:

var variable2 = RouterModule.forRoot(variable1, { useHash: true/false } );

• Import both “routes” and “RouterModule” in “AppModule”:

@NgModule( { …, imports: [ …, variable2 ] } )
class AppModule( )
{
}

• Create hyperlink to route:

<a routerLink=”/path”>Link text</a>

• Create placeholder to display route content:

<router-outlet>
</router-outlet>

D. Harsha Vardhan (UI Expert) P a g e 237 | 454

 Angular 7

Routing - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Home

ng g component About

ng g component Contact

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 238 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 239 | 454

 Angular 7

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\home\home.component.ts

c:\angular\app1\src\app\home\home.component.html

D. Harsha Vardhan (UI Expert) P a g e 240 | 454

 Angular 7

c:\angular\app1\src\app\about\about.component.ts

c:\angular\app1\src\app\about\about.component.html

c:\angular\app1\src\app\contact\contact.component.ts

c:\angular\app1\src\app\contact\contact.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

D. Harsha Vardhan (UI Expert) P a g e 241 | 454

 Angular 7

http://localhost:4200

Click on “About”.

Click on “Contact”.

D. Harsha Vardhan (UI Expert) P a g e 242 | 454

 Angular 7

Route Parameters
• You can pass parameters to the route.
• Route parameter is represented as “:parametername” syntax.
• You can get the value of the parameter in the component using “ActivatedRoute” service.

Steps for Working with Route Parameters

• Create parameter in the route:

{ path: "pathname/:parametername", component: ComponentClassname }

• Import the "ActivatedRoute" service:

import { ActivatedRoute } from "@angular/router";

• Get an object of "ActivatedRoute" service:

constructor(@Inject(ActivatedRoute) private route : ActivatedRoute)

• Get the value of parameter:

this.route.snapshot.params["parametername"]

D. Harsha Vardhan (UI Expert) P a g e 243 | 454

 Angular 7

• (or) Get the value of parameter with updates:

this.route.params.subscribe(params =>

params["parametername"]

});

Route Parameters - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Home

ng g component About

ng g component Contact

ng g component Products

ng g class Product

ng g service Products

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 244 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\product.ts

D. Harsha Vardhan (UI Expert) P a g e 245 | 454

 Angular 7

c:\angular\app1\src\products.service.ts

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 246 | 454

 Angular 7

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

D. Harsha Vardhan (UI Expert) P a g e 247 | 454

 Angular 7

c:\angular\app1\src\app\home\home.component.ts

c:\angular\app1\src\app\home\home.component.html

c:\angular\app1\src\app\about\about.component.ts

c:\angular\app1\src\app\about\about.component.html

c:\angular\app1\src\app\contact\contact.component.ts

D. Harsha Vardhan (UI Expert) P a g e 248 | 454

 Angular 7

c:\angular\app1\src\app\contact\contact.component.html

c:\angular\app1\src\app\products\products.component.ts

D. Harsha Vardhan (UI Expert) P a g e 249 | 454

 Angular 7

c:\angular\app1\src\app\products\products.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 250 | 454

 Angular 7

Click on “Apple”.

D. Harsha Vardhan (UI Expert) P a g e 251 | 454

 Angular 7

Click on “Google”.

Child Routes
• Route can have child routes up to unlimited no. of nested levels.
• Ex: "Funds Transfer" menu has "Transfer", "Add Payee", "Activate Payee" etc.

Steps for Working with Child Routes

• Create Child Routes:

{ path: "parentpath ", component: ComponentClassname, children: [

{ path: "childpath ", component: ComponentClassname },

{ path: "childpath ", component: ComponentClassname },

]}

• Create hyperlink for the child route:

<a href="/parentpath/childpath">Link text</a>

• Create router outlet for child routes (in the parent route component's template):

<router-outlet> </router-outlet>

D. Harsha Vardhan (UI Expert) P a g e 252 | 454

 Angular 7

Child Routes - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component OnlineShopping

ng g component Appliances

ng g component Electronics

ng g component Fashion

ng g component Furniture

ng g component Lighting

ng g component Mobiles

ng g component Laptops

ng g component Men

ng g component Women

ng g component Furniture

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 253 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 254 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 255 | 454

 Angular 7

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\online-shopping\online-shopping.component.ts

c:\angular\app1\src\app\online-shopping\online-shopping.component.html

D. Harsha Vardhan (UI Expert) P a g e 256 | 454

 Angular 7

c:\angular\app1\src\app\appliances\appliances.component.ts

c:\angular\app1\src\app\appliances\appliances.component.html

c:\angular\app1\src\app\electronics\electronics.component.ts

c:\angular\app1\src\app\electronics\electronics.component.html

D. Harsha Vardhan (UI Expert) P a g e 257 | 454

 Angular 7

c:\angular\app1\src\app\fashion\fashion.component.ts

c:\angular\app1\src\app\fashion\fashion.component.html

c:\angular\app1\src\app\furniture\furniture.component.ts

D. Harsha Vardhan (UI Expert) P a g e 258 | 454

 Angular 7

c:\angular\app1\src\app\furniture\furniture.component.html

c:\angular\app1\src\app\lighting\lighting.component.ts

c:\angular\app1\src\app\lighting\lighting.component.html

c:\angular\app1\src\app\mobiles\mobiles.component.ts

D. Harsha Vardhan (UI Expert) P a g e 259 | 454

 Angular 7

c:\angular\app1\src\app\mobiles\mobiles.component.html

c:\angular\app1\src\app\laptops\laptops.component.ts

c:\angular\app1\src\app\laptops\laptops.component.html

c:\angular\app1\src\app\men\men.component.ts

c:\angular\app1\src\app\men\men.component.html

D. Harsha Vardhan (UI Expert) P a g e 260 | 454

 Angular 7

c:\angular\app1\src\app\women\women.component.ts

c:\angular\app1\src\app\women\women.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 261 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 262 | 454

 Angular 7

Click on “Electronics”.

D. Harsha Vardhan (UI Expert) P a g e 263 | 454

 Angular 7

Click on “Mobiles”.

• The Guard is a service that executes at the specified situation while angular is navigating from one route to
another route.
• Angular mainly supports two types of Guards:
o CanActivate: Executes before entering into a route.

o CanDeactivate: Executes before leaving a route.

D. Harsha Vardhan (UI Expert) P a g e 264 | 454

 Angular 7

CanActivate
• The "CanActivate" Guard executes before entering into a route.
• Process: User clicks on the hyperlink → Identify the route → CanActivate Guard → Navigate to the Route
→ Corresponding component.
• This guard can be created by implementing "CanActivate" interface.
• The "CanActivate" interface has a method called "canActivate". This method must return a boolean value,
which indicates whether the route can be navigated or not. If we return "true", the route will be navigated;
if we return "false", the route navigation will be stopped.
• It can receive an argument of "ActivatedRouteSnapshot" type, which represents the current state of the
route.

Steps for Working with CanActivate

• Import "CanActivate" interface from "@angular/router" package:

import { CanActivate, ActivatedRouteSnapshot } from "@angular/router";

• Create a Service that implements "CanActivate" interface:

class Serviceclassname implements CanActivate

canActivate(route: ActivatedRouteSnapshot): boolean

return true / false;

D. Harsha Vardhan (UI Expert) P a g e 265 | 454

 Angular 7

• Add service to the module:

@NgModule( { …, providers: [ Serviceclassname ] } )

class moduleclassname

• Add guard to the route:

{ path: "path here", component: ComponentClassname, canActivate: [ Serviceclassname ] }

CanActivate - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component OnlineShopping

ng g component Appliances

ng g component Electronics

ng g component Fashion

ng g component Furniture

ng g component Lighting

ng g component Mobiles

ng g component Laptops

ng g component Men

ng g component Women

ng g component Furniture

ng g component Login

ng g service LoginStatus

ng g service LoginAuth

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 266 | 454

 Angular 7

c:\angular\app1\src\styles.css

D. Harsha Vardhan (UI Expert) P a g e 267 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 268 | 454

 Angular 7

c:\angular\app1\src\app\login-status.service.ts

c:\angular\app1\src\app\login-auth.service.ts

D. Harsha Vardhan (UI Expert) P a g e 269 | 454

 Angular 7

c:\angular\app1\src\app\login\login.component.ts

D. Harsha Vardhan (UI Expert) P a g e 270 | 454

 Angular 7

c:\angular\app1\src\app\login\login.component.html

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\online-shopping\online-shopping.component.ts

D. Harsha Vardhan (UI Expert) P a g e 271 | 454

 Angular 7

c:\angular\app1\src\app\online-shopping\online-shopping.component.html

c:\angular\app1\src\app\appliances\appliances.component.ts

c:\angular\app1\src\app\appliances\appliances.component.html

c:\angular\app1\src\app\electronics\electronics.component.ts

D. Harsha Vardhan (UI Expert) P a g e 272 | 454

 Angular 7

c:\angular\app1\src\app\electronics\electronics.component.html

c:\angular\app1\src\app\fashion\fashion.component.ts

c:\angular\app1\src\app\fashion\fashion.component.html

D. Harsha Vardhan (UI Expert) P a g e 273 | 454

 Angular 7

c:\angular\app1\src\app\furniture\furniture.component.ts

c:\angular\app1\src\app\furniture\furniture.component.html

c:\angular\app1\src\app\lighting\lighting.component.ts

c:\angular\app1\src\app\lighting\lighting.component.html

c:\angular\app1\src\app\mobiles\mobiles.component.ts

D. Harsha Vardhan (UI Expert) P a g e 274 | 454

 Angular 7

c:\angular\app1\src\app\mobiles\mobiles.component.html

c:\angular\app1\src\app\laptops\laptops.component.ts

c:\angular\app1\src\app\laptops\laptops.component.html

c:\angular\app1\src\app\men\men.component.ts

D. Harsha Vardhan (UI Expert) P a g e 275 | 454

 Angular 7

c:\angular\app1\src\app\men\men.component.html

c:\angular\app1\src\app\women\women.component.ts

c:\angular\app1\src\app\women\women.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 276 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 277 | 454

 Angular 7

Click on “Electronics”.

D. Harsha Vardhan (UI Expert) P a g e 278 | 454

 Angular 7

Enter the username as “admin” and password as “manager”. Click on “Login”.

D. Harsha Vardhan (UI Expert) P a g e 279 | 454

 Angular 7

Click on “Electronics” now.

D. Harsha Vardhan (UI Expert) P a g e 280 | 454

 Angular 7

D. Harsha Vardhan (UI Expert) P a g e 281 | 454

 Angular 7

CanDeactivate
• The "CanDeactivate" Guard executes before leaving from a route.
• This guard can be created by implementing "CanDeactivate" interface.
• The "CanDeactivate" interface has a method called "canDeactivate". This method must return a boolean
value, which indicates whether the route can be leave or not. If we return "true", the route will be left; if we
return "false", the route navigation will be stopped.
• It can receive an argument of an user-defined interface type, , which represents the current component.

Steps for Working with CanDeactive

• Import "CanDeactivate" interface from "@angular/router" package:

import { CanDeactivate } from "@angular/router";

• Create the interface for CanDeactive Guard:

interface interfacename

canNavigate: boolean;

• Create a Service that implements "CanDeactivate" interface:

class Serviceclassname implements CanDeactivate<interfacename>

canDeactivate(component: interfacename): boolean

return true / false;

• Add service to the module:

@NgModule( { …, providers: [ Serviceclassname ] } )

class moduleclassname

D. Harsha Vardhan (UI Expert) P a g e 282 | 454

 Angular 7

• Add guard to the route:

{ path: "path here", component: ComponentClassname, canDeactivate: [ Serviceclassname ] }

CanDeactivate - Example

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

cd c:\angular\app1

ng g component Home

ng g component About

ng g component Contact

ng g class CanComponentDeactivate

ng g service CanDeactiveGuard

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 283 | 454

 Angular 7

c:\angular\app1\src\styles.css

c:\angular\app1\src\app\can-component-deactivate.ts

c:\angular\app1\src\app\can-deactivate-guard.service.ts

D. Harsha Vardhan (UI Expert) P a g e 284 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

D. Harsha Vardhan (UI Expert) P a g e 285 | 454

 Angular 7

c:\angular\app1\src\app\app.component.html

c:\angular\app1\src\app\home\home.component.ts

D. Harsha Vardhan (UI Expert) P a g e 286 | 454

 Angular 7

c:\angular\app1\src\app\home\home.component.html

c:\angular\app1\src\app\about\about.component.ts

c:\angular\app1\src\app\about\about.component.html

c:\angular\app1\src\app\contact\contact.component.ts

D. Harsha Vardhan (UI Expert) P a g e 287 | 454

 Angular 7

c:\angular\app1\src\app\contact\contact.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

Type some firstname and lastname and click on “About”.

D. Harsha Vardhan (UI Expert) P a g e 288 | 454

 Angular 7

Click on “OK”.

Click on “Home”.

D. Harsha Vardhan (UI Expert) P a g e 289 | 454

 Angular 7

Enter some firstname and lastname and click on “Save”.

Click on “About”.

D. Harsha Vardhan (UI Expert) P a g e 290 | 454

 Angular 7

Deployment to Java

Setting-up Environment for Java

• Install Java from “https://java.com/en/download”.
• Add “C:\Program Files\Java\jdk1.8.0_172\bin” as “Path” of system variables.
• Add “JAVA_HOME” with “C:\Program Files\Java\jdk1.8.0_172” in system variables.
• Download tomcat from “https://tomcat.apache.org/download-90.cgi”. Click on “zip” in “Core”. You will get
a file called “apache-tomcat-9.0.7.zip”. Right click on “apache-tomcat-9.0.7.zip” and click on “Extract All”.
Copy all contents of the extracted folder into “c:\tomcat” folder.
• Open Command Prompt and enter the following commands:
cd c:\tomcat\bin

startup.bat

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 291 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

D. Harsha Vardhan (UI Expert) P a g e 292 | 454

 Angular 7

c:\angular\app1\src\app\app.component.ts

c:\angular\app1\src\app\app.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng build --prod

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

D. Harsha Vardhan (UI Expert) P a g e 293 | 454

 Angular 7

• Copy all files from “c:\angular\app1\dist” folder to “c:\tomcat\webapps\ROOT”.

• Open the browser and enter the following URL:

http://localhost:8080/index.html

D. Harsha Vardhan (UI Expert) P a g e 294 | 454

 Angular 7

Deployment to .NET

Setting-up Environment for .NET

• Install Visual Studio Community 2017 from “https://www.visualstudio.com”.
• Open Visual Studio 2017. Click on “File” – “New” – “Project” – “Visual C#” – “ASP.NET Web Application (.NET
Framework)”. Enter the project name “WebApplication1”. Enter the location as “c:\angular”. Click on “OK”.

• Click on “Empty”. Click on OK.

D. Harsha Vardhan (UI Expert) P a g e 295 | 454

 Angular 7

Creating Application
• Open Command Prompt and enter the following commands:
cd c:\angular

ng new app1

c:\angular\app1\package.json

D. Harsha Vardhan (UI Expert) P a g e 296 | 454

 Angular 7

c:\angular\app1\src\app\app.module.ts

c:\angular\app1\src\app\app.component.ts

D. Harsha Vardhan (UI Expert) P a g e 297 | 454

 Angular 7

c:\angular\app1\src\app\app.component.html

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\angular\app1

ng build --prod

ng serve

• Open the browser and enter the following URL:

http://localhost:4200

• Copy all files from “c:\angular\app1\dist” folder to “Solution Explorer”.

D. Harsha Vardhan (UI Expert) P a g e 298 | 454

 Angular 7

• Right click on “index.html” and click on “View in Browser”.

• AJAX (Asynchronous JavaScript And Xml) is not a language, but it is a “concept”, which is used to “send a
background request from browser to server” and also “get background response from server to browser”,
without refreshing (reloading) the web page in the browser.
• AJAX allows us to interact with the server and get some data from server, without refreshing the full web
page.
• Ex: Facebook like button, comments, IRCTC search trains.

D. Harsha Vardhan (UI Expert) P a g e 299 | 454

 Angular 7

Execution Flow of AJAX

Advantages of AJAX
• Executes faster
• Less burden on browser (client) and server
• Better user experience.

Types of AJAX Request

• Get : Used to retrieve / search data from server

• Post : Used to insert data to server.

• Put : Used to update data on server.

• Delete : Used to delete data from server

“@angular/common/http” package
• The “@angular/common/http” package provides necessary services to send ajax request to server and get
ajax response from server.

Steps for working with “@angular/common/http” package:

• Import “@angular/common” package in “package.json”:
“dependencies”:
{
“@angular/common:”: “latest”
}

• Import “HttpClientModule” module:

import { HttpClientModule, HttpClient } from “@angular/common/http”;

• Import “HttpClientModule” in “AppModule”:

@NgModule( { …, imports: [ …, HttpClientModule ] } )
class AppModule

D. Harsha Vardhan (UI Expert) P a g e 300 | 454