Wednesday, 26 September 2018

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;
constructor(private route: ActivatedRoute) { }

ngOnInit() {
   this.route.params.subscribe((params) => {
   this.id = 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
<h3>Interpolation</h3>
<p>{{company}}, {{name}}</p>

<h3>Property Binding</h3>
<a [href]="url">Website</a>
<input type="text" [value]="name"/>

<h3>Event Binding</h3>
<button type="button" (click)="Greet()">Greet</button>

<h3>Two Way data binding</h3>
<input type="text" [(ngModel)]="name"/>

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);
  }
}


0 comments:

Post a Comment

Topics

ADO .Net (2) Ajax (1) Angular Js (17) Angular2 (24) ASP .Net (14) Azure (1) Breeze.js (1) C# (49) CloudComputing (1) CMS (1) CSS (2) Design_Pattern (3) DI (3) Dotnet (21) Entity Framework (3) ExpressJS (4) Html (3) IIS (1) Javascript (6) Jquery (9) Lamda (3) Linq (11) Mongodb (1) MVC (48) NodeJS (7) RDLC (1) Report (1) Sql Server (29) SSIS (3) SSRS (2) UI (1) WCF (12) Web Api (9) Web Service (1) XMl (1)