Passing value from typescript to routerlink

Question

I have a property in my typescript file

subject.component.ts

subject: string; 
this.subject = "angular";

I want to pass this to my routerlink in my HTML file

subject.component.html

[routerLink]="[subject,'area']"

app.routes.ts

  path: 'angular',
  component: SubjectComponent,
  children: [
    {
      path: 'area',
      component: AreaComponent,
      data: { subject: 'angular' }
    }
  path: 'angular2',
  component: SubjectComponent,
  children: [
    {
      path: 'area',
      component: AreaComponent,
      data: { subject: 'angular2' }
    }

but I am having problems as it is not resolving out. The page requested is not being returned. I am re-directed to home-screen

the page requested is not being returned. I am re-directed to homescreen. — OneXer, Aug 27 '18 at 08:49
as you not assign anything to subject property.. so it will return undefined — Aniket Avhad, Aug 27 '18 at 08:58
You didn't declare a route that can handle this path. Please provide your routing. — , Aug 27 '18 at 09:20

score 0 · Answer 1 · answered Aug 27 '18 at 09:03

0

You can set query params and fragment as follows:

// subject = 'sss' ; set in your component otherwise it wont be added.

<a [routerLink]="['/user/bob']" [queryParams]="{sub: subject }" fragment="education"></a>

answered Aug 27 '18 at 09:03

Pramod Patil

2,704
2
14
20

score 0 · Answer 2 · answered Aug 27 '18 at 09:22

see the Stackblitz demo

compare this code and figure it out what you did wrong

i have added in app.component.html is

<router-outlet></router-outlet>

<a [routerLink]="[subject,'area']"> Redirect</a>

in app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  subject:string;

  ngOnInit(){
     this.subject = 'test';
  }
}

and in app.module.ts

const routes: Routes = [
  { path: 'test/area', component: HelloComponent }
]

@NgModule({
  imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

score 0 · Answer 3 · answered Aug 27 '18 at 16:14

0

the problem I was having was related to the relative path of the link I was trying to access. The change I made was to add a leading forward slash

subject.component.html

[routerLink]="['/',subject,'area']"

answered Aug 27 '18 at 16:14

OneXer

303
9
20

Passing value from typescript to routerlink

3 Answers3