Angular Code Questions

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.