Scribd
Upload
413 views

Angular Framework

The document discusses key concepts in Angular including components, modules, services, data binding, directives, and more. It provides examples to illustrate each concept. The core concepts are components as building blocks, modules to group related components and services, and services to provide reusable functionality. It also covers different types of data binding including property, event, two-way, and structural directives like ngIf, ngFor, and ngSwitch to conditionally display elements.

Uploaded by

rammohanshastry
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
413 views

Angular Framework

The document discusses key concepts in Angular including components, modules, services, data binding, directives, and more. It provides examples to illustrate each concept. The core concepts are components as building blocks, modules to group related components and services, and services to provide reusable functionality. It also covers different types of data binding including property, event, two-way, and structural directives like ngIf, ngFor, and ngSwitch to conditionally display elements.

Uploaded by

rammohanshastry
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Angular8 1

Angular framework is based on four core concepts and they are as follows −

 Components.
 Templates with Data binding and Directives.
 Modules.
 Services and dependency injection.

The core of the Angular framework architecture is Angular Component. Angular


Component is the building block of every Angular application. Every angular application is
made up of one more Angular Component. It is basically a plain JavaScript / Typescript
class along with a HTML template and an associated name.

// src/app/app.component.ts
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Expense Manager';
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ExpenseManager</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Angular8 2

Angular Module is basically a collection of related features / functionality. Angular


Module groups multiple components and services under a single context.

import { BrowserModule } from '@angular/platform-browser';


import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

 NgModule decorator is used to convert a plain Typescript / JavaScript class


into Angular module.
 declarations option is used to include components into
the AppModulemodule.
 bootstrap option is used to set the root component of
the AppModulemodule.
 providers option is used to include the services for the AppModulemodule.
 imports option is used to import other modules into the AppModulemodule.

Services are plain Typescript / JavaScript class providing a very specific


functionality. Services will do a single task and do it best. The main purpose of the service
is reusability. Instead of writing a functionality inside a component, separating it into a
service will make it useable in other component as well.
Angular8 3

One-way data binding


One-way data binding is a one-way interaction between component and its
template. If you perform any changes in your component, then it will reflect the
HTML elements. It supports the following types −

String interpolation

In general, String interpolation is the process of formatting or manipulating strings.


In Angular, Interpolation is used to display data from component to view (DOM). It
is denoted by the expression of {{ }} and also known as mustache syntax.
Let’s create a simple string property in component and bind the data to view.
Add the below code in test.component.ts file as follows −
export class TestComponent implements OnInit {
appName = "My first app in Angular 8";
}
Move to test.component.html file and add the below code −
<h1>{{appName}}</h1>

Event binding
Angular8 4

Events are actions like mouse click, double click, hover or any keyboard and mouse
actions. If a user interacts with an application and performs some actions, then
event will be raised. It is denoted by either parenthesis () or on-. We have different
ways to bind an event to DOM element. Let’s understand one by one in brief.

Component to view binding

Let’s understand how simple button click even handling works.


Add the following code in test.component.tsfile as follows −
export class TestComponent {
showData($event: any){
console.log("button is clicked!"); if($event) {
console.log($event.target);
console.log($event.target.value);
}
}
}
<h2>Event Binding</h2>
<button (click)="showData($event)">Click here</button>
Alternatively, you can use prefix - on using canonical form as shown below −
<button on-click = "showData()">Click here</button>

Property binding
Property binding is used to bind the data from property of a component to DOM
elements. It is denoted by [].
Let’s understand with a simple example.
Add the below code in test.component.ts file.
export class TestComponent {
userName:string = "Peter";
}
Add the below changes in view test.component.html,
<input type="text" [value]="userName">

Attribute binding
Attribute binding is used to bind the data from component to HTML attributes. The
syntax is as follows −
<HTMLTag [attr.ATTR]="Component data">
For example,
<td [attr.colspan]="columnSpan"> ... </td>
Let’s understand with a simple example.
Angular8 5

Add the below code in test.component.ts file.


export class TestComponent {
userName:string = "Peter";
}
Add the below changes in view test.component.html,
<input type="text" [value]="userName">

Class binding
Class binding is used to bind the data from component to HTML class property.
The syntax is as follows −
<HTMLTag [class]="component variable holding class name">
Class Binding provides additional functionality. If the component data is boolean,
then the class will bind only when it is true. Multiple class can be provided by string
(“foo bar”) as well as Array of string. Many more options are available.
For example,
<p [class]="myClasses">
Let’s understand with a simple example.
Add the below code in test.component.ts file,
export class TestComponent {
myCSSClass = "red";
applyCSSClass = false;
}
Add the below changes in view test.component.html.
<p [class]="myCSSClass">This paragraph class comes from *myClass*
property </p>
<p [class.blue]="applyCSSClass">This paragraph class does not
apply</p>
Add the below content in test.component.css.
.red {
color: red;
}
.blue {
color: blue;
}

Style binding
Style binding is used to bind the data from component into HTML style property.
The syntax is as follows −
<HTMLTag [style.STYLE]="component data">
Angular8 6

For example,
<p [style.color]="myParaColor"> ... </p>
Let’s understand with a simple example.
Add the below code in test.component.ts file.
myColor = 'brown';
Add the below changes in view test.component.html.
<p [style.color]="myColor">Text color is styled using style
binding</p>

Two-way data binding


Two-way data binding is a two-way interaction, data flows in both ways (from
component to views and views to component). Simple example is ngModel. If you
do any changes in your property (or model) then, it reflects in your view and vice
versa. It is the combination of property and event binding.

NgModel

NgModel is a standalone directive. ngModel directive binds form control to property


and property to form control. The syntax of ngModel is as follows −
<HTML [(ngModel)]="model.name" />
For example,
<input type="text" [(ngModel)]="model.name" />
Let’s try to use ngModel in our test application.
Configure FormsModule in AppModule (src/app/app.module.ts)
import { FormsModule } from '@angular/forms'; @NgModule({
imports: [
BrowserModule,
FormsModule
]
})
export class AppModule { }

 Directive is a TypeScript function. When this function executes Angular compiler


checked it inside DOM element. Angular directives begin with ng- where ng stands
for Angular and extends HTML tags with @directive decorator.
Directives enables logic to be included in the Angular templates. Angular directives
can be classified into three categories and they are as follows –
Angular8 7

Attribute directives

Used to add new attributes for the existing HTML elements to change
its look and behaviour.
<HTMLTag [attrDirective]='value' />

For example,
<p [showToolTip]='Tips' />

Structural directives

Used to add or remove DOM elements in the current HTML document.


<HTMLTag [structuralDirective]='value' />
For example,
<div *ngIf="isNeeded">
Only render if the *isNeeded* value has true value.
</div>

Component based directives

Component can be used as directives. Every component


has Input and Output option to pass between component and its parent HTML
elements.
<component-selector-name [input-reference]="input-value"> ...
</component-selector-name>
For example,
<list-item [items]="fruits"> ... </list-item>

Structural directives

NgIf 
<p>test works!</p>
<div *ngIf="true">Display data</div>
Angular8 8

ngIfElse directive

<p>ngIfElse example!</p>
<div *ngIf="isLogIn; else isLogOut">
Hello you are logged in
</div>
<ng-template #isLogOut>
You're logged out..
</ng-template>

ngFor directive

<h2>ngFor directive</h2>
<ul>
<li *ngFor="let l of list">
{{l}}
</li>
</ul>

trackBy
t is used to track when elements are added or removed. It is performed by trackBy method. It has two
arguments index and element. Index is used to identity each element uniquely. Simple example is
defined below.
export class TestComponent {
studentArr: any[] = [ {
"id": 1,
"name": "student1"
},
{
"id": 2,
"name": "student2"
},
{
"id": 3, "name": "student3"
},
{
"id": 4,
"name": "student4"
}
];
trackByData(index:number, studentArr:any): number {
return studentArr.id;
}

NgSWitch 
Angular8 9

<h2>ngSwitch directive</h2>
<ul [ngSwitch]="logInName">
<li *ngSwitchCase="'user'">
<p>User is logged in..</p>
</li>
<li *ngSwitchCase="'admin'">
<p>admin is logged in</p>
</li>
<li *ngSwitchDefault>
<p>Please choose login name</p>
</li>
</ul>

Attribute directives
ngStyle
<p [ngStyle]="{'color': 'blue', 'font-size': '14px'}">
paragraph style is applied using ngStyle
</p>

ngClass

ngClass is used to add or remove CSS classes in HTML elements.

export class User {


userId : number; userName : string;
}
import { User } from '../user';
export class TestComponent implements OnInit {
users: User[] = [
{
"userId": 1,
"userName": 'User1'
},
{
"userId": 2,
"userName": 'User2'
},
];
}

test.component.html file and add the below code −


<div class="container">
<br/>
Angular8 10

<div *ngFor="let user of users" [ngClass]="{


'highlight':user.userName === 'User1'
}">
{{ user.userName }}
</div>
</div>

Custom directives
user defined directives and it is called Custom directives.

import { CustomstyleDirective } from './customstyle.directive';


@NgModule({
declarations: [
AppComponent,
TestComponent,
CustomstyleDirective
]
})

customstyle.directive.ts file and add the below code −


import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appCustomstyle]'
})
export class CustomstyleDirective {
constructor(el: ElementRef) {
el.nativeElement.style.fontSize = '24px';
}
}

ng-template

ng-template is used to create dynamic and reusable templates. It is a virtual


element. If you compile your code with ng-template then is converted as comment
in DOM.
For example,
Let’s add a below code in test.component.html page.
<h3>ng-template</h3>
<ng-template>ng-template tag is a virtual element</ng-template>

NgForOf directive

ngForOf is also a structural directive used to render an item in a collection. Below


example is used to show ngForOf directive inside ng-template.
Angular8 11

import { Component, OnInit } from '@angular/core';


@Component({
selector: 'app-test',
template: `
<div>
<ng-template ngFor let-item [ngForOf]="Fruits" let-i="index">
<p>{{i}}</p>
</ng-template>
</div>`
,
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
Fruits = ["mango","apple","orange","grapes"];
ngOnInit()
{
}
}

Component directives
Component directives are based on component. Actually, each component can be
used as directive. Component provides @Input and @Output decorator to send and
receive information between parent and child components.

Pipes

are referred as filters. It helps to transform data and manage data within
interpolation, denoted by {{ | }}. It accepts data, arrays, integers and strings as
inputs which are separated by ‘|’ symbol.

Adding parameters
Create a date method in your test.component.ts file.
export class TestComponent {
presentDate = new Date();
}
Now, add the below code in your test.component.html file.
<div>
Today's date :- {{presentDate}}
</div>
Now, run the application, it will show the following output −
Today's date :- Mon Jun 15 2020 10:25:05 GMT+0530 (IST)
Here,
Angular8 12

Date object is converted into easily readable format.

Add Date pipe

Let’s add date pipe in the above html file.


<div>
Today's date :- {{presentDate | date }}
</div>
You could see the below output −
Today's date :- Jun 15, 2020

Chained pipes
We can combine multiple pipes together. 
<div>
Date with uppercase :- {{presentDate | date:'fullDate' |
uppercase}} <br/>
Date with lowercase :- {{presentDate | date:'medium' |
lowercase}} <br/>
</div>

Built-in Pipes
Angular 8 supports the following built-in pipes. We will discuss one by one in brief.

AsyncPipe

If data comes in the form of observables, then Async pipe subscribes to an


observable and returns the transmitted values.
import { Observable, Observer } from 'rxjs';
export class TestComponent implements OnInit {
timeChange = new Observable<string>((observer:
Observer>string>) => {
setInterval(() => observer.next(new
Date().toString()), 1000);
});
}

The Async pipe performs subscription for time changing in every one seconds and
returns the result whenever gets passed to it. Main advantage is that, we don’t need
to call subscribe on our timeChange and don’t worry about unsubscribe, if the
component is removed.
Add the below code inside your test.component.html.
Angular8 13

<div>
Seconds changing in Time: {{ timeChange | async }}
</div>

CurrencyPipe

It is used to convert the given number into various countries currency format.
Consider the below code in test.component.ts file.
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-test',
template: `
<div style="text-align:center">
<h3> Currency Pipe</h3>
<p>{{ price | currency:'EUR':true}}</p>
<p>{{ price | currency:'INR' }}</p>
</div>
`,
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
price : number = 20000; ngOnInit() {

}
}

You could see the following output on your screen −


Currency Pipe

€20,000.00
₹20,000.00

SlicePipe

Slice pipe is used to return a slice of an array. It takes index as an argument. If you
assign only start index, means it will print till the end of values. If you want to print
specific range of values, then we can assign start and end index.
We can also use negative index to access elements. Simple example is shown
below −
test.component.ts
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-test',
template: `
<div>
<h3>Start index:- {{Fruits | slice:2}}</h3>
<h4>Start and end index:- {{Fruits | slice:1:4}}</h4>
Angular8 14

<h5>Negative index:- {{Fruits | slice:-2}}</h5>


<h6>Negative start and end index:- {{Fruits | slice:-4:-
2}}</h6>
</div>
`,
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
Fruits =
["Apple","Orange","Grapes","Mango","Kiwi","Pomegranate"];
ngOnInit() {

}
}

DecimalPipe

It is used to format decimal values. It is also considered as CommonModule. Let’s


understand a simple code in test.component.ts file,
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-test',
template: `
<div style="text-align:center">
<h3>Decimal Pipe</h3>
<p> {{decimalNum1 | number}} </p>
<p> {{decimalNum2 | number}} </p>
</div>
`,
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
decimalNum1: number = 8.7589623;
decimalNum2: number = 5.43;
ngOnInit() {

}
}

You could see the below output on your screen −


Decimal Pipe
8.759
5.43

PercentPipe

It is used to format number as percent. Formatting strings are same as DecimalPipe


concept. Simple example is shown below −
Angular8 15

import { Component, OnInit } from '@angular/core';


@Component({
selector: 'app-test',
template: `
<div style="text-align:center">
<h3>Decimal Pipe</h3>
<p> {{decimalNum1 | percent:'2.2'}} </p>
</div>
`,
styleUrls: ['./test.component.scss']
})
export class TestComponent {
decimalNum1: number = 0.8178;
}

You could see the below output on your screen −


Decimal Pipe
81.78%

JsonPipe

It is used to transform a JavaScript object into a JSON string. Add the below code
in test.component.ts file as follows −
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
template: `
<div style="text-align:center">
<p ngNonBindable>{{ jsonData }}</p> (1)
<p>{{ jsonData }}</p>
<p ngNonBindable>{{ jsonData | json }}</p>
<p>{{ jsonData | json }}</p>
</div>
`,
styleUrls: ['./test.component.scss']
})
export class TestComponent {
jsonData = { id: 'one', name: { username: 'user1' }}
}

Now, run the application, you could see the below output on your screen −
{{ jsonData }}
(1)
[object Object]
{{ jsonData | json }}
{ "id": "one", "name": { "username": "user1" } }
Angular8 16

Creating custom pipe


 digitcount.pipe.ts file and add the below code −
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({
name: 'digitcount'
})
export class DigitcountPipe implements PipeTransform {
transform(val : number) : number {
return val.toString().length;
}
}
test.component.ts file as follows −
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-test',
template: `
<div>
<p> DigitCount Pipe </p>
<h1>{{ digits | digitcount }}</h1>
</div>
`,
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
digits : number = 100;
ngOnInit() {
}
}

Reactive programming

enables the data stream to be emitted from one source called Observable and the
emitted data stream to be caught by other sources called Observer through a
process called subscription. This Observable / Observer pattern or
simple Observer pattern greatly simplifies complex change detection and
necessary updating in the context of the programming.
JavaScript does not have the built-in support for Reactive Programming. RxJs is a
JavaScript Library which enables reactive programming in JavaScript. Angular
uses RxJs library extensively to do below mentioned advanced concepts −

 Data transfer between components.


 HTTP client.
 Router.
 Reactive forms.
Angular8 17

Observable
Subscribing process
Subscribing to an Observable is quite easy. Every Observable object will have a
method, subscribe for the subscription process. Observer need to implement three
callback function to subscribe to the Observable object. They are as follows −
 next − Receive and process the value emitted from the Observable
 error − Error handling callback
 complete − Callback function called when all data from Observable are
emitted.
Once the three callback functions are defined, Observable’s subscribe method has
to be called as specified below −
const numbers$ = from([1,2,3,4,5,6,7,8,9,10]);
// observer
const observer = {
next: (num: number) => { this.numbers.push(num);
this.val1 += num },
error: (err: any) => console.log(err),
complete: () => console.log("Observation completed")
};
numbers$.subscribe(observer);
Here,
 next − method get the emitted number and then push it into the local
variable, this.numbers.
 next − method also adding the number to local variable, this.val1.
 error − method just writes the error message to console.
 complete − method also writes the completion message to console.
We can skip error and complete method and write only the next method as shown
below −
number$.subscribe((num: number) => { this.numbers.push(num);
this.val1 += num; });

Operations
filter − Enable to filter the data stream using callback function.
const filterFn = filter( (num : number) => num > 5 );
const filteredNumbers$ = filterFn(numbers$);
filteredNumbers$.subscribe( (num : number) => {
this.filteredNumbers.push(num); this.val2 += num } );
Angular8 18

map − Enables to map the data stream using callback function and to change the
data stream itself.
const mapFn = map( (num : number) => num + num ); const
mappedNumbers$ = mappedFn(numbers$);
pipe − Enable two or more operators to be combined.
const filterFn = filter( (num : number) => num > 5 );
const mapFn = map( (num : number) => num + num ); const
processedNumbers$ = numbers$.pipe(filterFn, mapFn);
processedNumbers$.subscribe( (num : number) =>
{ this.processedNumbers.push(num); this.v

@Injectable decorator. It enables the normal Typescript class to be used as service


in Angular application.
import { Injectable } from '@angular/core'; @Injectable()
export class DebugService {
constructor() { }
}

Register Angular service


To use Dependency Injection, every service needs to be registered into the
system. Angular provides multiple option to register a service. They are as follows −

 ModuleInjector @ root level


 ModuleInjector @ platform level
 ElementInjector using providers meta data
 ElementInjector using viewProviders meta data
 NullInjector

HttpClient service is available inside the HttpClientModule module, which is


available inside the @angular/common/http package.
To register HttpClientModule module −
Import the HttpClientModule in AppComponent
import { HttpClientModule } from '@angular/common/http';
Include HttpClientModule in imports meta data of AppComponent.
@NgModule({
imports: [
BrowserModule,
// import HttpClientModule after BrowserModule.
HttpClientModule,
]
Angular8 19

})
export class AppModule {}

You might also like