CODEWITHSUNDEEP
angularurl-routing
Gurkenkönig
Gurkenkönig

Reputation: 828

@Input with router.navigate angular4

How do you pass a value to @Input via router.navigate in an angular 4 environment? Inline works fine:

<app-clinicdetail [clinicCode]="detailclinic"></app-clinicdetail>

but what I want is 

this.router.navigate(['/clinicdetail'])

with value passing.

Upvotes: 3

Views: 6938

Answers (1)

Kirill
Kirill

Reputation: 6026

Here is a way how you can pass params using navigate to the component loading by the route.

The way Angular 4 creates URL and routes is something like this:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onLoadServers(id: number){
    this.router.navigate(['/servers', id, 'edit'],{queryParams: {allowEdit: '1'}, fragment: 'loading'});
  }

}

Due to the command navigate in onLoadServers() you will receive the following view of the route:

http://localhost:4200/servers/1/edit?allowEdit=1#loading

In the component loading by this route you can receive the query params and the fragment(loading - in this case) with:

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  console.log(this.route.snapshot.queryParams);//{allowEdit:"1"}
  console.log(this.route.snapshot.fragment);//loading
}

Upvotes: 1

Related Questions