Pass parameter to component

Question

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?

I have posted an answer , I am not sure this is you are exactly looking for — Jameel Moideen, Sep 20 '18 at 17:56
Could you please refresh , I have deleted and reposted again — Jameel Moideen, Sep 20 '18 at 18:07

Jameel Moideen · Accepted Answer · 2018-09-20T17:55:20.880

1

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?

edited Sep 20 '18 at 17:55

answered Sep 20 '18 at 17:38

Jameel Moideen

7,542
12
51
79

I created an online example with your suggestion: https://stackblitz.com/edit/angular-rxxfff ... When you click on "Team" it should appear "Layout Component 1.0" but appears only "Layout Component". What am I missing? – Miguel Moura Sep 20 '18 at 19:00
@MiguelMoura it's because you are returning the version in to a variable , so angular assume it as a private and could't access in to the html. Instead create a property. see the update stack blitz https://stackblitz.com/edit/angular-a3kfnb?file=src/app/layout.component.ts – Jameel Moideen Sep 20 '18 at 19:17
@MiguelMoura Did you checked the updated stackblitz?? – Jameel Moideen Sep 20 '18 at 19:53
Yes, I checked it. Thank you – Miguel Moura Sep 20 '18 at 20:16

score 0 · Answer 2 · answered Sep 20 '18 at 17:28

0

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']; 
    }

  });
}

answered Sep 20 '18 at 17:28

VithuBati

1,918
1
18
26

I don't want the parameter to be in the about route. I mean, what I need is to set which version of the SiteComponentLayout is used by the AboutComponentLayout. And it will be always the same. – Miguel Moura Sep 20 '18 at 17:30
I added an update with an online example. It is almost working. Only the parameter value is not being displayed. What am I missing? – Miguel Moura Sep 20 '18 at 19:15

Pass parameter to component

2 Answers2