Angular 2.0

6 April 2022 www.snipe.co.in 1
SNIPE TEAM
01/12/2017

4/6/2022
3
CONTENTS
CONTENTS:
• Introduction and Overview
• MVC Architecture
• Installation and Configuration
• Angular Architecture
• Module
• Component
• Directives
• Dependency Injection
• Pipe
• Services
• Router

 Angular is a platform and framework for building single-page client applications
using HTML and Typescript.
 Angular is written in Typescript language
• Typescript is compiled into JavaScript
• JavaScript is used in HTML pages.
 As a platform , Angular includes:
• A component-based framework for building scalable web applications
• A collection of well-integrated libraries that cover a wide variety of features,
including routing, forms management, client-server communication, and more.
• A suite of developer tools to help you develop, build, test, and update your code
4/6/2022 4

 Developers: Google
 Early version of angular was named angular 2 .then later renamed to just angular.
 Angular open-source web application framework led by the Angular Team at Google.
 Angular is different from Angularjs. Angular is rewrite of Angularjs. But this led to confusion among
developers.
 Angular has MVC(Model View Controller)based architecture for application development.
 We can use it with NPM and without npm(cdn etc) but 90% developer use NPM with NPM package.
4/6/2022 5

Versions Released Features
Angularjs 1 Oct-10 AngularJS usually referred to as “Angular.js” or Angular 1.x
JavaScript-based open-source front-end web application framework.
maintained by Google-single-page applications.
model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures
Angular 2 Sep-16 Re-written in typescript
3 skipped, due to some mismatch between @angular/core,@angular/compiler and @angular/router
4 Mar-17 backward compatibility previous versions
No major change from 2
reduced size of the code to 60%
5 Nov-17 Build optimizer
DOM support
compiler improvements
Internationalized
new router life cycle
6 May-18 angular material and Angular CLI
7 Oct-18 performance improvement
8 May-19 Dynamic imports
Differential loading
web worker support
new UX
4/6/2022 6

4/6/2022 7
9 Feb-20 Angular material 9
Ivy Compiler(Smaller Bundle Size
Faster Testing
Better Debugging
Improved CSS class and style binding
Improved Type Checking
Improved build errors
Improved build times, enabling AOT on by default
Improved Internationalization)
Typescript support 3.7
10 Jun-20 Minor release with improvisation
11 Nov-20 popular bugfixes
12 May-21 passing context across HTTP
Support for SASS
Support for Tailwind css
webpack5 integration
13 Nov-21 IE11 Support removed
68% performance improvement
support typescript 4.4
improvements in angular material

4/6/2022 8
1. Angular Ivy is the new default rendering engine. It removes unused code(treeshake) and recompild
the code changed
2. Starting from version 9 of Angular, your TypeScript code will be compiled using Ivy instead of the
older ViewEngine (VE).
3. Basically, Ivy decreases your bundle sizes, enhances testing, and improves debugging capabilities. In
addition, Ivy uses Ahead-of-Time compilation to speed up your apps.
• In Just In Time (JIT) compilation, the compiler will be bundled along with the application and send to the
browser. Angular application will be compiled in the browser and run just before the execution of application.
Eventhough JIT provides certain advanced feature, JIT slows down the compilation and also the app bundle will
be double the size produced by AOT compiler as it includes compiler as well.
• Ahead Of Time (AOT) Compiler
In AOT compilation, the compiler will emit optimised code ready to run inside the browser without any addition
step. It will reduce the size of the bundle as well as reduce the compilation time and startup time of the application.
– Optimised code.
– Faster build time.
– Reduced bundle size.
– Better performance.

. Design
Mobile – Angular 2 addresses the challenges(performance, load time) of mobile view
Modular – framework architecture MVC to component based UI improve better performance
ES6 Support- modular import , export, annotations , OOP class inheritance so on
Key differences are
Framework architecture
• Angular 2 take component base UI by combine controller and view
// Angular1 angular.module('App') .controller('TestController', function() { // controller logic });
// Angular2 @Component({ selector: 'App', templateUrl: 'index.html' }) export class TestComponent { }
• No more Scope
– Angular 1 retrieves data from controller to view through $scope but now it is through controller
property
Angular1 angular.module('App') .controller('TestController', function() { $scope.data1 = someData1;
$scope.data2 = someData2; })
// Angular2 @Component({ selector: 'App', templateUrl: 'index.html' }) export class TestComponent {
constructor() { this.data1 = someData1; this.data2 = someData2; } }
4/6/2022 9
WHY ANGULAR2 THAN ANGULAR 1

. Template Syntax and Databinding
| Data Direction | Syntax | Binding Type | | | |
One way from data source to view | {{expression}} | Interpolation | |
One way from data source to view | [target]="expression" | Property, Attribute, style, class | |
One way view to data source | (target)="expression" | Event | |
Two way | [(target)]="expression" | Two way
 <img src="{{some.expression}}">
 <img [src]="some.expression">
. Dependency Injecton
In Angular 1, we can inject dependencies in multiple places in different ways:
• in the link function by position
• in the directive definition by name
• in the controller function by name, etc
• In Angular 2, we can inject through constructor injection
4/6/2022 10

In // Angular1
app.controller(<TestController<, [<SomeService<, function(SomeService) {
// logic here
})
// Angular2
export class TestComponent {
constructor(someService: SomeService) {}
}
• Component Life cycle hook
– provide to hook some code into the component's lifecycle through interface build-in to the core framework.
– Life cycle hook interface –OnInit, OnDestroy,OnChange, AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked
. export class TestComponent implements OnInit { ngOnInit() { // initialization code } }
• New Routing Mechanism
– angular2 has combine controller and view into one component the new routing mechanism
– Angular2 decorate the route using @RouteConfig annotation (anchor tag with RouterLink )
4/6/2022 11

// Angular1
app.config([<$routeProvider<, function($routeProvider) {
$routeProvider
.when(</some-url<, {
controller: <TestController<,
templateUrl: <some-template.html<
});
}])
// Angular2
@Component({
selector: <App<,
template: `
<a [routerLink]=[<someUrl<]>Some Url</a>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{path: </some-url<, name: <someUrl<, component: TestComponent}
]);
export class AppComponent { }
4/6/2022 12

Installation and Configuration:
13
INSTALLATION AND CONFIGURATION
To install Angular on our local system, we need the following:
Node.js - what will understand your javascript code and execute it to produce a
result.
NPM (Node Package Manager)- tool which will allow you to install third party
libraries (other people's code) by using the command line.
IDE (Integrated Development Environment)or Text Editor
Steps to Install Node.js and NPM on Windows:
•Step 1: Download Node.js Installer
https://nodejs.org/en/download/.
•Step 2: Install Node.js and NPM from Browser
•Step 3: Verify Installation
node –v(This will display the installed Node.js version)
npm –v(This will display the installed NPM version)

Typescript
Nodejs
CLI(Command Line Interface)
NPM
14
PRE-REQUISITES

Install the typescript
npm install -g typescript
Install the Angular CLI:
To install the Angular CLI, open a terminal window and run the following command:
npm install -g @angular/cli
ng update [options]
ng update @angular/cli@:<major_version> @angular/core@:<major_version>
Create a workspace and initial application:
Run the CLI command ng new and provide the name my-app:
ng new angularApp
Run the application :
Run the command: ng serve --o
Open your Browser : http://localhost:4200/
4/6/2022 15
INSTALLATION

4/6/2022 16
ng new angularApp
workspace configuration files
worksspace cofig Purpose
.editorconfig Configuration for code editors. See EditorConfig.
.gitignore Specifies intentionally untracked files that Git should ignore.
README.md Introductory documentation for the root application.
angular.json
CLI configuration defaults for all projects in the workspace, including configuration
options for build, serve, and test tools that the CLI uses, such as Karma,
and Protractor.
package.json
Configures npm package dependencies that are available to all projects in the
workspace. .
package-lock.json
Provides version information for all packages installed into node_modules by the
npm client.
src/ Source files for the root-level application project.
node_modules/
Provides npm packages to the entire workspace. Workspace-
wide node_modules dependencies are visible to all projects.
tsconfig.json
The base TypeScript configuration for projects in the workspace. All other
configuration files inherit from this base file.
SRC configuration files
SRC/APP/ FILES PURPOSE
app/app.component.ts
Defines the logic for the application's root component, named AppComponent. The
view associated with this root component becomes the root of the view hierarchy as
you add components and services to your application.
app/app.component.html Defines the HTML template associated with the root AppComponent.
app/app.component.css Defines the base CSS stylesheet for the root AppComponent.
app/app.component.spec.ts Defines a unit test for the root AppComponent.
app/app.module.ts
Defines the root module, named AppModule, that tells Angular how to assemble the
application. Initially declares only the AppComponent. As you add more components
to the app, they must be declared here.

The Angular CLI is a command-line interface tool that you use to initialize, develop,
scaffold, and maintain Angular applications directly from a command shell.
https://angular.io/cli
Installing the angular cli
npm install -g @angular/cli
ng help
--loads all the command
ng build <project-name>
17
Angular CLI

4/6/2022 18
ANGULAR ARCHITECTURE

4/6/2022 19

4/6/2022 20
The Angular application is made using the following:
Modules
Component
Template Directives
Data Binding
 Services
Dependency Injection
Routing

4/6/2022 21
Parent -Child Component
• Parent Component:
It is a root component that serves as a parent component
• Child Component:
The angular follows component-based Architecture, where each Angular component
manages a specific task or workflow.It is a more specific part inside a parent
component.
https://angular.io/guide/inputs-outputs

Interpolation: It is sending a file from component.ts to component.html
It's used to display the value of a component member variable in the associated template,
e.g. ``. We use curly braces for interpolation
Example: In component.ts
export class AppComponent{ appName=‘hello app’;
name=“angular”
getName(){return ram}
Obj={age:25}
arr=[‘ram’,’sham’]
}
In component.html
<h1>name</h1>
If giving double braces{{}}
<h1>{{name}}</h1>
<h1>{{getName}}</h1>
<h3>{{obj.age}}</h3>
<h2>{{arr.length}}</h2>
4/6/2022 22

Event binding allows us to bind events such as clicks, hover etc
Import Event in angular
oClick Event
• Keyup event
• Keyup with enter and space
oKeydown
oBlur
oMouseover and mouseleave
oGet values on textbox
oget value with value change
oGet value with button change
4/6/2022 23
Event
Example: In component.ts
export class AppComponent {
title=‘hello app’;
myEvent(evt){
Console.warn(evt)}}
In component.html
<button (click)=“myEvent(‘click event’)”>click me</button>
<input type=“text”(keyup)=“myEvent(‘keyup event’)”/>
<input type=“text” #box(keyup.enter)=“myEvent(box.value)”/>
<input type=“text” #box (keyup.space)=“myEvent(box.value)”/>
<input type=“text” #box (blur)=“myEvent(‘blur event’)”/>
<h1>(mouseover)=“myEvent(‘mouseover’)”>mouse event</h1>

Angular applications are modular and Angular has its own modularity system
called NgModules.
They can import functionality that is exported from other NgModules, and
export selected functionality for use by other NgModules.
Every Angular application has at least one NgModule class, the root module,
which is conventionally named AppModule and resides in a file
named app.module.ts.
The command to generate module is:
ng generate module auth
4/6/2022 24
MODULES

It is complete definition having complete feature for instance
Module: Auth
- components – signin, signout, resetpassword
- service – login-service
- classes – helper or Signin
- pipes
4/6/2022 25
MODULES

4/6/2022 26
MODULES
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SigninComponent } from './signin/signin.component';
import { SignoutComponent } from './signout/signout.component’;
import { ResetpasswordComponent } from
'./resetpassword/resetpassword.component';
@NgModule({
declarations: [
SigninComponent,
SignoutComponent,
ResetpasswordComponent
],
imports: [
CommonModule
]
exports:[
SigninComponent,
SignoutComponent,
ResetpasswordComponent
]
})
export class AuthModule { }

4/6/2022 27
MODULES
Availabilty in parent module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AuthModule} from './auth/auth.module'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AuthModule
],
providers: [AuthModule],
bootstrap: [AppComponent]
})
export class AppModule { }

4/6/2022
COMPONENT
The Component is the main building block of an Angular Application.
The Component contains the data & user interaction logic that defines how the
View looks and behaves.
The Angular applications will have lots of components. Each component handles a
small part of UI. These components work together to produce the complete user
interface of the application.
 The Components consists of three main building blocks
• Template
• Class
• MetaData
 The command to generate component is: ng generate component test

4/6/2022
COMPONENT-INLINE TEMPLATE/STYLE
The Component can be created with inline template and inline style when there is
not required to develop separate html and css
 it is generated as ng g c <comp-name> --inline-template –-inline-style
@Component({
selector: 'app-user-list',
template: `
<p class='.hometown'>
user-list works!
</p>
<div>test</div>
`,
styles: [
'hometown{background-color:red}',
'div{background-color:green;width: 70px; height: 300px; border: 1px solid
#c3c3c3; display: flex; flex-wrap: wrap; align-content: center;}'
]
})
}

4/6/2022
Invoking function
<html>
<head><title>welcome to angular 12</title></head>
<body>
<button (click)="onClickMe('Mallikarjuna')">Click me!</button>
<button (click)="onClickMe('100')">Click me!</button>
<input type="text" name="username" #username placeholder="enter username" value=""
(keyup)="getValue(username.value)">
{{inputtext}}
</body>
</html>
App.component.ts
inputtext=""
onClickMe(name:string|number){
alert('thank you for clicking me'+name)
}
getValue(name:string){
this.inputtext = name
}

 The template defines the layout and content of the View. Without the
template, there is nothing for Angular to render to the DOM.
 You can add Angular directives , Angular Pipes & Other Angular Components on the
template.
 The data to Template comes from the Component, which in turn gets it from
a Angular Service. Using the data binding techniques, we can keep the Template in
sync with the Component.
 The templates can use the Event Binding or two way data binding to notify the
component, when user changes something on the View.
 There are two ways you can specify the Template in Angular.
• Defining the Template Inline
• Provide an external Template
4/6/2022
34
TEMPLATE

 Two-way binding gives components in your application a way to share data. Use
two-way binding to listen for events and update values simultaneously between
parent and child components
import { FormsModule } from '@angular/forms';
app.component.html
<html>
<head><title>welcome to angular 12</title></head>
<body>
Two way binding:: <input type="text" [(ngModel)]="data" >
{{data}}
</body>
</html>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
data:any
}
4/6/2022
35
TWO WAY BINDING

 Metadata Provides additional information about the component to the Angular.
 Angular uses this information to process the class.
 We use the @Component decorator to provide the Metadata to the Component.
 The Components are defined with a @Component class decorator.
 When Angular sees a class with @Component decorator, it treats the class as
Component.
 Important Component metadata properties
• Selector
• Providers
• Directives
• Styles/styleUrls
• template/templateUrl
4/6/2022 36
METADATA

The Class provides the data & logic to the View.
Class Contains the Properties & Methods. The Properties of a class can be bind
to the view using Data Binding.
 The simple Angular Class
export class AppComponent
{
title : string ="app"
}
 Command to generate component:
ng g c <component_name>
4/6/2022 37
CLASS

 Directives are classes that add additional behavior to elements in your Angular
applications.
 The different types of Angular directives are as follows:
• Components: directives with a template. This type of directive is the most
common directive type.
• Attribute Directives: directives that change the appearance or behavior of an
element, component, or another directive.
Command to generate: ng g directive blueBackground
• Structural Directives: directives that change the DOM layout by adding and
removing DOM elements.
4/6/2022 38
DIRECTIVES

4/6/2022 39
Directives
The ngIf Directives is used to add or remove HTML elements based on an expression.
The expression must return a boolean value. If the expression is false then the
element is removed, else the element is inserted
Ng-template is visible on condition statements when value is given
If else condition
Condition with string
Elseif condition
Condition with property binding.
Example: In component.ts In component.html
<h1 *ngif=“show”>if block</h1>
export class AppComponent{ <h1 *ngif=“show”>else block</h1>
<h1 *ngif=“show else elseBlock”>if block</h1>
<h1 *ngif=“show ==‘yes’; then ifBlock else
elseBlock”>if block</h1>
title=‘hello app’; <ng-template #ifBlock><h1>if block</h1></ng-template>
Show=false
Show=yes
Show=red} <ng-template #elseBlock><h1>if block</h1></ng-template>
<ng-template [ngif]=“show==‘red’”><h1>red
block</h1></ng-template>

4/6/2022 40
Directives
• ngFor:
Is an Angular structural directive, which repeats a portion of the HTML
template once per each item from an iterable list (Collection).
Example:
<tr *ngFor="let customer of customers;">
<td>{{customer.customerNo}}</td>
<td>{{customer.name}}</td>
<td>{{customer.address}}</td>
<td>{{customer.city}}</td>
<td>{{customer.state}}</td>
</tr>

4/6/2022 41
Directives
• ngSwitch:
The directive lets you add/remove HTML elements depending on a match
expression. ngSwitch directive used along with ngSwitchCase and ngSwitchDefault
Example:
<div [ngSwitch]="Switch_Expression">
<div *ngSwitchCase="MatchExpression1”> First Template</div>
<div *ngSwitchCase="MatchExpression2">Second template</div>
<div *ngSwitchCase="MatchExpression3">Third Template</div>
<div *ngSwitchCase="MatchExpression4">Third Template</div>
<div *ngSwitchDefault?>Default Template</div>
</div>

4/6/2022 42
ATTRIBUTE DIRECTIVES

4/6/2022 43
ATTRIBUTE DIRECTIVES
bluebackgroundDirective.ts
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appBluebackground]'
})
export class BluebackgroundDirective {
constructor(e1: ElementRef) {
e1.nativeElement.style.color =“blue";
}
}
• App.module.ts
import {BluebackgroundDirective} from './bluebackground.directive’
BluebackgroundDirective
app.component.html
<H1 appBluebackground>welcome to directive</H1> <br>
<p>welcome to angular 12</p> <br>
<p appBluebackground>welcome to angular 13</p> <br>

 Dependency Injection is the ability to add the functionality of components at
runtime.
 The DI framework lets you supply data to a component from an Injectable
service class , defined in its own file.
 Dependencies are services or objects that a class needs to perform its function.
 The @Injectable() decorator specifies that Angular can use this class in the DI
system.
4/6/2022 44
DEPENDENCY INJECTION

DI is a coding pattern where a class receives its dependencies from an external source
rather than creating them itself
class Company{
Dept;
Employee;
constructor(){
this.Dept = new Dept();
this.Employee = new Employee();
}
Drawback:
• The first drawback is that the code is not flexible. Any time the dependencies change, the
PostalDetails class needs to be changed as well.
• The second drawback is that this code is not suitable for testing. Anytime you instantiate a new
Company class, you get the same Dept and Employee.
4/6/2022 45

Class company{
Dept
Employee
Constructor(Dept, Employee)
{
this.Dept = Dept;
this.Employee = employee
}
..
}
4/6/2022 46

 Pipes are used to transform the data.
 Pipes will take data input and transform it into a desired format.
 Pipes are written using the Pipe operator (|)
 Types of Pipes:
• Built in Pipes:
Uppercase Lowercase
Currency Date
• Parameterized Pipes:
We can pass one or more parameters to pipes.
• Chaining Pipes:
We can connect multiple pipes to a data input.
• Custom Pipes:
We can create our own custom pipes for data formatting.
Example: <p>The hero's birthday is {{ birthday | date }}</p>
4/6/2022 47
PIPES

. Pipes
• For Example, the Date pipe formats the date according to locale rules. We can
pass arguments to pipe and chain pipes. The Angular also allows us to create the
Custom Pipe
<h3>Using Date Pipe </h3>
<p>Unformatted date : {{toDate }} </p> //Without pipe
<p>Formatted date : {{toDate | date}} </p>
4/6/2022 48

. Pipes
Types of Pipes:
• Angular Pipes :Angular Pipes takes data as input and formats or transform the data to display in
the template.
• Angular Custom Pipes : The Pipes are a great way to transform the appearance of elements in
the template. The Angular comes with some great built-in pipes like Date pipe, Currency pipe,
and Number pipe, etc. But if these pipes do not cover your needs, then we can create our
own pipe in Angular.
• Date Pipe: the Date pipe formats the date according to locale rules
• AsyncPipe: When an observable or promise returns something, we use a temporary property to
hold the content.
Later, we bind the same content to the template. With the usage of AsyncPipe, the promise or
observable can be directly used in a template and a temporary property is not required.
4/6/2022 49

. Pipes
KeyValue Pipe: The KeyValue Pipe converts given Object or Map into an array of key-value pairs.
We can use this with the ngFor to loop through the object keys.
• Using Pipes in Components & Service :
• Using pipes in our code involves three simple steps
• Import the pipe in Module
• Inject pipe in the constructor
• Use the transform method of the pipe
4/6/2022 50

 Services allows us to create reusable common functionality between various
modules and components.
 Services are injected into application using Dependency Injection mechanism.
 Services are commonly used for making HTTP requests to our endpoints APIs
to request and receive the response.
 Services can value , methods or combination of both.
 Creating a Service:
ng generate service test_service
4/6/2022 51
SERVICE

 Routing is a mechanism used to manage the ‘paths’ and ‘routes’ of our Angular
application.
 Angular framework comes with “Router” module which has everything we need to
design, develop and implement routes and navigation links.
 We navigate from one component view to other using routes.
 Example:
const routes: Routes = [
{ path: 'first-component', component: FirstComponent },
{ path: 'second-component', component: SecondComponent },
];
4/6/2022 54
ROUTER

. Life Cycle
• Life Cycle hooks: When the angular application starts it creates and renders the
root component. It then creates and renders its Childrens & their children. It
forms a tree of components.
• The Angular life cycle hooks are nothing but callback function, which angular
invokes when a certain event occurs during the component’s life cycle.
4/6/2022 55
For example:
ngOnInit when Angular initializes the component for the first time.
When a component’s input property change, Angular invokes ngOnChanges
If the component is destroyed, Angular invokes ngOnDestroy

. Life Cycle
• Here is the complete list of life cycle hooks, which angular invokes during the
component life cycle. Angular invokes them when a certain event occurs.
• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy
4/6/2022 56

. Forms
The Angular forms are used to collect the data from the user.
The data entry forms can be very simple to very complex. It can contain large no of
input fields, Spanning multiple tabs. Forms may also contain complex validation logic
interdependent on multiple fields.
• Some things forms are expected to do
• Initialize the forms fields and present it to the user
• Capture the data from the user
• Track changes made to the fields
• Validate the inputs
• Display helpful errors to the user
4/6/2022 57

. Forms
• Form Module blocks:
The Angular Forms module consists of three Building blocks, irrespective of whether
you are using Template-driven or Reactive forms approach. (ref:
https://www.pluralsight.com/guides/difference-between-template-driven-and-
reactive-forms-angular)
FormControl: A FormControl represents a single input field in an Angular form.
Ex :
First Name : <input type="text" name="firstname" />
4/6/2022 58
Formcontrol FormGroup FormArray

. Forms
Form Group: FormGroup is a collection of FormControls. Each formcontrol is a
property in a FormGroup. with the control name as the key.
Example :
city : <input type="text" name="city" >
Street : <input type="text" name="street" >
PinCode : <input type="text" name="pincode" >
All of the above input fields are represented as the separate FormControl.
FormArray: is an array of form controls. It is similar to FormGroup except for one
difference. In FormGroup each FormControl is a property with the control name
as the key. In FormArray is an array of form controls.
• contactForm = new FormGroup( {
• name: new FormControl(''),
• cities:new FormArray([
• new FormControl('Mumbai'),
• new FormControl('Delhi')
• ]) });
4/6/2022 59

. HTTP
HTTP:The newly designed HttpClient Module allows us to query the Remote API
source to get data into our Application. It requires us to Subscribe to the returned
response using RxJs observables.
HTTP GET
The HttpClient.get sends the HTTP Get Request to the API endpoint and parses
the returned result to the desired type. By default, the body of the response is
parsed as JSON. If you want any other type, then you need to specify explicitly
using the observe & responseType options.
HTTP Post
The HttpClient.post() sends the HTTP POST request to the endpoint. Similar to the
get(), we need to subscribe to the post() method to send the request. The post
method parsed the body of the response as JSON and returns it. This is the
default behavior. If you want any other type, then you need to specify explicitly
using the observe & responseType options.
4/6/2022 60

. Authentication:
• Authentication: The user login credentials are passed to an authenticate API (on the
server). On the server side validation of the credentials happens and a JSON Web Token
(JWT) is returned. JWT is a JSON object that has some information or attributes about
the current user. Once the JWT is given to the client, the client or the user will be
identified with that JWT.
• Authorization: After logging in successfully, the authenticated or genuine user does
not have access to everything. The user is not authorized to access someone else’s
data,he/she is authorized to access some data.
4/6/2022 61

. Lazy Loading
• Lazy loading (also called on-demand loading) is an optimisation technique for the online
content, be it a website or a web app.
• Instead of loading the entire web page and rendering it to the user in one go as in bulk
loading, the concept of lazy loading assists in loading only the required section and delays
the remaining, until it is needed by the user.
• By default, NgModules are eagerly loaded, which means that as soon as the app loads, so
do all the NgModules, whether or not they are immediately necessary. For large apps
with lots of routes, consider lazy loading—a design pattern that loads NgModules as
needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease
load times.
• There are two main steps to setting up a lazy-loaded feature module
• Create the feature module with the CLI, using the --route flag.
• Configure the routes.
4/6/2022 62

. Lazy Loading
• Advantages of Lazy loading:
• On-demand loading reduces time consumption and memory usage thereby optimising
content delivery. As only a fraction of the web page, which is required, is loaded first
thus, the time taken is less and the loading of rest of the section is delayed which saves
storage. All of this enhances the user’s experience as the requested content is fed in no
time.
• Unnecessary code execution is avoided.
• Optimal usage of time and space resources makes it a cost-effective approach from the
point of view of business persons. (website owners)
• Disadvantages of Lazy loading
• Firstly, the extra lines of code, to be added to the existing ones, to implement lazy load
makes the code a bit complicated.
• Secondly, lazy loading may affect the website’s ranking on search engines sometimes, due
to improper indexing of the unloaded content.
•
4/6/2022
63

. Jamine
• Jasmine is a JavaScript testing framework that supports a software development
practice called Behaviour-Driven Development, or BDD for short. It’s a specific flavour
of Test-Driven Development (TDD).
• The describe(string, function) function defines what we call a Test Suite, a collection of
individual Test Specs.
• The it(string, function) function defines an individual Test Spec, this contains one or
more Test Expectations.
• The expect(actual) expression is what we call an Expectation. In conjunction with a
Matcher it describes an expected piece of behaviour in the application.
• The matcher(expected) expression is what we call a Matcher. It does a boolean
comparison with the expected value passed in vs. the actual value passed to the expect
function, if they are false the spec fails.
4/6/2022
64

. Built-In Matchers
• expect(array).toContain(member);
• expect(fn).toThrow(string);
• expect(fn).toThrowError(string);
• expect(instance).toBe(instance);
• expect(mixed).toBeDefined();
• expect(mixed).toBeFalsy();
• expect(mixed).toBeNull();
• expect(mixed).toBeTruthy();
• expect(mixed).toBeUndefined();
• expect(mixed).toEqual(mixed);
• expect(mixed).toMatch(pattern);
• expect(number).toBeCloseTo(number, decimalPlaces);
• expect(number).toBeGreaterThan(number);
• expect(number).toBeLessThan(number);
• expect(number).toBeNaN();
• expect(spy).toHaveBeenCalled();
• expect(spy).toHaveBeenCalledTimes(number);
• expect(spy).toHaveBeenCalledWith(...arguments);
https://jasmine.github.io/tutorials/your_first_suite
4/6/2022
65

. Setup and Teardown
• Before execution of test cases sometime we have to pre and post activities required to
running each or all test cases
• beforeAll - This function is called once, before all the specs in a test suite (describe
function) are run.
• afterAll -This function is called once after all the specs in a test suite are finished.
• beforeEach - This function is called before each test specification (it function) is run.
• afterEach -This function is called after each test specification is run.
4/6/2022
66

. KARMA
• Spectacular Test Runner for JavaScript. Karma is not a testing framework, nor an
assertion library. Karma just launches a HTTP server, and generates the test runner
HTML file you probably already know from your favourite testing framework. So for
testing purposes you can use pretty much anything you like.
• Jasmine can be classified as a tool in the "Javascript Testing Framework" category,
while Karma is grouped under "Browser Testing".
4/6/2022
67

1.What is Angular Framework?
Angular is a TypeScript-based open-source front-end platform that makes it easy
to build applications with in web/mobile/desktop. The major features of this
framework are declarative templates, dependency injection, end to end tooling,
and many more other features are used to ease the development.
2. What is TypeScript?
TypeScript is a typed superset of JavaScript created by Microsoft that adds
optional types, classes, async/await, and many other features, and compiles to
plain JavaScript. Angular is built entirely in TypeScript and used as a primary
language. You can install it globally as,
npm install -g typescript.
3. What is Angular Router?
Angular Router is a mechanism in which navigation happens from one view to the
next as users perform application tasks. It borrows the concepts or model of
browser's application navigation.
4/6/2022 68
INTERVIEW QUESTIONS

4. What are Directives in Angular?
Directives are attributes that allow the user to write new HTML syntax specific to
their applications. They execute whenever the Angular compiler finds them in
the DOM. Angular supports three types of directives.
• Component Directives
• Structural Directives
• Attribute Directives
5.What are different types of compilation in Angular?
Angular offers two ways to compile your application,
– Just-in-Time (JIT)
– Ahead-of-Time (AOT).
4/6/2022 69
INTERVIEW QUESTIONS

6. What is router outlet?
The RouterOutlet is a directive from the router library and it acts as a placeholder
that marks the spot in the template where the router should display the
components for that outlet. Router outlet is used like a component,
<router-outlet></router-outlet> 
7.What are decorators in Angular?
Decorators are a design pattern or functions that define how Angular features
work. They are used to make prior modifications to a class, service, or filter.
Angular supports four types of decorators, they are:
• Class Decorators
• Property Decorators
• Method Decorators
• Parameter Decorators
4/6/2022 70
INTERVIEW QUESTIONS

8.What is an AOT compilation? What are its advantages?
The Ahead-of-time (AOT) compiler converts the Angular HTML and TypeScript
code into JavaScript code during the build phase, i.e., before the browser
downloads and runs the code.
• Some of its advantages are as follows.
• Faster rendering
• Fewer asynchronous requests
• Smaller Angular framework download size
• Quick detection of template errors
• Better security
4/6/2022 71
INTERVIEW QUESTIONS

9.Explain the lifecycle hooks in Angular
• In Angular, every component has a lifecycle. Angular creates and renders these
components and also destroys them before removing them from the DOM. This
is achieved with the help of lifecycle hooks. Here's the list of them -
• ngOnChanges() - Responds when Angular sets/resets data-bound input
properties.
• ngOnInit() - Initialize the directive/component after Angular first displays the
data-bound properties and sets the directive/component's input properties/
• ngDoCheck() - Detect and act upon changes that Angular can't or won't detect
on its own.
• ngAfterContentInit() - Responds after Angular projects external content into
the component's view.
• ngAfterContentChecked() - Respond after Angular checks the content projected
into the component.
4/6/2022 72
INTERVIEW QUESTIONS

• ngAfterViewInit() - Respond after Angular initializes the component's views and
child views.
• ngAfterViewChecked() - Respond after Angular checks the component's views
and child views.
• ngOnDestroy - Cleanup just before Angular destroys the directive/component.
10. What is Eager and Lazy loading?
• Eager loading is the default module-loading strategy. Feature modules under
Eager loading are loaded before the application starts. This is typically used for
small size applications.
• Lazy loading dynamically loads the feature modules when there's a demand. This
makes the application faster. It is used for bigger applications where all the
modules are not required at the start of the application.
4/6/2022 73
INTERVIEW QUESTIONS

11. What is REST?
REST in Angular stands for Representational State Transfer. It is an API that
works on the request of HTTP. Here, the requested URL points to the data that
has to be processed, after which an HTTP function is used to identify the
respective operation that has to be performed on the data given. The APIs that
follow this method are referred to as RESTful APIs.
12. What is DOM?
The full form of DOM is Document Object Model, and it is responsible for
representing the content of a web page and changes in the architecture of an
application. Here, all the objects are organized in the form of a tree, and the
document can easily be modified, manipulated, and accessed only with the help of
APIs.
4/6/2022 74
INTERVIEW QUESTIONS

13. What is Transpiling in Angular?
• Transpiling is the process of converting the typescript into javascript.
• Though typescript is used to write code in the Angular applications, the code is
internally transpiled into javascript.
• In separate typescript conversion
• > tsc Typescript_Filename.ts
14. Which of the Angular life cycle component execution happens when a data-
bound input value updates?
ngOnChanges is the life cycle hook that gets executed whenever a change happens
to the data that was bound to an input.
15. Differentiate between Components and Directives in Angular
• Components break up the application into smaller parts.whereas,
• Directives add behavior to an existing DOM element.
4/6/2022 75
INTERVIEW QUESTIONS

16. What is the use of @Input and @Output? Transpiling is the process of
converting the typescript into javascript.
• When it comes to the communication of Angular Components, which are in
Parent-Child Relationship.
• we use @Input in Child Component and @Output is used in Child Component to
receive an event from Child to Parent Component.
17. Which of the Angular life cycle component execution happens when a data-
bound input value updates?
ngOnChanges is the life cycle hook that gets executed whenever a change happens
to the data that was bound to an input.
18. Differentiate between Components and Directives in Angular
• Components break up the application into smaller parts.whereas,
• Directives add behavior to an existing DOM element.
4/6/2022 76
INTERVIEW QUESTIONS

19. What is ViewEncapsulation?.
• ViewEncapsulation decides whether the styles defined in a component can affect
the entire application or not. There are three ways to do this in Angular:
– Emulated : styles from other HTML spread to the component.
– Native : styles from other HTML do not spread to the component.
– None : styles defined in a component are visible to all components.
20. In how many ways the Data Binding can be done?
• Data Binding happens between the HTML (template) and typescript (component).
Data binding can be done in 3 ways:
(i) Property Binding
(ii) Event Binding
(iii) Two-Way Data Binding.
4/6/2022 77
INTERVIEW QUESTIONS

21. What is the sequence of Angular Lifecycle Hooks?.
4/6/2022 78
INTERVIEW QUESTIONS

22. What is the purpose of using package.json in the angular project?.
– With the existence of package.json, it will be easy to manage the dependencies
of the project.
– If we are using typescript in the angular project then we can mention the
typescript package and version of typescript in package.json.
23. How is SPA(Single Page Application technology different from the traditional
web technology?
In traditional web technology, the client requests for a web page (HTML/JSP/asp) and
the server sends the resource (or HTML page), and the client again requests for
another page and the server responds with another resource. The problem here is a
lot of time is consumed in the requesting/responding or due to a lot of reloading.
Whereas, in the SPA technology, we maintain only one page (index.HTML) even
though the URL keeps on changing.
4/6/2022 79
INTERVIEW QUESTIONS

24. What are ngModel and how do we represent it?.
• ngModel is a directive which can be applied on a text field.
• This a two-way data binding. ngModel is represented by [()]
25. Differentiate between Observables and Promises?
• Observables are lazy, which means nothing happens until a subscription is
made. Whereas Promises are eager; which means as soon as a promise is
created, the execution takes place.
• Observable is a stream in which passing of zero or more events is possible and the
callback is called for each event. Whereas, promise handles a single event.
4/6/2022 80
INTERVIEW QUESTIONS

26. What are angularjs and angular2?.
4/6/2022 81
INTERVIEW QUESTIONS
Factor Angular JS Angular 2
language Written in JavaScript. Written in TypeScript(a superset of Javascript).
Routing
$routeprovider.when() is used for routing
configuration. @RouteConfig{} is used for routing.
Architecture
Uses MVC architecture to build the
applications.
Uses MVVM architecture to build the
applications.
Mobile Support AngularJS does not support mobiles.
Angular 2 was developed specifically to cater
to the mobile users.
Complications
It is easier to learn. However, the application
starts to lag once the number of users at a
time gets higher than 200.
It is inefficient for creating small applications,
as setting up the Angular 2 development
environment is difficult.
Syntax Syntax is complicated to learn. Syntax is comparatively easier than AngularJS.
Plugin
Additional plugins are not required for
developement.
Angular 2 require additional plugins for
development

Angular 2.0

Recommended

More Related Content

What's hot (20)

Similar to Angular 2.0 (20)

More from Mallikarjuna G D (20)

Recently uploaded (20)

Angular 2.0