Ng4-ViewChild - Show ratio button based on condition using ViewChild

Ng4-ViewChild - Show ratio button based on condition using ViewChild
=======================================================
<input id="EXCEL" name="EXCEL" value="EXCEL" type="radio" #radioCheckedExcel/>

import { Component, Output,OnInit,Input, EventEmitter, ViewChild, ElementRef } from '@angular/core';

export class NewReportsComponent implements OnInit {

  @ViewChild('radioCheckedExcel') private radioCheckedExcel: ElementRef;
 
 
  EventTriggerFunciton(){
  this.radioCheckedExcel.nativeElement.checked = true;
  }
 
  ResetRatioButton(){
  this.radioCheckedExcel.nativeElement.checked = false;
  }

NG5-PostApplicaotinJSONToformData

NG5-PostApplicaotinJSONToformData
----------------------------------------------
Send the post data as Form data based
i.e => key1=val1&key2=val2..... from Object(json type)
Application type to form data type


component.ts
--------------
let data = {
    "key1":"val1",
    "key2":val2",
    "key3":"val3"
}
let PostObj = this.toParams(data)
  this._MyService.CreatePost(PostObj).subscribe( (data:any) => {
    try{
    }
    catch(e){
    }
});
           
 toParams(evtObj) {
    var p = [];
    for (var key in evtObj) {
        p.push(key + '=' + encodeURIComponent(evtObj[key]));
    }
    return p.join('&');
}

NG5- InMemoryWebApiModule - local DB

ng5- InMemoryWebApiModule
-------------------------------------
app.module.ts
-----------------

import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

@NgModule({
  imports: [
  ....
  .....
 
    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
    // and returns simulated server responses.
    // Remove it when a real server is ready to receive requests.
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false }
    )
  ],
  declarations: [
  AppComponent
  ],providers: [ HeroService, MessageService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

in-memory-data.service.ts
---------------------------
import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' }
      ]
     return {heroes};
  }
}
mock-heroes.ts
---------------

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' } 
];

hero.ts
--------
export class Hero {
  id: number;
  name: string;
}


hero.service.ts
----------------
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';

import { Hero } from './hero';
const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class HeroService {
  private heroesUrl = 'api/heroes';  // URL to web api

  constructor(
    private http: HttpClient,
    private messageService: MessageService) { }

  /** GET heroes from the server */
  getHeroes (): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        tap(heroes => this.log(`fetched heroes`)),
        catchError(this.handleError('getHeroes', []))
      );
  }
 
 
dashboard.component.ts
----------------------
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes.slice(1, 5));
  }
 }

dashboar.template.ts
---------------------
 <a *ngFor="let hero of heroes" class="col-1-4"
      routerLink="/detail/{{hero.id}}">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </a>

NG4- ngIf, else, ngIf then,else using ng-tempalte

NG4- ngIf, else, ngIf then,else using ng-tempalte
-------------------------------------------------------------
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'else-cmp',
  template: `
    <button (click)="isValid = !isValid">update</button>
 
    <div *ngIf="isValid;else other_content">
       content here ...
    </div>

    <ng-template #other_content>other content here...</ng-template>

  `,
})
export class ElseComponent {
  isValid:boolean = true;
  constructor() {
  }
 
}



@Component({
  selector: 'else-then-cmp',
  template: `
      <button (click)="isValid = !isValid">update</button>

       <div *ngIf="isValid;then content else other_content"></div>
     
       <ng-template #content>content here...</ng-template>
       <ng-template #other_content>other content here...</ng-template>

  `,
})
export class ElseThenComponent {
  isValid:boolean = true;
  constructor() {
  }
 
}




@Component({
  selector: 'my-app',
  template: `
    <h4>Using else :</h4>
    <br>
    <else-cmp></else-cmp>
    <br>
    <br>
    <h4>Using else then:</h4>
    <br>
    <else-then-cmp></else-then-cmp>
  `,
})
export class App {
  isValid:boolean = true;
  constructor() {
  }
 
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , ElseComponent,ElseThenComponent],
  bootstrap: [ App ]
})
export class AppModule {}

Ref: https://plnkr.co/edit/XD5vLvmwTApcaHJ66Is1?p=preview