Angular 7

{
}

• Import “HttpClient” service:

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

• Get “HttpClient” service in “AppComponent”:

constructor(@Inject(HttpClient) private http : HttpClient)
{
}

• Send “get” request to server:

this.http.get<modelclassname>(“url”, { responseType: “json | text” }).subscribe(this.successcallback,

this.errorcallback);

• Send “post” request to server:

this.http.post(“url”, { data }, { responseType: “json | text” }).subscribe(this.successcallback,
this.errorcallback);

• Send “put” request to server:

this.http.put(“url”, { data }, { responseType: “json | text” }).subscribe(this.successcallback,
this.errorcallback);

• Send “delete” request to server:

this.http.delete(“url”, { responseType: “json | text” }).subscribe(this.successcallback,
this.errorcallback);

• Define “success” callback function:

successcallback = (response) =>
{
//do something with response
}

• Define “error” callback function:

errorcallback = (error) =>

//do something with error

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

 Angular 7

AJAX – Java – Simple - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

D. Harsha Vardhan (UI Expert) P a g e 302 | 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 303 | 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 304 | 454

 Angular 7

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

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 “c:\tomcat\webapps\ROOT”.

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:8080/index.html

Click on “Get Data from Server”.

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

 Angular 7

AJAX – Java – Get - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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

 Angular 7

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

ng new app1

cd c:\angular\app1

ng g class Employee

c:\angular\app1\package.json

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

 Angular 7

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

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

D. Harsha Vardhan (UI Expert) P a g e 309 | 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 310 | 454

 Angular 7

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 “c:\tomcat\webapps\ROOT”.

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:8080/index.html

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

 Angular 7

Click on “Get Data”.

AJAX – Java – Search - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

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

 Angular 7

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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

 Angular 7

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

ng new app1

cd c:\angular\app1

ng g class Employee

c:\angular\app1\package.json

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

 Angular 7

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

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 316 | 454

 Angular 7

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

Executing the application:

• Open Command Prompt and enter the following commands:

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

 Angular 7

cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 “c:\tomcat\webapps\ROOT”.

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:8080/index.html

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

 Angular 7

Type some text in the search textbox and click on “Search”.

AJAX – Java – Insert - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

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

 Angular 7

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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

ng new app1

cd c:\angular\app1

ng g class Employee

c:\angular\app1\package.json

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

 Angular 7

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

D. Harsha Vardhan (UI Expert) P a g e 322 | 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 323 | 454

 Angular 7

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

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 324 | 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:

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

 Angular 7

http://localhost:8080/index.html

Type some empid, empname and salary and then click on “Insert”.

AJAX – Java – Update - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

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

 Angular 7

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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

ng new app1

cd c:\angular\app1

ng g class Employee

c:\angular\app1\package.json

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

 Angular 7

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

D. Harsha Vardhan (UI Expert) P a g e 328 | 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 329 | 454

 Angular 7

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

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 330 | 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:

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

 Angular 7

http://localhost:8080/index.html

Type some empid, empname and salary and then click on “Update”.

AJAX – Java – Delete - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

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

 Angular 7

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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 333 | 454

 Angular 7

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

D. Harsha Vardhan (UI Expert) P a g e 334 | 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 335 | 454

 Angular 7

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 “c:\tomcat\webapps\ROOT”.

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:8080/index.html

Type some empid and then click on “Delete”.

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

 Angular 7

• Http Interceptor is a angular service, that adds one or more requests headers automatically for each ajax
request sent from the application.
• These are used to implement authentication.
• Authentication is a process of checking whether the user is a valid user or not.
• First, the server generates a random number, stores it at server and also sends it to the client as response.
The client (browser) stores it in the localStorage. Next, the client sends the same random number to the
server via HTTP header, by using Http Interceptor. Then the server verifies whether the received random
number is matching with the stored random number. If matching, it is a valid user; otherwise invalid user.
Thus authentication is performed.
• Http Interceptors added as a provider in the module level; automatically executes for all ajax requests sent
via HttpClient within the same module and its child modules.
• Http Interceptor is a service class that implements HttpInterceptor interface. This interface enforces that
the service class must contain a method called “intercept” with two parameters “request” or HttpRequest
type and “next” of HttpHandler type and returns HttpEvent type.
• The “intercept” method automatically executes before an AJAX request (Http Request) is sent to browser.
• The “request” argument represents the current request. The “next” argument represents the next
interceptor.
• The “HttpEvent” represents each single process that happens before sending http request to server.
• The “request.clone” method is used to copy the request into a new request object; so that we can add
headers to the request.
• The next.handle() method calls the next interceptor, if any.

Steps for Working with Http Interceptor

• Create Service:

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

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from “@angular/common/http”;

import { Observable } from “rxjs/Observable”;

@Injectable( )

export class Serviceclassname implements HttpInterceptor

intercept(request, HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>

request = request.clone( { setHeaders: { “mykey”: “myvaluue” } } );

return next.handle(request);

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

 Angular 7

• Add Http Interceptor Service as provider in the component:

import { HTTP_INTERCEPTORS } from “@angular/common/http”;

@Component( { …, providers: [ { provide: HTTP_INTERCEPTORS, useClass: SampleInterceptorService,

multi: true } ] } )

export class Moduleclassname

AJAX – Java – Http Interceptors - Get - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

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

 Angular 7

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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

ng new app1

cd c:\angular\app1

ng g class Employee

ng g service Employees

ng g service SampleInterceptor

c:\angular\app1\package.json

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

 Angular 7

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

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

 Angular 7

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

c:\angular\app1\src\app\sample-interceptor.service.ts

D. Harsha Vardhan (UI Expert) P a g e 342 | 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 343 | 454

 Angular 7

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

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 344 | 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 345 | 454

 Angular 7

Click on “Get Data”.

Observable and Observer

• Observable is a data source (User events, Http requests, Custom data source), which emits data packets to
the observer.
• Observer is an object that subscribes to the observable and listens to the data packets that are sent by
observables.

Data Flow
• “Observable” emits (sends) data to observer. Everytime it emits data, the corresponding callback function
automatically executes in observer.

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

 Angular 7

Types of Callback functions in Observer:

• HandleData Callback: It executes when next data packet has been emitted by the observable.
• HandleError Callback: It executes when error emitted by the observable. If this is invoked, the observable
stream ends; that means, no other callback functions are invoked further.
• HandleCompletion Callback: It executes when observable indicates stream completion. If this is invoked,
the observable stream ends; that means, no other callback functions are invoked further.

Creating Observable

Import “Observable”:

Import { Observable } from “rxjs/Observable”;

Import RxJS Operators:

import “rxjs/rx”;

Creating Observable:

1. Observable.interval( )
2. Observable.range( )
3. Observable.from( )
4. Observable.fromEvent( )
5. Observable.create( )
6. Subject

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

 Angular 7

Creating Observer

Observablevariable.subscribe( () => { … }, () => { … }, () => { …} )

Note: The three callback functions are respectively “data callback”, “error callback” and “completion
callback”. The data callback executes when the observable emits (passes) some data to the observer. The
error callback executes when the observable emits (passes) some error; but all further callbacks will be
stopped in this case. The completion callback executes when the observable emits (passes) completion to
observer; so further callbacks will be stopped in this case also.

Observable.interval
• It emits (passes) a number (0 to unlimited) to the observer, for every completion of specified no. of milli
seconds.
• It is the easy way to create observable. For every specified no. of milli seconds, it invokes the observer. The
observer receives a new value.

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

 Angular 7

Creating Observable.interval
Observable.interval(milli seconds);

Observable.Interval - 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 349 | 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 350 | 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

D. Harsha Vardhan (UI Expert) P a g e 351 | 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

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

 Angular 7

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:

http://localhost:4200

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

 Angular 7

Observable.range
• It emits (passes) a number (beginning with start number, incremented by one, upto the specified count of
numbers) to the observer.

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

 Angular 7

Creating Observable.range
Observable.range(start, count);

Observable.range - 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 355 | 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 356 | 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 357 | 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

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

 Angular 7

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:

http://localhost:4200

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

 Angular 7

Observable.from
• It emits (passes) each element of an array one-by-one, from first to last element, to the observer.

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

 Angular 7

Creating Observable.from
Observable.from(array);

Observable.from - 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 361 | 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 362 | 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 363 | 454

 Angular 7

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 364 | 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 365 | 454

 Angular 7

http://localhost:4200

Observable.fromEvent
• It emits (passes) “event arguments” to the observer, everytime the event is raised.

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

 Angular 7

Creating Observable.fromEvent
Observable.fromEvent(document.getElementById(“element”), “event”);

Observable.fromEvent - 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 367 | 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 368 | 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 369 | 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

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

 Angular 7

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:

http://localhost:4200

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

 Angular 7

Custom Observables
• It emits (passes) “event arguments” to the observer, everytime the event is raised.

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

 Angular 7

Creating Custom Observables

import { Observer } from "rxjs/Observer";

Observable.create( (observer : Observer) => {

observer.next(data); //passes data to "handle data" function

observer.error(data); //passes data to "handle error" function

observer.complete(); //finishes the observable and calls "handle completion" function

});

Custom Observables - 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 373 | 454

 Angular 7

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

D. Harsha Vardhan (UI Expert) P a g e 374 | 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 375 | 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 376 | 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 377 | 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

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

 Angular 7

Custom Observables using Services - Example

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

ng new app1

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 379 | 454

 Angular 7

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

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

D. Harsha Vardhan (UI Expert) P a g e 380 | 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

D. Harsha Vardhan (UI Expert) P a g e 381 | 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 382 | 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

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

 Angular 7

Map
• It executes the map function every time, the observable emits a value to the observer.

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

 Angular 7

Creating Map
Observablevariable.map( (variable) => {

//do something with item and return it

});

Map - Example

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

ng new app1

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 385 | 454

 Angular 7

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

D. Harsha Vardhan (UI Expert) P a g e 386 | 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 387 | 454

 Angular 7

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

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

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

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

 Angular 7

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 389 | 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

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

 Angular 7

Filter
• It executes the filter function for each item when the observable emits data to the observer. If the function
returns true, the value will be emitted to the observer. If the function returns false, the value will not be
emitted to the observer.

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

 Angular 7

Creating Filter
Observablevariable.filter( (variable) => {

//do something with item and return true / false

});

Filter - Example

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

ng new app1

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 392 | 454

 Angular 7

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

D. Harsha Vardhan (UI Expert) P a g e 393 | 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 394 | 454

 Angular 7

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

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

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

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

 Angular 7

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 396 | 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

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

 Angular 7

Take
• It executes the emits only the specified no. of data packets maximum to the observer.

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

 Angular 7

Working with Take

Observablevariable.take( n);

Take - Example

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

ng new app1

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 399 | 454

 Angular 7

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

D. Harsha Vardhan (UI Expert) P a g e 400 | 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 401 | 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 402 | 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

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

 Angular 7

Skip
• It executes the skips the specified no. of data packets, and emits the remaining data packets to the observer.

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

 Angular 7

Working with Skip

Observablevariable.skip( n);

Skip - Example

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

ng new app1

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 405 | 454

 Angular 7

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

D. Harsha Vardhan (UI Expert) P a g e 406 | 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 407 | 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 408 | 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

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:4200

AJAX with Observable - Java - Get

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

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

 Angular 7

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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

ng new app1

cd c:\angular\app1

ng g class Employee

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

 Angular 7

ng g service Employees

c:\angular\app1\package.json

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

 Angular 7

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

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

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

D. Harsha Vardhan (UI Expert) P a g e 413 | 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 414 | 454

 Angular 7

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 “c:\tomcat\webapps\ROOT”.

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:8080/index.html

Click on “Get Data”.

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

 Angular 7

Map HTTP Request - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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

 Angular 7

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

ng new app1

cd c:\angular\app1

ng g class Employee

ng g service Employees

c:\angular\app1\package.json

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

 Angular 7

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

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

D. Harsha Vardhan (UI Expert) P a g e 419 | 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 420 | 454

 Angular 7

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

Executing the application:

• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 421 | 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:

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

 Angular 7

http://localhost:8080/index.html

Click on “Get Data”.

Cancelling HTTP Request - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

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

 Angular 7

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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 424 | 454

 Angular 7

cd c:\angular\app1

ng g class Employee

ng g service Employees

c:\angular\app1\package.json

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

 Angular 7

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

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

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

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

 Angular 7

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

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

 Angular 7

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

Executing the application:

• Place “ajax-loader.gif” file in “src\assets” folder.
• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 428 | 454

 Angular 7

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

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:8080/index.html

Click on “Get Data”.

Retrying HTTP Request - Example

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

c:\tomcat\webapps\ROOT\WEB-INF\classes\SampleServlet.java

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

 Angular 7

c:\tomcat\webapps\ROOT\WEB-INF\web.xml

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

ng new app1

cd c:\angular\app1

ng g class Employee

ng g service Employees

c:\angular\app1\package.json

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

 Angular 7

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

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

 Angular 7

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

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 433 | 454

 Angular 7

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

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

 Angular 7

Executing the application:

• Place “ajax-loader.gif” file in “src\assets” folder.
• Open Command Prompt and enter the following commands:
cd c:\tomcat\webapps\ROOT\WEB-INF\classes

javac -cp c:\tomcat\lib\servlet-api.jar SampleServlet.java

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 “c:\tomcat\webapps\ROOT”.

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:8080/index.html

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

 Angular 7

Click on “Get Data”.

Unit Testing
• Unit testing is a process of testing the individual component, whether it is working correctly or not.
• We use “Jasmine” and “Karma” for the unit testing.
• Jasmine: Used to create test cases.
• Protractor: Used to execute the test cases in single browser.
• Karma: Used to execute the test cases in multiple browsers.

Syntax of test case:

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

 Angular 7

Unit Testing - Example

Steps
• Command Prompt
cd c:\angular

ng new myapp

cd c:\angular\myapp

c:\angular\myapp\package.json

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

 Angular 7

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

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

 Angular 7

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

c:\angular\myapp\src\app\app.component.css

c:\angular\myapp\src\app\app.component.spec.ts

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

 Angular 7

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

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

c:\angular\myapp\src\main.ts

c:\angular\myapp\src\index.html

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

 Angular 7

Executing the application:

• Open Command Prompt and enter the following commands:

cd c:\angular\myapp

ng test

• It automatically opens the Chrome browser at the following URL:

http://localhost:9876?id=57394886

Animations
• Animation is a process of changing css property value gradually based on the time limit. That means within
the specified time limit, the property will change from “start value” to “end value”.
• Angular 2+ animations are used to invoke the css animations programmatically through the component.

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

 Angular 7

Steps for working with Animations:

• Import “@angular/animations” package in “package.json” file:

• Import “BrowserAnimationsModule” in “app.module.ts”:

• Import “BrowserAnimationsModule” into “AppModule”:

… …

• Import “trigger”, “state”, “style”, “transition”, “animate” in “app.component.ts”:

• Define animation:

• Import animation in the component:

• Define property in the component:

• Map “property” of the component to “animation”:

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

 Angular 7

• Change the value of the “property” of the component:

Animations - Example

Steps
• Command Prompt

o npm install @angular/cli -g

o cd c:\angular

o ng new myapp

o cd c:\angular\myapp

o ng serve

c:\angular\myapp\package.json

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

 Angular 7

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

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

 Angular 7

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

c:\angular\myapp\src\app\app.component.css

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

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

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

 Angular 7

c:\angular\myapp\src\main.ts

c:\angular\myapp\src\index.html

Executing the application:

• Open Command Prompt and enter the following commands:

cd c:\angular\myapp

ng serve

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

 Angular 7

• Open the browser and enter the following URL:

http://localhost:4200

• "Angular Material Design" provides a set of UI components such as buttons, textboxes, checkboxes, radio
button, dropdownlists, datepicker, menus etc., with rich look and feel.
• It is an alternative to other UI frameworks such as bootstrap and dojo toolkit.
• It provides "Ripple Effect", which is already available in Google Chrome and Android.

Packages of Angular Material Design

• Angular Material Design can be implemented using the following set of packages:
1. @angular/material

2. @angular/cdk

3. @angular/animations

4. hammerjs

1. @angular/material

• This package provides a set of modules which contains angular material design components.

• List of modules:

▪ MatButtonModule: Used to create buttons.

▪ MatInputModule: Used to create textboxes.

▪ MatCheckBoxModule: Used to create checkboxes.

▪ MatRadioModule: Used to create radio buttons.

▪ MatSelectModule: Used to create dropdownlists.

▪ MatAutoCompleteModule: Used to create comboboxes.

▪ MatDatepickerModule: Used to create date pickers.

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

 Angular 7

▪ MatSlideToggleModule: Used to slide toggle buttons.

▪ MatMenuModule: Used to create menus.

▪ MatIconModule: Used to display icons in buttons / menus.

▪ MatTableModule: Used to create tables.

▪ MatTabsModule: Used to create tabs.

▪ MatTooltipModule: Used to display tooltip messages.

▪ MatDialogModule: Used to dialog boxes / popup boxes.

2. @angular/cdk

• This package provides necessary API (Application Programming Interface), to create UI

components, based on which the material design components are developed.

3. @angular/animations

• This package provides animations for angular material components.

4. hammerjs

• This package provides touch events for angular material components.

Themes of Angular Material Design

• Angular Material Design provides the following set of pre-defined themes (css files), which contains styles
of material components:
1. indigo-pink.css

2. pink-bluegrey.css

3. purple-green.css

4. deeppurple-amber.css

Steps for setting-up Angular Material Design:

• Create a new application using Angular CLI

ng new app1

• Import necessary packages in “package.json” file:

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

 Angular 7

• Import icons in "src\index.html"

• Import theme (css file) in "src\styles.css"

• Import "hammerjs" in "src\main.ts"

• Import "BrowserAnimationsModule" in "src\app\app.module.ts"

MatButtonModule
• The "MatButtonModule" is used to create buttons.
Syntax: <button mat-button>text here</button>

• Types of Buttons

o mat-button : Basic Button

o mat-raised-button : Raised Button

o mat-fab : Fab Button

o mat-mini-fab : Mini Fab Button

• Colors of Buttons

o color="primary" : Fuchsia Blue Color

o color="accent" : Wild Strawberry Color

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

 Angular 7

o color="warn" : Outrageous Orange Color

MatButtonModule - Example

c:\angular\package.json

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

 Angular 7

c:\angular\src\index.html

c:\angular\src\main.ts

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

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

 Angular 7

c:\angular\scripts\app.ts

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

 Angular 7

c:\angular\AppComponentTemplate.html

Executing the application:

• Open Command Prompt and enter the following commands:

cd c:\angular

npm install

tsc

http-server -c-0

• Open the browser and enter the following URL:

http://localhost:8080

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