I have a route like this

   path: 'projects/:id/settings'

And in my headerponent.html I want to have a link to this page

<a routerLink="['projects', progectId,'settings']" routerLinkActive="active">cool link</a>

I have a projectponent, where when I click on some project I go on the project page. And then I need have a possibility go to projects/:id/settings or another similar route.

How can I pass progectId variable from projectsponent?
Or maybe somebody knows another way to implement this.

I have a route like this

   path: 'projects/:id/settings'

And in my header.ponent.html I want to have a link to this page

<a routerLink="['projects', progectId,'settings']" routerLinkActive="active">cool link</a>

I have a project.ponent, where when I click on some project I go on the project page. And then I need have a possibility go to projects/:id/settings or another similar route.

How can I pass progectId variable from projects.ponent?
Or maybe somebody knows another way to implement this.

• javascript
• angular
• angular2-template

2 Answers 2

I had the same issue for this kind of route you should use routerLink like this:

<a routerLink="/projects/{{progectId}}/settings" routerLinkActive="active">cool link</a>

and change your route path in routing module like this:

{ path: ':id/settings', ponent: YourComponent}

for additional information to get projectId you should follow these step:

1. Inject ActivatedRoute object in your ponent constructor.
2. Define a variable called projectId in your ponent.
3. Get params by activatedRoute object in ngOnInit() method.

4. Finally you should get projectId in your html like this: {{projectId}}

   import {Router, ActivatedRoute, Params} from '@angular/router';
   
   @Component({
     selector: 'app-your-ponent',
     templateUrl: './your-ponent.ponent.html',
     styleUrls: ['./your-ponent.ponent.css']
   })
   
   export class YourComponent implements OnInit {
   
     private projectId: string;
   
     constructor(private activatedRoute: ActivatedRoute) {}
   
     ngOnInit() {
        this.activatedRoute.params.subscribe((params: Params) => {
        this.projectId = params['id'];
     });
    }}
   

I generally do this in the ponent class like this

somefunctionName() {
    let link = ['/summary', this.param1, this.param2];
    this.router.navigate(link);
}

And then call the function from the html code like this

<a (click)="somefunctionName()">

In your case since I am assuming you are looping through your projects you could call your function with a parameter like this

<a (click)="somefunctionName(pass the parameter here)">

Then change the function definition to reflect this.