Passing Routerlink to child component

2
votes

I create a component in my shared module, it is header component so in all of my components I want to call this.

In my shared component, let call it app-header component, I want to accept input Title: string, buttonName: string and buttonLink: any (since I am confused) my component:

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

@Component({
  selector: 'app-app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.less']
})
export class AppHeaderComponent implements OnInit {
    @Input() title: string;
    @Input() buttonName: string; 
    @Input() buttonLink: any;

  constructor() { }

  ngOnInit() {
  }

}

my app.header.html

<div class='row border-bottom my-4 align-middle apptitle'>
    <div class="col-8 my-2">
      <div>
        <h3> {{title}}</h3>
      </div>
    </div>
    <div class="col-4 my-2 text-right">
      <button class="btn btn-primary pull-right" [routerLink]={{buttonLink}}>{{buttonName}}</button>
    </div>
  </div>

I pass use this component in my other component :

my shared module: 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared.component';
import { AppHeaderComponent } from './app-header/app-header.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  providers: [],
  declarations: [
      SharedComponent, 
    AppHeaderComponent],
  exports:[
      AppHeaderComponent,
  ]
})
export class SharedModule { }

My problem is I don't know how to pass the link so the routerlink will work. Any idea how to pass the link / router link in proper way ? the routes belong to the component's module who call it.

I have many lazy loaded modules which will use this shared component. So I guess the route should be able to redirect/call link from its caller component module.

Edited: add more information

Shared Module : AppHeaderComponent (this has no Routes)

AdminModule: AdminComponent -> call AppHeaderComponent inside (AdminModule has Routes)

UserMoudule: UserComponent -> call AppHeaderComponent inside (UserModule has Routes)

I need AppHeaderComponent to link to correct routeLink.

Example: in UserComponent:

<app-app-header
    [title]= "'Users'"
    [buttonName]="'Create New'"
    [buttonLink]="['/user/create']"
></app-app-header>
2
angularangular6angular7
Are you going to have just one link in your HeaderComponent? Or is this HeaderLinkComponent that you're trying to create here? And you want to create multiple of these using the HeaderComponent itself? - SiddAjmera
Please also add the implementation of how exactly are you using the AppHeaderComponent in the template. - SiddAjmera
I add the usage above. User in UserModule, while AppHeaderComponent in SharedModule. - nightingale2k1

2 Answers

0
votes

I think you need a little bit change your code. You need to pass your link by using another construction. [routerLink]="buttonLink".

More about template expression and interpolation you can read on official documentation of angular

0
votes

To make routing work in your SharedModule, you'll also have to add the RouterModule to your imports array.

...
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  ...
})
export class SharedModule {}

Also, in your HeaderComponent, you'll need to fix the routerLink assignment:

...
<button 
  class="btn btn-primary pull-right" 
  [routerLink]="buttonLink">
  {{buttonName}}
</button>
...

And you should be using this component like this(WITHOUT []):

<app-app-header 
  [title]="'Organisations'" 
  [buttonName]="'Create New'" 
  [buttonLink]="'/admin/user/create'">
</app-app-header>