Angular Code Questions ~ Dotnet Guru ~

Q: How to get data from url in Angular
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>

Output:

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

@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

<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.