Passing string to another component Angular

Question

I have a list with a lot of equipments. Each equipment has a button called "Detalhes". If I click in this button, I want to show just the info about that specific equipment (passing serialnumber, for example). How can I pass the serial number after switch between component?

Here's my html for the first page:

<div *ngFor="let equipment of equipments" class="card small card-small">
    <p>{{ equipment.equipmentName }}</p>
    <div class="container">
      <div class="card-content">
        {{ equipment.serialnumber }}
        <p>
          <a href="/equipDetail">Detalhes</a>
        </p>
        <p>
          <a (click)="open(modalcontent, equipment)">Editar</a>
        </p>
      </div>
    </div>
  </div>

/equipDetail is the component that I want to show, after user click. This component should have all the data about the equipment, I can get this data with http calls if I get the serialnumber first.

Amir Arbabian · Accepted Answer · 2019-02-25 20:20:30Z

2

I assume you use angular routing, so you can just define router parameter like (let's suppose that your details component is called DetailsComponent):

Router config

....
{ path: 'equipDetail/:serialNum', component: DetailsComponent }
....

You can set redirection parameter in html using <a> like:

Link

....
<a [routerLink]="['/equipDetail', equipment.serialnumber]">Detalhes</a>
....

And you can read it in DetailsComponent like:

Parameter usage

....
constructor(private route: ActivatedRoute) {}
....
ngOnInit() {
   this.sub = this.route.params.subscribe(params => {
       const serialNum = params['serialNum'];
       // here you can use var serialNum to make a request to fetch data
   });
}

Hope that helps.

answered Feb 25, 2019 at 20:20

Amir Arbabian

3,7092 gold badges9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matheus Bernardi Over a year ago

Perfect! Works like a charm.

Amir Arbabian Over a year ago

Sure. I'm glad that it helped.

Collectives™ on Stack Overflow

Passing string to another component Angular

1 Answer 1

Router config

Link

Parameter usage

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Router config

Link

Parameter usage

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related