Q: How to get data from url in Angular
http://localhost:4200/about/7
databinding.component.ts
Angular attribute binding
Angular class binding: https://www.youtube.com/
Angular style binding: https://www.youtube.com/
Q: Directive (If, If-else, loop, switch-case)
dir.component.ts
Output:
Parent Component html
http://localhost:4200/about/7
const routes: Routes = [
{ path: '', component: DatabindingComponent },
{ path: 'about/:id', component: AboutComponent },
{ path: 'notfound', component: NotfoundComponent },
{ path: '**', redirectTo: 'notfound' }
];
export class AboutComponent implements OnInit {
id: string; id2: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe((params) => {
this.id = params.id;
this.id2 = this.route.snapshot.params.id;
});
}
Q: Data
Binding in Angular
databinding.component.ts
export class DatabindingComponent implements OnInit {
company: string;
url: string;
name:string;
constructor() {}
ngOnInit() {
this.company = 'Dot Net Guru';
this.url = 'http://www.dotnetguru.in';
this.name='Suraj';
}
Greet() {
console.log(this.name);
alert('Hi from Angular!');
}
}
databinding.component.htm
//Interpolation
<p>{{company}}, {{name}}</p>
<img src='{{imagePath}}'/>
//Property Binding
<a [href]="url">Website</a>
<img [src]='imagePath'/>
<input type="text" [value]="name"/>
//Event Binding
<button type="button" (click)="Greet()">Greet</button>
//Two Way data binding
<input type="text" [(ngModel)]="name"/
Angular attribute binding
<tr><th [attr.colspan]="columnSpan">Employee Details</th></tr>
Angular class binding: https://www.youtube.com/
Angular style binding: https://www.youtube.com/
Q: Directive (If, If-else, loop, switch-case)
dir.component.ts
export class DirComponent implements OnInit {
num: number;
alphabet:string;
colors=['red','blue','green'];
constructor() {}
ngOnInit() {
this.num = 1;
}
}
dir.component.html
<p>
<input type="number" [(ngModel)]="num" />
</p>
<h3>ngIf</h3>
<div *ngIf="num%2==0">
Even Number
</div>
<div *ngIf="num%2>0">
Odd Number
</div>
<h3>ngIf..else</h3>
<div *ngIf="num%2==0 then divif; else divelse"></div>
<ng-template #divif>Even Number</ng-template>
<ng-template #divelse>Odd Number</ng-template>
<h3>ngSwitch</h3>
<p>
<input type="text" [(ngModel)]="alphabet" />
</p>
<div [ngSwitch]="alphabet">
<div *ngSwitchCase="'a'">Vowel</div>
<div *ngSwitchCase="'e'">Vowel</div>
<div *ngSwitchCase="'i'">Vowel</div>
<div *ngSwitchCase="'o'">Vowel</div>
<div *ngSwitchCase="'u'">Vowel</div>
<div *ngSwitchDefault>Not Vowel</div>
</div>
<h3>Loop</h3>
<ul>
<li *ngFor="let item of colors; let i=index">
{{i+1}} {{item}}
</li>
</ul>
Q: Pipe
<tr *ngFor="let item of emp | orderBy: 'name' : true" >
<td>{{item.name | uppercase}}</td>
<td>{{item.address | lowercase | reverse}}</td>
<td>{{item.joining | date:'dd/MM/yyyy'}}</td>
<td>{{item.salary | currency:'INR'}}</td>
</tr>
Q: Access data
from parent to child component
Parent Component
Parent Component
@Component({
selector: 'app-master',
templateUrl: './master.component.html',
styles: []
})
export class MasterComponent implements OnInit {
company: string;
constructor() {
this.company = 'Dot Net Tricks';
}
ngOnInit() {}
}
Parnet Component html
<app-details [companyName]="company"></app-details>
Child Component
import { Component, OnInit, Input, Output} from '@angular/core';
@Component({
selector: 'app-details',
templateUrl: './details.component.html',
styles: []
})
export class DetailsComponent implements OnInit {
@Input() companyName: string;
constructor() { }
ngOnInit() {}
}
Child Component html
<p>{{companyName}}</p>
Q: Access data from child to parent component
Child Component html
Child Component html
<button type="button" (click)="SendMessage()">Send Msg</button>
Child Component
import {Component,OnInit,Output,EventEmitter} from '@angular/core';
@Component({
selector: 'app-details',
templateUrl: './details.component.html',
styles: []
})
export class DetailsComponent implements OnInit {
@Output() sendMsg: EventEmitter<string>=new EventEmitter<string>();
constructor() {}
ngOnInit() {}
SendMessage() {
this.sendMsg.emit('Message from Child');
}
}
Parent Component html
<h2>Parent Component : {{msg}}</h2>
<app-details [companyName]="company" (sendMsg)="ReceivedMsg($event)"></app-details>
Parent Component
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-master',
templateUrl: './master.component.html',
styles: []
})
export class MasterComponent implements OnInit {
msg: string;
constructor() {}
ngOnInit() {}
ReceivedMsg(msg: string) {
this.msg = msg;
alert(msg);
}
}
Q: What is the equivalent of ngShow and ngHide in Angular?
Just bind to the hidden property.
[hidden]="!myVar"
*ngIf vs [hidden]
*ngIf effectively removes its content from the DOM while [hidden] modifies the display property and only instructs the browser to not show the content but the DOM still contains it.