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