CODEWITHSUNDEEP
angularangular6angular7
nightingale2k1
nightingale2k1

Reputation: 10315

Passing Routerlink to child component

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>

Upvotes: 2

Views: 2827

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39432

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>

Upvotes: 1

Roman Skydan
Roman Skydan

Reputation: 5748

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

Upvotes: 0

Related Questions