Scribd
Upload
236 views47 pages

Angular 15: Essential Guide and Examples

The document provides examples of using different Angular directives, components and features. It covers topics like bootstrap, image display, interpolation, event binding, template reference variables, forms, view encapsulation and more.

Uploaded by

ap s
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
236 views47 pages

Angular 15: Essential Guide and Examples

The document provides examples of using different Angular directives, components and features. It covers topics like bootstrap, image display, interpolation, event binding, template reference variables, forms, view encapsulation and more.

Uploaded by

ap s
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

program-1:Use bootstrap

-----------------------
1. npm install bootstrap
2. add the below line in '[Link]'
@import '~bootstrap/dist/css/[Link]'
3. add "node_modules/bootstrap/dist/js/[Link]" in [Link]
projects ->architect->build->scripts:[] array

program-2:display Local image


-----------------------------
1. place the images inside assests folder (project1/src/assets)
2. use it in HTML file
<img src='assets/images/[Link]' />

program-3:interpolation and property binding


----------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<h1 [innerHtml]='myText'></h1>
<img [src]='imagePath'/>
<img bind-src ='imagePath'/>
<h2 [innerHtml]='2+3'></h2>
<hr>
<h1>{{myText}}</h1>
<img src='{{imagePath}}'/>
<h2>{{2+3}}</h2>
</div>`
})
export class AppComponent {
myText: string = 'Interpolation';
imagePath: string = '[Link]
nav@[Link]';
}

program-4:interpolation vs property binding


-------------------------------------------
->to set an element property to a non-string data value,
we must use property binding not interpolation

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


@Component({
selector: 'my-app',
template: `<div>
<button disabled='{{isDisabled}}'>Try Me</button>
<br/><br/>
<button [disabled]='isDisabled'>Try Me</button>
<br/><br/>
<button bind-disabled='isDisabled'>Try Me</button>
</div>`
})
export class AppComponent {
isDisabled: boolean = false;
}

program-5:interpolation vs property binding


-------------------------------------------
->when we need to concatenate strings we have to use
interpolation instead property binding

import { Component } frpom '@angular/core';


@Component({
selector: 'my-app',
template: `<div>
<h1>My Name is {{myText}}</h1>
<img src='[Link]

<h1> a is {{a}} b is {{b}} addition is {{a+b}}</h1>

<h1>{{ 'a is '+a+' b is '+b+' additon is '+(a+b) }}</h1>


</div>`
})
export class AppComponent {
name: string = 'Sachin Tendulkar';
imagePath: string = 'assets/images/logos/angular/logo-nav@[Link]';
}

program-6:Event binding
-----------------------
@Component({
selector: 'my-app',
template: `<div>
<h1>click the below button to invoke the function</h1>
<button (click)="f1()">btn-1</button>
<br/><hr/>
<h1 [hidden]='flag'>Show/Hide this Paragraph By Clicking the
Below Button</h1>
<button (click)="flag = !flag" >btn-2</button>
</div>`
})
export class AppComponent {
flag:boolean = false;
f1(){
alert("I am f1")
}
}

program-7: Template Reference Variable


--------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
number1:
<input #num1 /> <br/><br/>
number2:
<input ref-num2 /> <br/><br/>
<button (click)="add([Link],[Link])">Add</button>
</div>`
})
export class AppComponent {
add(a,b){
alert(Number(a)+Number(b));
}
}

program-8:Two-way data binding


-------------------------------
- import { FormsModule } from '@angular/forms';
- imports: [
BrowserModule, FormsModule
]

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


@Component({
selector: 'my-app',
template : `<div>
<input [(ngModel)]="name" />
<input bindon-ngModel='name' />
Your Name is: {{name}}
</div>`
})
export class AppComponent {
}

Program-9: View Encapsulation


-----------------------------
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>MyProject1</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="icon" type="image/x-icon" href="[Link]">
<style>
.hello {
font-size: 40px;
border: 5px solid red;
}
</style>
</head>
<body>
<my-root>Loading...</my-root>
<p class="hello">This is a paragraph from [Link] file</p>
</body>
</html>
*********************
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-root',
template: "<div class='hello'>Hello World</div>",
encapsulation: [Link],
//encapsulation: [Link]/Native/Emulated(Default),
styles: ['.hello{background-color:green;']
})
export class AppComponent {

program-10:Template Reference Variable @viewChild


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

@Component({
selector: 'my-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
@ViewChild('name') nameRef;
@ViewChild('age') ageRef;

myName;
myAge;
showData() {
[Link] = [Link];
[Link] = [Link];
alert(`${[Link]} ${[Link]}`)
}
}
*******************
<h1>Using Template Reference variable in component file</h1>

Name: <input #name><br><br>


Age: <input ref-age><br><br>

<button (click)='showData()'>get Date</button>

program-11: *ngIf-else directive


----------------------------------
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<div *ngIf="x%2 == 0; else odd">
{{x}} is an even number
</div>

<ng-template #odd>
{{x}} is an odd number
</ng-template>
`
})
export class AppComponent {
x: number = 6;
}

----------OR---------
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<ng-template
*ngIf="x%2==0;then evenBlock; else oddBlock">
</ng-template>

<ng-template #evenBlock>
<p>
{{x}} is an even number
</p>
</ng-template>

<ng-template #oddBlock>
<p>
{{x}} is an odd number
</p>
</ng-template>
`
})
export class AppComponent {
x: number = 9;
}

program-12: ngswitch directive


----------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1 [ngSwitch]="x">
<p *ngSwitchCase="1">Monday</p>
<p *ngSwitchCase="2">Tuesday</p>
<p *ngSwitchCase="3">Wednesday</p>
<p *ngSwitchCase="4">Thursday</p>
<p *ngSwitchCase="5">Friday</p>
<p *ngSwitchCase="6">Saturday</p>
<p *ngSwitchCase="0">Sunday</p>
<p *ngSwitchDefault>Not a valid number</p>
</h1>
`
})
export class AppComponent {
x: number = 2;
}
program-13:class binding
------------------------
import { Component } from '@angular/core';

@Component({
selector: 'my-app',
styles:['.myClass{color:red;border:5px solid green;}'],
template: `
<h1>
<p [[Link]]='flag'> Add a class to an element </p>
<p [ngClass]="myClasses"> Add Multiple classes to an element </p>
<p [ngClass]="myFunction()"> Add Multiple classes to an element </p>
<button class="btn" [ngClass]="flag ? 'btn-success' : 'btn-danger'">
Class Binding example
</button>
</h1>`
})
export class AppComponent {
flag : boolean = true;
myClasses = {
class1 : true,
class2 : false,
class3 : true
}
myFunction(){
return [Link];
}
}

program-14:style binding
------------------------
import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<h1>
<p [[Link]]="num % 2 == 0 ? 'blue' : 'red'"> Add a style </p>
<p [[Link]]='48'> Add style with unit </p>
<p [[Link]-color]=" flag?'green':'blue' "> Add style conditionally
</p>
<p [ngStyle]="myStyles"> NgStyle for multiple values </p>
<p [ngStyle]="myFunction()"> NgStyle for multiple values </p>
</h1>`
})
export class AppComponent {
flag : boolean = true;
myStyles = {
'background-color': 'lime',
'font-size': '20px',
'border': '5px dotted red',
'padding':'20px'
}
myFunction(){
return [Link];
}
}

program-15: ng-container Example


-----------------------------
<!-- adds unnecessary divs -->
<div *ngFor='let emp of employees'>
<div *ngIf='[Link]>7000'>
{{emp | json}}
</div>
</div>
*********************************************
<ng-container *ngFor='let emp of employees'>
<div *ngIf='[Link]>7000'>
</div>
</ng-container>

employees = [
{ eId: 101, name: 'sanjay', sal: 5000, gender: 'male' },
{ eId: 104, name: 'geeta', sal: 8000, gender: 'female' },
{ eId: 103, name: 'ranjan', sal: 7000, gender: 'female' },
{ eId: 102, name: 'sita', sal: 9000, gender: 'male' },
];

students:any[] = []

<table class="table table-bordered">


<thead>
<tr>
<th>Roll</th>
<th>Name</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<ng-container *ngIf="[Link]>0;else noRecord">
<tr *ngFor="let std of students;let i=index">
<td>{{std?.roll}}</td>
<td>{{std?.name}}</td>
<td>{{std?.mark}}</td>
</tr>
</ng-container>
</tbody>
</table>
<ng-template #noRecord>
<tr colspan="2" align="center">
No record Found
</tr>
</ng-template>

program-16: ngFor directive with trackBy


--------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: '[Link]'
})
export class AppComponent {
employees: any[];

constructor() {
[Link] = [
{ eId: 101, name: "sanjay", sal: 5000 },
{ eId: 104, name: "deepak", sal: 8000 },
{ eId: 103, name: "ranjan", sal: 7000 },
{ eId: 102, name: "manoj", sal: 9000 }
]
}
getNewEmployees() {
[Link] = [
{ eId: 101, name: "sanjay", sal: 5000 },
{ eId: 104, name: "deepak", sal: 8000 },
{ eId: 103, name: "ranjan", sal: 7000 },
{ eId: 102, name: "manoj", sal: 9000 },
{ eId: 106, name: "rajeev", sal: 9000 }
]
}

trackByEmpId(employee: any) {
return [Link];
}
}
************************
<table border=5 align=center width=50%>
<tr>
<th>EmpId</th>
<th>name</th>
<th>salary</th>
</tr>
<tr *ngFor="let emp of employees;trackBy:trackByEmpId">
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
</tr>
</table>
<button (click)="getNewEmployees()">Refresh Data</button>

Program-17 : Pagination
----------------------
1. Install Pagination Library
npm i ngx-pagination

2. Add pagination module to our module


import { NgxPaginationModule } from 'ngx-pagination';
imports: [ BrowserModule, NgxPaginationModule]

3. in HTML file add the below line


<li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage:
p }"> ... </li>
<pagination-controls (pageChange)="p = $event"></pagination-controls>

Program-18 : Custom Directive


----------------------------
import { Directive, HostBinding, HostListener } from '@angular/core';

@Directive({
selector: '[numberonly]'
})
export class NumberonlyDirective {
@HostBinding('[Link]-color') myBgColor: string = '';
@HostListener('keyup', ['$event'])
handleKeyPress(e: { target: { value: string } }) {
let regex = new RegExp(/^[0-9]*$/);
if (![Link]([Link])) {
[Link] = 'red';
} else {
[Link] = 'cyan';
}
}
}

******************
<input type="text" numberonly name="salary" id="salary">

Program-19: Custom Directive - Highlight


===========================================
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appHighlight]',
})
export class HighlightDirective {
constructor(private ele: ElementRef) {
[Link](ele);
}
@HostListener('mouseenter') onMouseEnter() {
[Link]('yellow', 'red');
}
@HostListener('mouseleave') onMouseLeave() {
[Link]('', '');
}
private highlight(bgColor: string, color: string) {
[Link] = bgColor;
[Link] = color;
}
}
---------------------------------
<span appHighlight>this is a paragraph</span>

Program-20: Custom Directive - Back Button


===========================================
import { Directive, HostListener } from '@angular/core';
import { Location } from '@angular/common'

@Directive({
selector: '[backButton]'
})
export class BackButtonDirective {

constructor(private location: Location) { }

@HostListener('click')
clickHandler(e) {
[Link]();
}
}

Program-21: Custom Directive - Count Click


===========================================
@Directive({ selector: 'button[counting]' })
export class CountDirective {
numberOfClicks = 0;

@HostListener('click', ['$[Link]'])
onClick(btn: any) {
[Link]('button', btn, 'number of clicks:', [Link]++);
}
}

Program-22 How to use Modal


=========================
1. npm i bootstrap
2. Add the below TS code
selectedEmployee:any;
displayStyle = 'none';
openPopup(emp:any) {
[Link] = emp;
[Link] = 'block';
}
closePopup() {
[Link] = 'none';
}
2. Add the below modal code

<button class="btn btn-secondary" (click)="openPopup(emp)">View</button>

<div
class="modal"
tabindex="-1"
role="dialog"
[ngStyle]="{ display: displayStyle }"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Employee Details</h4>
</div>
<div class="modal-body">
<p>id: {{ selectedEmployee?.eId }}</p>
<p>Name: {{ selectedEmployee?.name }}</p>
<p>sal: {{ selectedEmployee?.sal }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="closePopup()">
Close
</button>
</div>
</div>
</div>
</div>

program-23 (Decimal Pipe/number)


----------------------------
<h1> {{ 2585285762678 | number }} </h1>
<h1> {{ 258.5285762678 | number }} </h1>
<h1> {{25.5285762678 | number:'3.2-4'}}</h1>
<h1> {{25.5 | number:'3.2-4'}}</h1>

format '3.2-5'
***************
minIntegerDigits = 3
minFractionDigits = 2
maxFractionDigits = 5

program-24 (Date Pipe)


----------------------------
<h1> {{ ob }} </h1>
<h1> {{ ob | date }} </h1>
<h1> {{ ob | date:'fullDate' }} </h1>
<h1> {{ ob | date:'shortDate' }} </h1>
<h1> {{ ob | date:'mediumDate' }} </h1>
<h1> {{ ob | date:'dd-MM-yyyy'}} </h1>
<h1> {{ ob | date:'MMMM dd yyyy'}} </h1>

program-25: async pipe


----------------------------
import { Component } from "@angular/core";
import { Observable,interval } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: '[Link]'
})
export class AppComponent {
createObservable3 = interval(2000);
testObservable3 = [Link](val => [Link](val));
}
**********
<h1>Observable Example</h1>
<h1>{{createObservable3 | async }}</h1>
program-26: Custom Pipe(Remaining Char)
---------------------------------------
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'count'
})
export class CountPipe implements PipeTransform {
transform(input){
var output = 150 - [Link];
return output;
}
}

program-27: Custom Pipe(Truncate)


---------------------------------------
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20, completeWords = false, ellipsis = '...') {
if (completeWords) {
limit = [Link](0, limit).lastIndexOf(' ');
}
return [Link] > limit ? [Link](0, limit) + ellipsis : value;
}
}
<h1>{{longStr | truncate }}</h1>
<!-- Outputs: A really long string that... -->

<h1>{{longStr | truncate : 12 }}</h1>


<!-- Outputs: A really lon... -->

<h1>{{longStr | truncate : 12 : true }}</h1>


<!-- Outputs: A really... -->

<h1>{{longStr | truncate : 12 : false : '***' }}</h1>


<!-- Outputs: A really lon*** -->

program-28: Custom Pipe(Search)


--------------------------------
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;

searchText = [Link]();
return [Link](item => {
return [Link](item).toLowerCase().includes(searchText);
});
}
}

program-29: Custom Pipe(Mr. Miss)


--------------------------------
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'title'
})
export class SearchPipe implements PipeTransform {
transform(name:any, emp?:any): any {
if([Link] == 'male')
return "mr. "+name
else
return "miss. "+name
}
}

program-30: use pre-defined pipes in component


--------------------------------------------
import { Component, ViewChild } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
selector: 'my-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
providers: [CurrencyPipe]
})
export class AppComponent {
constructor(private currencyPipe: CurrencyPipe) {

}
sal = 5000;
formattedSal1 = [Link]([Link]);
formattedSal2 = [Link]([Link], '$');
}

program-31: pure pipe vs impure pipe


---------------------------------
-A pure pipe is only called when Angular detects a change in the value
or the parameters passed to a pipe.(on component load only)

-An impure pipe is called for every change detection cycle


no matter whether the value or parameters changes.(on every change)
-By Default every pipe is pure pipe

ex:
@Pipe({
name: 'myCustomPipe',
pure: true/false
})

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


@Component({
selector: 'app-root',
template: `
<h2>
enter a number
<input [(ngModel)]="x" #num /> &nbsp;
<button (click)="addNewDigit([Link])">add</button><hr>

Original array:
<span *ngFor="let digit of originalList">
<b>{{digit}}</b>, &nbsp;
</span><hr>

Pure Pipe: <br>List is being sorted on component load only<br>


<span *ngFor="let digit of pureSortableDigits | pureSort">
<b>{{digit}}</b>, &nbsp;
</span><hr>

ImPure Pipe:<br>List is being sorted on every change<br>


<span *ngFor="let digit of impureSortableDigits | impureSort">
<b>{{digit}}</b>, &nbsp;
</span>
</h2>
`
})
export class AppComponent {
newDigit: number

originalList: number[] = [
2, 3, 4, 1
]

pureSortableDigits: number[] = [
2, 3, 4, 1
]

impureSortableDigits: number[] = [
2, 3, 4, 1
]

addNewDigit(newDigit) {
[Link](newDigit)
[Link](newDigit)
[Link](newDigit)
}
}
program-32: inputs and outputs(component communication)
----------------------------
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
template: `<h3>Parent Component <br>
x from its own component is: {{x}} <br>
y from its own component is: {{y}} <br>

a from child is: {{aParent}} <br>


b from child is: {{bParent}} <br>

<hr>
<app-child [xChild]='x' [yChild]='y'
(aEvent)="getA($event)" (bEvent)="getB($event)"></app-child>
</h3>`
})
export class ParentComponent {
x: number = 10;
y: number = 20;
aParent : number;
bParent : string;

getA(temp:number){
[Link] = temp;
}
getB(temp:string){
[Link] = temp;
}
}
****
import { Component, EventEmitter } from '@angular/core';

@Component({
selector: 'app-child',
inputs: ['xChild', 'yChild'],
outputs: ['aEvent', 'bEvent'],
template: `<h3>Child Component</h3>
a from its own component is: {{a}} <br>
b from its own component is: {{b}} <br>

x value from parent is: {{xChild}} <br>


y value from parent is: {{yChild}} <br>

<button (click)='sendA()'>send a data</button>&nbsp;


<button (click)='sendB()'>send b data</button>
`
})
export class ChildComponent {
xChild: number;
yChild: number;

a: number = 15;
b: string = "hiiiiii";

aEvent = new EventEmitter<number>();


bEvent = new EventEmitter<string>();

sendA():void{
[Link](this.a);
}
sendB():void{
[Link](this.b);
}
}

program-33 : life cycle hooks all methods


--------------------------------------
import { Component } from "@angular/core";
@Component({
selector: 'app-root',
templateUrl: '[Link]',
styleUrls: ['[Link]']
})
export class AppComponent {
num = 0;

constructor() {
[Link]("Parent constructor")
}
ngOnInit() {
[Link]('Parent ngOnInit');
}
ngOnChanges() {
[Link]('Parent ngOnChanges');
}
ngDoCheck() {
[Link]('Parent ngDoCheck');
}
ngAfterContentInit() {
[Link]('Parent ngAfterContentInit');
}
ngAfterContentChecked() {
[Link]('Parent ngAfterContentChecked')
}
ngAfterViewInit() {
[Link]('Parent ngAfterViewInit');
}
ngAfterViewChecked() {
[Link]('Parent ngAfterViewChecked');
}
ngOnDestroy() {
[Link]('Parent ngOnDestory');
}
increment() {
[Link]++;
}
}
------
<h1>
this is app component <br>
Parent Component num: {{num}} <br>
<button (click)="increment()">Increment(+)</button> <br>
<hr>
<app-my-child [childNum]='num'></app-my-child>
</h1>
---------
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'my-child',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
inputs: ['childNum']
})
export class MychildComponent implements OnInit {
constructor() {
[Link]('child constructor');
}
ngOnInit() {
[Link]('child ngOnInit');
}
ngOnChanges() {
[Link]('child ngOnChanges');
}
ngDoCheck() {
[Link]('child ngDoCheck');
}
ngAfterContentInit() {
[Link]('child ngAfterContentInit');
}
ngAfterContentChecked() {
[Link]('child ngAfterContentChecked')
}
ngAfterViewInit() {
[Link]('child ngAfterViewInit');
}
ngAfterViewChecked() {
[Link]('child ngAfterViewChecked');
}
ngOnDestroy() {
[Link]('child ngOnDestory');
}

}
--------
<p>
This is child component <br>
child component Num: {{childNum}}
</p>

program-34 ngDOCheck()
-----------------------
import { Component, OnInit, OnChanges, ChangeDetectionStrategy, DoCheck,
ChangeDetectorRef } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
inputs: ['xChild'],
changeDetection: [Link]
})
export class ChildComponent implements OnChanges, OnInit, DoCheck {
constructor(private changeDetectorObj: ChangeDetectorRef) {
}
ngOnChanges(myChanges) {
[Link]('onchanges called', myChanges)
}
ngOnInit() {
[Link]('oninit called')
}
ngDoCheck() {
[Link]();
}
}

program-35: @ViewChild and ngAfterViewInit lifecycle hooks


----------------------------------------------
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent implements AfterViewInit {
@ViewChild('myInputBox') inputBox;

constructor() {
[Link]([Link]); //not yet available
}
ngAfterViewInit() {
[Link]();
[Link]([Link])
}
}
*************
<h1>@ViewChild to inject a reference to a DOM element</h1>
<input type="text" #myInputBox>

Program-36 @viewChild to access child members in parent component


--------------------------------------------------------------
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child/[Link]'

@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent implements AfterViewInit {
@ViewChild(ChildComponent) childRef;

constructor() {
[Link]("inside constructor")
// [Link]([Link].a); //not yet available
// [Link]([Link].b); //not yet available
}
ngAfterViewInit() {
[Link]("inside ngAfterViewInit")
[Link]([Link].a);
[Link]([Link].b);
}

Program-37 @viewChildren
-----------------------
@ViewChildren('myInputBox') allinputBoxes: any;

ngAfterViewInit() {
[Link]([Link]);
[Link]._results?.forEach((ele: any) => {
[Link] = 'green';
});
}

program-38: create a math Services


------------------------------
import { Injectable } from '@angular/core';
@Injectable()
export class MathService {
add(a:number,b:number){
return a+b;
}
sub(a:number,b:number){
return a-b;
}
mul(a:number,b:number){
return a*b;
}
div(a:number,b:number){
return a/b;
}
}
*********
import { Component } from "@angular/core";
import { MathService } from './[Link]'

@Component({
selector: 'app-root',
templateUrl: '[Link]',
styleUrls: ['[Link]']
})
export class AppComponent {
addResult;
subResult;
mulResult;
divResult;

constructor(obj : MathService){
let a = parseInt(prompt("enter a value"));
let b = parseInt(prompt("enter a value"));
[Link] = [Link](a,b);
[Link] = [Link](a,b);
[Link] = [Link](a,b);`
[Link] = [Link](a,b);
}
}

program-39: httpClient example


---------------------------
import { Component } from "@angular/core";
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app-root',
templateUrl: '[Link]',
styleUrls: ['[Link]']
})
export class AppComponent {
result;
constructor(obj: HttpClient) {
[Link]('[Link]
.subscribe((response) => {
[Link](response);
[Link] = response;
});
}
}

program-40 : HttpClient with Headers


--------------------------------------
Reading the full response(not only the body)

[Link]('[Link]
{ observe: 'response' }).subscribe(
(res)=>{
[Link](res)
}
)

program-41: httpClientt (Todo Service)


------------------------------------
[Link]
-------
export interface Todo {
userId: number;
id: number;
title: string;
completed: boolean;
}
[Link]
---------------
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Todo } from './todo'
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class TodoService {
constructor(public httpObj: HttpClient) {
}
getAllTodos(): Observable<Todo[]> {
return [Link]<Todo[]>('[Link]
}
}
[Link]
-----------------
import { Component } from "@angular/core";
import { Todo } from './todo';
import { TodoService } from './[Link]'

@Component({
selector: 'app-root',
templateUrl: '[Link]',
styleUrls: ['[Link]']
})
export class AppComponent {
todos: Todo[];
constructor(public todoServiceObj: TodoService) {
}
ngOnInit() {
[Link]()
.subscribe((response: Todo[]) => {
[Link] = response;
});
}
}

program-42: Http with Model & Observable


-----------------------------------------
export class Comment {
constructor(
public id: number,
public postId: number,
public name: string,x
public email: string,
public body: string
) {}
}
*********
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Comment } from './comment';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CommentService {
private url = '[Link]
constructor(private http: HttpClient) {
}
getAllComments(): Observable<Comment[]> {
return [Link]<Comment[]>([Link], { observe: "body" }).pipe(
map((res: Comment[]) => {
return [Link]((item: Comment) => {
return new Comment([Link],[Link],[Link],[Link],[Link]);
});
})
);
}
}
*************
import { Component } from "@angular/core";
import { Comment } from './comment';
import { CommentService } from './[Link]'

@Component({
selector: 'app-root',
templateUrl: '[Link]'
})
export class AppComponent {
commentList: Comment[];

constructor(public ob: CommentService) {


[Link]().subscribe((response: Comment[]) => {
[Link] = response;
[Link]([Link]);
});
}
}

Program:43 Model Class


-----------------------------
export class Employee {
private id: number;
private firstName: string;
private lastName: string;
private sal: number;

constructor(id: number, firstName: string, lastName: string, sal: number) {


[Link] = id;
[Link] = firstName;
[Link] = lastName;
[Link] = sal;
}
getFullName(): string {
return `${[Link]} ${[Link]}`;
}
getYearlySalary(): number {
return 12 * [Link];
}
}

getEmployees(): Observable<Employee[]> {
return [Link]<Employee[]>([Link], { observe: 'body' }).pipe(
map((response: Employee[]) => {
return [Link]((emp: Employee) => {
return new Employee([Link], [Link], [Link], [Link]);
});
})
);
}

Program-44 HTTP Interceptor Example


----------------------------------
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from
"@angular/common/http";
import { Observable } from "rxjs";
export class MyInterceptor implements HttpInterceptor{
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
{
const hardCodedToken = "1d38fe-8671-6735-7360-2hjhsjh5";
const requestWithToken = [Link]({
setHeaders: {
Authorization: `Bearer ${hardCodedToken}`
}
});
return [Link](requestWithToken);
}
}

============
{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor1, multi: true }
//in modules providers

Program-45 : Retry Interceptor


============================
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler,
HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { retry } from 'rxjs/operators';
@Injectable()
export class RetryInterceptor implements HttpInterceptor {
intercept(httpRequest: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return [Link](httpRequest).pipe(retry(1));
}
}
program-46 : Sucess Interceptor
==============================
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from
"@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, tap } from "rxjs";
@Injectable()
export class SucessInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
{
return [Link](req).pipe(tap(event=>{
if(event instanceof HttpResponse){
alert('data fetched successfully!!!');
}
}))
}
}

Program-47: Observables
----------------------
import { Component } from "@angular/core";
import { Observable, from, interval, range } from 'rxjs';
import { take, filter, map } from 'rxjs/operators';

@Component({
selector: 'app-root',
templateUrl: '[Link]'
})
export class AppComponent {
//Create an observable with given subscription function
createObservable1 = new Observable(function (observer) {
[Link]("aaaaaa");
[Link]("bbbbbb");
[Link]("cccccc");
});
subscriber1 = [Link]({
next: (v) => [Link](v),
error: (e) => [Link](e),
complete: () => [Link]('completed'),
});

//Turn an array or iterable into an observable


arr = [10, 20, 30, 40, 50];
createObservable2 = from([Link]);
testObservable2 = [Link]((ele) => {
[Link](ele) })

// createObservable3 = interval(2000);
//testObservable3 = [Link](val => [Link](val));

createObservable4 = interval(2000);
createObservable4_take = [Link](take(5));
testObservable4 = this.createObservable4_take.subscribe(val => [Link](val));

createObservable5 = range(1, 10)


testObservable5 = [Link](val => [Link](val));

createObservable6 = range(1, 20);


even_numbers = [Link](
filter((ele) => ele % 2 == 0)
)
testObservable6 = this.even_numbers.subscribe((ele) => {
[Link]("even number " + ele)
})

arr2 = [10, 11, 12, 13, 14, 15];


createObservable7 = from(this.arr2);
createObservableSquare = [Link](
map((ele) => ele * ele)
)
testObservableSquare = [Link](
(ele)=>[Link](ele)
)

time = new Observable<string>(observer => {


setInterval(() => [Link](new Date().toString()), 1000);
});

Program:48 Zip()
--------------
zipDemo() {
let publisher1 = of(32, 31, 34);
let publisher2 = of('sanjay', 'ranjan', 'bishnu');
let publisher3 = of('bang', 'chennai', 'hyderabad');
let finalPublisher = zip(publisher1, publisher2, publisher3).pipe(
map(([age, name, add]) => ({ age, name, add }))
);

[Link]((data) => [Link](data));


}

program-49 : forkjoin
----------------------
fetchDataFromMultipleAPIs() {
let request1 = [Link](
'[Link]
);
let request2 = [Link](
'[Link]
);
let request3 = [Link](
'[Link]
);

forkJoin([request1, request2, request3]).subscribe(([res1, res2, res3]) => {


[Link](res1, res2, res3);
});
}

Program-50 : MergeMap
-----------------------
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { fromEvent, Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

@Component({
selector: 'app-test',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class TestComponent implements AfterViewInit {

@ViewChild('btn1', { static: true }) button: any;


clickObservable: Observable<any>;
count: number = 0;

constructor() {
[Link] = new Observable();
}

ngAfterViewInit() {
[Link] = fromEvent([Link], 'click');
[Link]();
}

innerObservable(count: number) {
return new Observable((observer) => {
setTimeout(() => { [Link](count + " A") }, 1000);
setTimeout(() => { [Link](count + " B") }, 2000);
setTimeout(() => { [Link](count + " C") }, 3000);
setTimeout(() => { [Link](count + " D") }, 4000);
setTimeout(() => { [Link](count + " E"); [Link]() }, 5000);
})
}

mergeMapExample() {
let obs =
[Link]
.pipe(
mergeMap(() => {
[Link] = [Link] + 1;
return [Link]([Link])
})
)
.subscribe(val => [Link](val));
}
}
-----------------------------
// without mergeMap()
usersPublisher = of(1, 2, 3, 4);
usersSubscriber = [Link]((user) => {
[Link](user);
const url = `[Link]
[Link](url).subscribe((userData) => {
[Link](userData);
});
});

//with mergeMap()
usersPublisher = of(1, 2, 3, 4);
usersSubscriber2 = [Link](
mergeMap((user) => {
const url =`[Link]
return [Link](url); //inner observable
})
).subscribe((userData) => {
[Link](userData);
});

Program-51 ConcatMap Example


----------------------------
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { fromEvent, Observable } from 'rxjs';
import { concatMap } from 'rxjs/operators';

@Component({
selector: 'app-test',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class TestComponent implements AfterViewInit {

@ViewChild('btn1', { static: true }) button: any;


clickObservable: Observable<any>;
count: number = 0;

constructor() {
[Link] = new Observable();
}

ngAfterViewInit() {
[Link] = fromEvent([Link], 'click');
[Link]();
}

innerObservable(count: number) {
return new Observable((observer) => {
setTimeout(() => { [Link](count + " A") }, 1000);
setTimeout(() => { [Link](count + " B") }, 2000);
setTimeout(() => { [Link](count + " C") }, 3000);
setTimeout(() => { [Link](count + " D") }, 4000);
setTimeout(() => { [Link](count + " E"); [Link]() }, 5000);
})
}

mergeMapExample() {
let obs =
[Link]
.pipe(
concatMap(() => {
[Link] = [Link] + 1;
return [Link]([Link])
})
)
.subscribe(val => [Link](val));
}

program-52 : TypeAhead using SwitchMap


--------------------------------------
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { BehaviorSubject, Observable } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';

interface PeopleData {
name: string;
birthYear: string;
height: number;
weight: number;
eyeColor: string;
}

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AppComponent implements OnInit {
searchResult$: Observable<PeopleData>;

search = new FormControl();

searchFormGroup = new FormGroup({


search: [Link],
});

constructor(private http: HttpClient) {}

ngOnInit() {
[Link]$ = [Link](
switchMap((term) =>
[Link]<any>(`[Link]
),
map((response) =>
[Link] > 0 ? [Link][0] : { name: 'No results' }
),
map(
(response) =>
({
name: [Link],
birthYear: response.birth_year,
height: Number([Link]),
weight: Number([Link]),
eyeColor: response.eye_color,
} as PeopleData)
)
);
}
}
--------------------------------
<div class="body">
<h1>Search for a Star Wars Character</h1>
<p>
Simply start typing the name of your favorite Star Wars character to see
more details about them!
</p>

<div [formGroup]="searchFormGroup">
<input formControlName="search" />
</div>

<ng-container *ngIf="searchResult$ | async as person">


<table *ngIf="[Link] !== 'No results'; else noResults ">
<tr>
<td class="heading">
Name
</td>
<td>
{{ [Link] }}
</td>
</tr>

<tr></tr>
<tr>
<td class="heading">
Birth Year
</td>
<td>
{{ [Link] }}
</td>
</tr>

<tr></tr>
<tr>
<td class="heading">
Height
</td>
<td>
{{ [Link] }} cm
</td>
</tr>

<tr></tr>
<tr>
<td class="heading">
Weight
</td>
<td>
{{ [Link] }} kg
</td>
</tr>
<tr></tr>
<tr>
<td class="heading">
Eye Color
</td>
<td>
{{ [Link] }}
</td>
</tr>

<tr></tr>
</table>

<ng-template #noResults>
No Results Found
</ng-template>
</ng-container>
</div>

program : 53- exhaustMap Example


----------------------------
exhaustMapDemo() {
const clicks = fromEvent(document, 'click');
const result = [Link](
exhaustMap(() => [Link]('[Link]
);
[Link]((x) => [Link](x));
}

Program-54 RXJS-Subject Example


-------------------------------
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })

export class MessageService {


private subject = new Subject<any>();

sendMessage(message: string) {
[Link]({ text: message });
}

clearMessages() {
[Link](null);
}

getMessage(): Observable<any> {
return [Link]();
}
}
--------
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../[Link]';
import { Subscription } from 'rxjs';

@Component({
selector: 'app-rxjs',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class RxjsComponent implements OnInit {
messages: any[] = [];
subscription: Subscription;

constructor(private messageService: MessageService) {


[Link] = new Subscription();
}
ngOnInit() {
// subscribe to messages subject-observable
[Link] = [Link]().subscribe(message => {
if (message) {
[Link](message);
} else {
// clear messages when empty message received
[Link] = [];
}
});
}
ngOnDestroy() {
// unsubscribe to ensure no memory leaks
[Link]();
}
}
---------
<p>rxjs works!</p>
<table border=2 width=50% align=center>
<tr *ngFor='let msg of messages'>
<td>{{[Link]}}</td>
</tr>
</table>
--------------
import { Component, OnInit } from '@angular/core';
import { MessageService } from '../[Link]';

@Component({
selector: 'app-rxjs2',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class Rxjs2Component implements OnInit {
newMsg

constructor(private messageService: MessageService) { }


ngOnInit() { }

sendMessage(): void {
// send message to subscribers via observable subject
[Link]([Link]);
}
clearMessages(): void {
// clear messages
[Link]();
}

}
----------
<p>rxjs2 works!</p>
<input type="text" [(ngModel)]='newMsg'>
<button (click)='sendMessage()'>send message</button>
<button (click)='clearMessages()'>Clear Message</button>

Program:-55 RXJS Behaviour-Subject Example


---------------------------------------
[Link]
---------------
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
export interface Todo {
id: any;
value: string;
}
const initialTodos = [
{ id: 1, value: 'Todo 1' },
{ id: 2, value: 'Todo 2' },
];
@Injectable({
providedIn: 'root',
})
export class TodoService {
private todoSubject = new BehaviorSubject<Todo[]>(initialTodos);
readonly todoObs = [Link]();

private todosArr: Todo[] = initialTodos;


private nextId = 2;
create(item: Todo) {
[Link] = ++[Link];
[Link](item);
[Link]([Link]([], [Link]));
}
remove(id: number) {
[Link]((todo, ind) => {
if ([Link] === id) {
[Link](ind, 1);
}
[Link]([Link]([], [Link]));
});
}
}

[Link]
---------------------
import { Component, OnInit } from '@angular/core';
import { TodoService } from '../[Link]';
@Component({
selector: 'app-todo-add',
template: `
<div>
<h3>Add Todo</h3>
<input #addToDo /> &nbsp;
<button (click)="addNewTodo(addToDo)">Add New Todo</button>
</div>
`,
})
export class TodoAddComponent implements OnInit {
constructor(private todoService: TodoService) {}
ngOnInit(): void {}
addToDo(todoText: string) {
[Link]({ id: 3, value: todoText });
}
}

[Link]
----------------------
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Todo, TodoService } from '../[Link]';

@Component({
selector: 'app-todo-list',
template: `
<h3>Todo List</h3>
<div *ngFor="let todo of todos$ | async">
{{ [Link] }} {{ [Link] }}
<button (click)="deleteTodo([Link])">x</button>
</div>
`,
})
export class TodoListComponent implements OnInit {
todos: Observable<Todo[]> | undefined;
constructor(private todoService: TodoService) {}
ngOnInit(): void {
[Link] = [Link];
}
deleteTodo(id: number) {
[Link](id);
}
}

******
Angular Forms
*********
program-56: Form with Class Names
--------------------------------
<form name='myForm'>
Name:
<input name='uname' [(ngModel)]='name' required /><br><br>
Age:
<input name='uage' [(ngModel)]='age' />
</form>

<style>
[Link]-invalid{
border:5px solid red;
}
[Link]-valid{
border:5px solid green;
}
</style>

program-57 template driven form Example


--------------------------------------
<form #myForm="ngForm" (ngSubmit)="logForm([Link])">
<label>Firstname:</label>
<input type="text" name="firstname" ngModel>

<label>Lastname:</label>
<input type="text" name="lastname" ngModel>

<div ngModelGroup='address'>
<label>Street:</label>
<input type="text" name="street" ngModel>

<label>pin:</label>
<input type="text" name="zip" ngModel>

<label>City:</label>
<input type="text" name="city" ngModel>
</div>

<button type="submit">Submit</button>
</form>
<h2> {{ [Link] | json }} </h2>

program-58: Template Driven Form with validation


---------------------------------------------
<h1>template driven Form with validation</h1>

<form name="myForm1" #myForm="ngForm" (submit)="submitMyForm([Link])">


name:
<input name="name" #name="ngModel" [(ngModel)]="[Link]" required
pattern="[a-zA-Z]+" />
<span *ngIf="[Link]('required') && [Link]" class="text-danger">Name
is required</span>
<span *ngIf="[Link]('pattern') && [Link]" class="text-danger">Only
alphabets allowed</span>
<br><br>
age:
<input name="age" #age="ngModel" [(ngModel)]="[Link]" required pattern="[0-9]
{2}" />
<span *ngIf="[Link]('required') && [Link]" class="text-danger">Age is
required</span>
<span *ngIf="[Link]('pattern') && [Link]" class="text-danger">Only
Numbers allowed</span>
<br><br>

<input type="submit" [disabled]="[Link]" />

</form>
<hr>
<div> Form Value: {{ [Link] | json }}</div>
<div> Form Valid Status: {{ [Link] | json }} </div>

<div>Name Value: {{[Link]}}</div>


<div>Age Value: {{[Link]}}</div>

**********
import { Component} from '@angular/core';

@Component({
selector: 'app-template',
templateUrl: './[Link]',
styles: [
'[Link]-dirty{border:2px solid red}'
]
})
export class TemplateComponent {
submitMyForm(user: any) {
alert(`Name: ${[Link]} Age: ${[Link]}`);
}
user: any = { name: 'sanjay', age: 44 };
}

program-58: Model driven form example


-------------------------------------
<form [formGroup]="registerForm">
<label>Firstname:</label>
<input type="text" formControlName="firstname">

<label>Lastname:</label>
<input type="text" formControlName="lastname">
<div formGroupName='address'>
<label>Street:</label>
<input type="text" formControlName="street">

<label>Zip:</label>
<input type="text" formControlName="zip">

<label>City:</label>
<input type="text" formControlName="city">
</div>

<button type="submit">Submit</button>
</form>
<h2>{{[Link] | json}}</h2>
*****************
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
selector: 'my-app',
...
})
export class AppComponent {

registerForm = new FormGroup({


firstname: new FormControl(),
lastname: new FormControl(),
address: new FormGroup({
street: new FormControl(),
zip: new FormControl(),
city: new FormControl()
})
});
}

program-59: Model driven form with validation


------------------------------------------
<div>
<h2> Model Driven Forms </h2>
<hr>
<form [formGroup]="myForm" (submit)="submitMyForm()">
Name:
<input pattern='[a-z]+' id="name" formControlName="name" required>
<span *ngIf="[Link]('required') &&
[Link]"> Name Required </span>
<span *ngIf="[Link]('pattern') &&
[Link]"> Wrong Pattern </span>
<br><br>

Age:
<input id="age" formControlName="age">
<br><br>

Address:
<input id="address" formControlName="address" >
<span *ngIf="[Link]('required') && [Link]"> Address is
Required </span>
<span *ngIf="[Link]('minlength') && [Link]"> Min 5
characters Required </span>
<span *ngIf="[Link]('maxlength') && [Link]"> max 10
characters allowed </span>
<br><br>

<button type="submit" [disabled]="![Link]">Submit</button>


&nbsp;
<button type="reset"> Reset </button>

</form>
<hr>
<div> Form Value: {{[Link] | json }} </div>
<div> Form Status:{{[Link] | json }} </div>
</div>
***************
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: '[Link]'
})
export class AppComponent {
myFormBuilder;
myForm;

constructor() {
[Link] = new FormBuilder();
[Link]();
}

get age() {
return [Link]('age')
}
get address() {
return [Link]('address')
}
generateForm() {
let formControlObj1 = new FormControl('sachin', [[Link],
[Link]('[a-zA-z]+')]);
let formControlObj2 = new FormControl('35');
let formControlObj3 = new FormControl('mumbai', {
validators : [[Link],[Link]('[a-zA-z]+')],
updateOn : 'blur'
});

[Link] = [Link]({
name: formControlObj1,
age: formControlObj2,
address: formControlObj3
})
}

submitMyForm() {
alert(`Name: ${[Link]} Age: ${[Link]} Address: $
{[Link]}`);
}
}

program-60 dynamic Form


=======================
import { Component, VERSION } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
selector: 'my-app',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
empForm!: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
[Link] = [Link]({
employees: [Link]([])
});
}

employees(): FormArray {
return [Link]('employees') as FormArray;
}

newEmployee(): FormGroup {
return [Link]({
firstName: '',
lastName: '',
skills: [Link]([])
});
}

addEmployee() {
[Link]().push([Link]());
}

removeEmployee(empIndex: number) {
[Link]().removeAt(empIndex);
}

employeeSkills(empIndex: number): FormArray {


return [Link]()
.at(empIndex)
.get('skills') as FormArray;
}

newSkill(): FormGroup {
return [Link]({
skill: '',
exp: ''
});
}

addEmployeeSkill(empIndex: number) {
[Link](empIndex).push([Link]());
}

removeEmployeeSkill(empIndex: number, skillIndex: number) {


[Link](empIndex).removeAt(skillIndex);
}

onSubmit() {
[Link]([Link]);
}
}
----------------------------------
<style>button{margin:5px}</style>
<h1>Angular Nested FormArray / Dynamic FormArray</h1>
<form [formGroup]="empForm" (ngSubmit)="onSubmit()">
<div formArrayName="employees">
<div *ngFor="let employee of employees().controls; let empIndex=index">
<div
[formGroupName]="empIndex"
style="border: 2px solid blue; padding: 10px; width: 700px; margin: 10px;"
>
{{empIndex}} First Name :
<input type="text" formControlName="firstName" />
Last Name:
<input type="text" formControlName="lastName" />

<button (click)="removeEmployee(empIndex)">Remove</button>

<div formArrayName="skills">
<div
*ngFor="let skill of employeeSkills(empIndex).controls; let
skillIndex=index"
>
<div [formGroupName]="skillIndex">
{{skillIndex}} Skill :
<input type="text" formControlName="skill" />
Exp:
<input type="text" formControlName="exp" />

<button (click)="removeEmployeeSkill(empIndex,skillIndex)">
Remove
</button>
</div>
</div>
</div>
<button type="button" (click)="addEmployeeSkill(empIndex)">
Add Skill
</button>
</div>
</div>
<button type="button" (click)="addEmployee()">Add Employee</button>
</div>
</form>

{{[Link] | json}}

program-60 Custom Validation


----------------------------
import { FormControl } from '@angular/forms';

export class EmailValidator {

static isValidEmail(inputBox: FormControl) {


if ([Link] !== 'sanjay@[Link]') {
return { invalidMail: true } //The Control is invalid
}
return null; //The control is valid
}
}
********
email: new FormControl('abcd@[Link]', [[Link],
[Link]]),
********
<span *ngIf='[Link]("invalidMail")'>
invalid email</span>

program-61: routing
--------------------
1. Specify the Base URL: <base href="/"> in [Link]
2. Import RouterModule from '@angular/router'
3. Define the routes

[Link]
-------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './[Link]';


import { HomeComponent } from './home/[Link]';
import { AboutusComponent } from './aboutus/[Link]';
import { CareerComponent } from './career/[Link]';

import { appRoutes } from './routerConfig'

@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutusComponent,
CareerCompon ent,
],
imports: [
BrowserModule, [Link](appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

[Link]
----------------
import { Routes } from '@angular/router';
import { HomeComponent } from './home/[Link]';
import { AboutusComponent } from './aboutus/[Link]';
import { CareerComponent } from './career/[Link]';

export const appRoutes: Routes = [

{
path: 'home',
component: HomeComponent
},
{
path: 'aboutUs',
component: AboutusComponent
},
{
path: 'career',
component: CareerComponent
},
{
path: '',
//redirectTo: 'home',
component:HomeComponent,
//pathMatch: 'full'
},
{
path: '**',
component: notFoundComponent
}
]

[Link]
-------------------
<div style="text-align: center">
<h1>This is {{title}}</h1>
<nav>
<a routerLink="home">Home</a> <br><br>
<a routerLink="aboutUs">About Us</a> <br><br>
<a routerLink="career">Career</a>
</nav>
<hr>
<router-outlet></router-outlet>
</div>

N.P:- Create 3 components


ng g c home
ng g c aboutUs
ng g c career

Program-62:Path-Param Example
-----------------------------
1. create productDetailsComponent
ng g c productDetails

2. add the below code in [Link]


{
path: 'productdetails/:id',
component: ProductdetailsComponent
}

3. add the below code in [Link]


<button class="btn btn-primary" [routerLink]="['/productdetails', [Link]]">
View Details</button>

4. add the below code in [Link]


constructor(private route: ActivatedRoute)
{
}
ngOnInit() {
[Link](params => {
[Link] = +params['id']; // (+) converts string 'id' to a number
// In a real app: make Http call to get the details
});
}

5. add the below code in [Link]


<h1>This is details for product- {{id}}

program-63 : Query-param example


--------------------------------
1. add the below code in [Link]
{
path: 'productdetails',
component: ProductdetailsComponent
}

2. add the below code in [Link]


<button class="btn btn-primary" [routerLink]="['/productdetails']"
[queryParams]="{id:[Link],name:[Link],price:[Link]}">
View Details</button>

3. add the below code in [Link]


constructor(public activatedRoute: ActivatedRoute) {
}
ngOnInit(){
[Link]((queryparams) => {
[Link](queryparams);
[Link] = queryparams;
});
}

Program-64 Router Guard


-----------------------
@Injectable()
export class myGuard implements CanActivate {
userRole = 'admin';

canActivate() {
if ([Link] == 'admin') {
return true;
}
else {
alert("you are not allowed to visit this route");
return false;
}
}
}
----------------
{
path: 'product-details',
component: ProductDetailsComponent,
canActivate: [myGuard]
},

program-65 : Route resolver Example


-----------------------------------
1. create ProductService and add the below code

import { HttpClient } from '@angular/common/http';


import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class ProductService {
url = '[Link]
constructor(public http: HttpClient) {}
getProducts() {
return [Link]([Link]);
}
}

2. create ProductResolverService and add the below code

import { Injectable } from '@angular/core';


import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
import { catchError, of } from 'rxjs';
import { ProductService } from './[Link]';
@Injectable({
providedIn: 'root',
})
export class ProductResolverService implements Resolve<any> {
constructor(private productService: ProductService) {}
resolve(route: ActivatedRouteSnapshot) {
[Link]('Called Get Product in resolver...', route);
return [Link]().pipe(
catchError((error) => {
return of('No data');
})
);
}
}
3. add the below code in [Link]
{
path: 'products',
component: ProductsComponent,
canActivate: [MyGuard],
resolve: { products: ProductResolverService },
}
4. Add the below code in [Link]

allProducts: any = [];


constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit(): void {
[Link]((response: any) => {
[Link] = [Link];
});
}
Program-66: jasmine karma
--------------------------
import { JasmineComponent } from './[Link]';

describe('I am testing Jasmine component', () => {


var obj = new JasmineComponent();

it('I am testing add method', () => {


expect([Link](2, 3)).toBe(5);
})
it('I am testing sub method', () => {
expect([Link](2, 3)).toBe(-1);
})
it('I am testing even method', () => {
expect([Link](8)).toBe(true);
expect([Link](3)).toBe(false);
})
it('I am testing odd method', () => {
expect([Link](8)).toBe(false);
expect([Link](13)).toBe(true);
})
})
****************
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-jasmine',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class JasmineComponent implements OnInit {

constructor() { }

ngOnInit() {
}

public add(a, b) {
return a + b;
}
public sub(a, b) {
return a - b;
}
public isNumberEven(num){
return num%2 === 0;
}
public isNumberOdd(num){
return num%2 !== 0;
}
}

Program:67 ToDo App using NgRx


==============================
1. Install NgRx Store in the project
ng add @ngrx/store
(OR)
ng add @ngrx/store@latest
(OR)
ng add @ngrx/store@14

2. Create Folders & Files manually for store , actions, reducers and components
store-->[Link]
actions-->[Link]
reducers-->[Link]
components--> todoList , addTodo (ng g c todolist, ng g c addtodo)

3. Add below Reducer Code in [Link]

const initialState = [
{ id: 1, text: 'ToDo 1', isCompleted: true },
{ id: 2, text: 'ToDo 2', isCompleted: false },
];
function todosReducer(state = initialState, action: any): any {
switch ([Link]) {
case 'ADD_TODO': {
const newToDo = {
id: [Link] + 1,
text: [Link],
isCompleted: false,
};
return [...state, newToDo];
}
case 'TOGGLE_TODO': {
return [Link]((todo) => {
return [Link] !== [Link]
? todo
: [Link]({}, todo, { isCompleted: ![Link] });
});
}
case 'DELETE_TODO': {
return [Link]((todo) => {
return [Link] !== [Link];
});
}
default: {
return state;
}
}
}
export const rootReducer = {
todosReducer
};

4. create Store using the Reducer ([Link])


import { StoreModule } from '@ngrx/store';
import { rootReducer } from '../reducers/reducers';
export const myStore = [Link](rootReducer);

5. Provide the store to a module ([Link])


import { myStore } from './store/store';
imports: [BrowserModule, myStore]
6. add action-creator code in [Link]
export function addTodo(text: string) {
return {
type: 'ADD_TODO',
payload: { text },
};
}
export function deleteTodo(id: number) {
return {
type: 'DELETE_TODO',
payload: { id },
};
}
export function toggleToDo(id: number) {
return {
type: 'TOGGLE_TODO',
payload: { id },
};
}

7. todo-list [Link]
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { deleteTodo, toggleToDo } from '../actions/actions';
@Component({
selector: 'app-todolist',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class TodolistComponent implements OnInit {
allToDos: any;
constructor(private store: Store) {}
ngOnInit(): void {
[Link]((state: any) => {
[Link]('state', state);
[Link] = [Link];
});
}
deleteMyTodo(id: number) {
const actionObj = deleteTodo(id);
[Link](actionObj);
}
toggleMyTodo(id: number) {
const actionObj = toggleToDo(id);
[Link](actionObj);
}
}

8. [Link]
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { addTodo } from '../actions/actions';
@Component({
selector: 'app-add-todo',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
})
export class AddTodoComponent implements OnInit {
constructor(private store: Store) {}
ngOnInit(): void {}
addNewTodo(text: string) {
const actionObj = addTodo(text); // action creator
[Link](actionObj);
}
}

9. in [Link] add the below code


<app-todolist></app-todolist>
<app-add-todo></app-add-todo>

You might also like