get data in component angular 6

Question

Hi I am new angular6 how can I get data to component, I have fetched data from api in incident.component.ts now I have a button called view details in incident.component.html when clicked the view detail button it will navigate to incident-detail component using router.navigate, now along with this I want send data which is in incident component.ts to incident-detail component.

incident.component.html

<div class="card" *ngFor="let incident of incidents; let i = index"> 
<button class="btn btn-sm btn-link" 
(click)="onLoadActive(incident)">View in Detail</button>
</div>
</div>

incident.component.ts

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { Incidents } from '../../shared/models/incidents.model';
    import { DataStorageService } from '../../shared/services/data-storage.service';

    @Component({
    selector: 'app-active-incident',
    templateUrl: './active-incident.component.html',
    styleUrls: ['./active-incident.component.css']
    })
   export class ActiveIncidentComponent implements OnInit {
   detailData: any;

   onLoadActive(incident) {
   // some logic
   this.detailData = incident;
   this.router.navigate(['/active-detail']);
   }
   }

incident-detail.component.ts

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

@Component({
selector: 'app-active-incident-detail',
templateUrl: './active-incident-detail.component.html',
styleUrls: ['./active-incident-detail.component.css']
})
export class ActiveIncidentDetailComponent implements OnInit {

constructor() { }

ngOnInit() {
// want to get **detailData** here
}
}

Answer 1

There are distinguish ways to pass data between component to component.

1) User services by use of emit() and subscribe().

2) User @Input() decorator to pass data.

3) You can access data by store that data in common file's variable and fetch that data.

Make sure if reload page then you will note able to fetch data.

4) If amount of data's size is small then you can use cookie or local-storage.

If you use app selector of incident-detail component then go with second option. which is very easy to use. Otherwise go with first option.

For that, You have to create one service file.

E.x: common.service.ts  // shared/services/common.service.ts

Hear you have to make one variable.

import { Component, Injectable, EventEmitter } from '@angular/core';
incidentData = new EventEmitter<any>();

Now in you indecent.ts file.

import this `common.service.ts` file and add in constructor param.

Now emit() the event.

onLoadActive(event){
    this.commonService.incidentData.emit({data:{pass your any data hear}});
    // In this param you have to pass data which you want to send in other component. 
}

Now you have to subscribe() this event into your other component.

In incident-detail component file.

Step 1 : Import common.service.ts file.

Step 2 : Subscribe event in component's constructor.

viewData : any = [];  // Used to display data
constructor(private commonService : CommonService){
    this.commonservice.incidentData.subscribe((data : any) => {
         console.log("Data from parent ::: " , JSON.stringify(data));
         this.viewData = data; 
         // Now use this viewData array in you HTML file. 
    })
}

In HTML file.

<div *ngFor="let data of viewData">
     <p>{{data.name}}</p>
     <p>{{data.address}}</p>
</div>

In your case, You have used *ngFor loop in incedent component. And pass that data in to another data. For that also you can also use emit() and subscribe() to do that.

E.x: // In your parent component. You have used ngFor. 
<div *ngFor="let data of incedentData">
    <button (click)="viewData(data)">View Details</button>

     <!-- Hear you set click event and pass data of each row -->

In Incedent.component.ts file

You have same set emit() as I explain above.

viewData(viewData){
    // Hear you have to emit event and pass data. 
    this.commonService.incidentData.emit({data:viewData});
}

Answer 2

There are two ways to pass data into a component, with 'property binding' and 'event binding'. In Angular, data and event change detection happens top-down from parent to children. However for Angular events we can use the DOM event mental model where events flow bottom-up from child to parent. So, Angular events can be treated like regular HTML DOM based events when it comes to cancellable event propagation. The @Input() decorator defines a set of parameters that can be passed down from the component's parent. For example, we can modify the TestComponent component so that name can be provided by the parent.

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

@Component({
  selector: 'test',
  template: '<p>Hello, {{name}}!</p>',
})
export class TestComponent {
  @Input() name: string;
}

The point of making components is not only encapsulation, but also reusability. Inputs allow us to configure a particular instance of a component. We can now use our component like this:

<!-- To bind to a raw string -->
<test name="World"></test>
<!-- To bind to a variable in the parent scope -->
<test [name]="helloName"></test>

And dont forget to import your component in your typescript file.