Cacher is the code snippet organizer for pro developers

import { NgModule }       from '@angular/core';
import { AppRoutingModule }     from './app-routing.module';
@NgModule({
    imports: [
        AppRoutingModule
    ],
    declarations: [
    ],
    providers: [  ],
    bootstrap: [  ]
})
export class AppModule { }

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';

const routes: Routes = [
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    { path: 'dashboard',  component: DashboardComponent },
    { path: 'detail/:id', component: HeroDetailComponent },
    { path: 'heroes',     component: HeroesComponent }
];
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

actualiza parametros al navegar

constructor(private route:ActivatedRoute) {
    console.log(this.route.snapshot.params['id'])
}
ngOnInit():void {
    
}

actualizar desde dentro del componente

export class PolicyDetailComponent implements OnInit {
    private idPolicy:number;
    private policy:Policy = null;
    constructor(
        private policyService:PolicyService,
        private route:ActivatedRoute
    ) {
    }

    ngOnInit():void {
        this.route.params.subscribe(params => {
            this.idPolicy = params['id']

            this.policyService.getPolicy(this.idPolicy)
                .then( policy => this.policy = policy )
        })
    }

}

####select options

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

NOTE: you can use [ngValue]="c" instead of [ngValue]="c.id" where c is the complete country object.

[value]="..." only supports string values

[ngValue]="..." supports any type

Pasar dato por input

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

export class HeroDetailComponent implements OnInit {
    @Input()
    hero: Hero;
}

Resaltar seleccionado

<li *ngFor="let hero of heroes"
    (click)="onSelect(hero)"
    [class.selected]="hero === selectedHero">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

export class AppComponent {
    selectedHero: Hero;
    onSelect(hero: Hero): void {
        this.selectedHero = hero;
    }
}

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

Obtener respuesta sincronadata

import { Hero } from './hero';

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

service

import { Hero } from './hero';
import { HEROES } from './mock-heroes';

export class HeroService {

    constructor() {
    }

    getHeroes(): Hero[] {
        return HEROES;
    }
}

component

import { HeroService } from './hero.service';

export class AppComponent {
    heroes;
    
    constructor(private heroService: HeroService) { }

    ngOnInit(): void {
        this.getHeroes();
    }

    getHeroes(): void {
        this.heroes = this.heroService.getHeroes();
    }
}

Promesas

getHeroes(): Promise<Hero[]> {
  return Promise.resolve(HEROES);
}

getHeroes(): void {
  this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes);
}

####enrutar

import { Router } from '@angular/router';

constructor(private router: Router) { }

gotoDetail(): void {
  this.router.navigate(['/detail', this.selectedHero.id]);
  }
}

<a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"">