CODEWITHSUNDEEP
angularangular5angular6
Miguel Moura
Miguel Moura

Reputation: 39454

Pass parameter to component

I have the following Angular 6 component:

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

@Component({
  selector: 'app-site-layout',
  templateUrl: './site-layout.component.html'
})

export class SiteLayoutComponent implements OnInit {

  @Input() version: string;

}

And I have the following route definition:

const appRoutes: Routes = [

  { 
    path: '', 
    component: SiteLayoutComponent,
    children: [
      { path: 'about', component: AboutComponent },
      { path: 'team', component: TeamComponent }
    ]
  }

  // Other routes

]

Is it possible to pass a version value in:

{ path: 'about', component: AboutComponent }

I am using SiteLayoutComponent as a "master page" for other pages.

SiteLayoutComponent has small differences according to a version value.

For example, AboutComponent might need to use version 1 of SiteLayoutComponent and TeamComponent might use version 2 of SiteLayoutComponent and TeamComponent.

Does this make sense?

Update

I created and online example:

http://stackblitz.com/edit/angular-rxxfff

When "Team" is clicked it should appear "Layout Component 1.0" but appears "Layout Component".

What am I missing?

Upvotes: 1

Views: 123

Answers (2)

Jameel Moideen
Jameel Moideen

Reputation: 7931

You can keep the version as data on your child route like this

{ 
    path: '', 
    component: SiteLayoutComponent,
    children: [
      { path: 'about', component: AboutComponent,data: { version: "1.0" } },
      { path: 'team', component: TeamComponent,data: { version: "2.0" } }
    ]
  }

You can access the same by using ActivateRoute from your parent component(SiteLayoutComponent) and do the changes based on the version

constructor(
    private route: ActivatedRoute,

  ) {}


var version= this.route.snapshot.firstChild.data["version"]

Useful link

How can I access an activated child route's data from the parent route's component?

Upvotes: 1

VithuBati
VithuBati

Reputation: 1928

follow this 

{ path: 'about/:version', component: AboutComponent }

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

export class SiteLayoutComponent implements OnInit {

version: string;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
    if (params.hasOwnProperty('pid') && params['pid'] != ''{
     this.version = params['version']; 
    }

  });
}

Upvotes: 0

Related Questions