Angular - Passing object to @Input parameter with routerlink

Question

I have an angular component with a @Input parameter as follows.

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {

  @Input() theRecord: Record = null;

  constructor(private _transmissionHistoryService: TransmissionHistoryService) { }
}

In another component I have this in the markup:

<app-transmission-history [theRecord]="selectedRecord"></app-transmission-history>

Perfect. Everything works as expected.

I need to move the app-transmission-history component to a stand alone page. Now I need to access it with routerLink as follows:

<a routerLink='/transmissionHistory'>{{selectedRecord.Name}}</a>

I can't figure out how to set the @Input parameter in the routerlink in the markup. The value I need to set it to is selectedRecord, which I have access to.

I could make changes to the app-transmission-history component to receive the parameter another way. However, it does not seem flexible if I have to change the implementation based on how we get to it.

score 18 · Answer 1 · edited Aug 17 '19 at 03:34

Use query parameter to pass object after converting to json string.

<a [routerLink]="['/transmissionHistory']"
   [queryParams]="{record:selectedRecord | json }">
    {{selectedRecord.Name}}
</a>

In your component you can do something like this to read params:

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {
  theRecord: Record = null;

  constructor(
      private _transmissionHistoryService: TransmissionHistoryService,
      private _route: ActivatedRoute

   ) { }

   ngOnInit() {
      this._route.params.subscribe(params => {
          this.theRecord = JSON.parse(params.record) as Record;
      });
   }
}

And router config will look like as:

{ path: 'transmissionHistory', component: TransmissionHistoryComponent }

In Angular 8 I had to use queryParamMap to make it work. – beat May 27 '20 at 13:01 — beat, May 27 '20 at 13:01

score 6 · Answer 2 · edited Apr 25 '18 at 21:21

6

Please take a look at router parameters. You can pass you param like this:

<a [routerLink]="['/transmissionHistory', selectedRecord]">{{selectedRecord.Name}}</a>

Than in you component you can retrive it like this:

@Component({
  selector: 'app-transmission-history'
})
export class TransmissionHistoryComponent implements OnInit {
  theRecord: Record = null;

  constructor(
      private _transmissionHistoryService: TransmissionHistoryService,
      private _route: ActivatedRoute

   ) { }

   ngOnInit() {
      this._route.params.subscribe(params => {
          this.theRecord = params['record'];
      });
   }
}

Remember to setup this parameter in your router config:

{ path: 'transmissionHistory/:record', component: TransmissionHistoryComponent }

edited Apr 25 '18 at 21:21

Stefan Falk

23,898
50
191
378

answered Dec 15 '17 at 16:25

Baumi

1,745
1
17
31

This changes my implementation. The component is used elsewhere using the @Input parameter. Do I have to support both based on how they get here? – Don Chambers Dec 15 '17 at 16:44
I guess you can but I never tried that myself. Just try! – Baumi Dec 15 '17 at 16:48
As far as I know there is no way to pass in the `@Input` parameter as part of the routing. `@Input` is *only* for communication between a parent component and a child component. Routing to the component does not establish that parent/child relationship. – DeborahK Dec 16 '17 at 00:24
Not working for me. I don't see how this would work for objects.. can you elaborate? – Stefan Falk Apr 25 '18 at 21:27
this is for passing path params for passing object we need to go for query params – Akshay Gaikwad Mar 05 '20 at 09:23

score 0 · Answer 3 · answered Aug 02 '21 at 18:15

0

How to pass data between routed components in Angular

answered Aug 02 '21 at 18:15

dSd

139
1
3

score 0 · Answer 4 · answered Jun 29 '22 at 05:42

In Angular 8 (and above) you have to call to queryParams.

constructor(
    private route: ActivatedRoute,
  ) {}

  ngOnInit() {
    this.route.queryParams.subscribe((params) => {
      const userId = params['userId'];
      console.log(userId);
    });
  }

score 0 · Answer 5 · answered Oct 21 '22 at 11:34

Using Angular 13, I've found there's a much easier approach.

Hope this helps everyone! ~Jedi

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

@Component({
    selector: 'custom-component',
    templateUrl: './custom-component.component.html',
    styleUrls: ['./custom-component.component.scss'],
})
export class YourClass {
    @Input() buttonText!: string; // * Component receives text to display as input
    @Input() routerLinkText!: string; // * component receives router link as text

...

}

<!-- From the calling component -->
<custom-component
  [buttonText]="'Customize'"
  [routerLinkText]="['pathAsText']">
</custom-component>

<!-- Then in your custom-component -->

<a href="#" class="btn btn-primary" [routerLink]="routerLinkText"> {{buttonText}} </a>

Angular - Passing object to @Input parameter with routerlink

5 Answers5

Linked