How to get a specific data using id in Angular 6 - html

Question

I am trying to fetch a specific customer detail by clicking on a customer id or name, I have made name as a link so that when clicking it will route to a next page with id as a parameter,and display all the details of the specific customer, so can anyone suggest me a easy way to perform this in angular 6 . (link about a demo project will be helpful)

Answer 1

Am assuming many things here but what I understood is you have two different pages - one where you have the customer with an id and based on that id you want to navigate to a different page which contains the customer details.
Let`s say it is customer component. so, HTML would have some button or a link which will be like:
<button type="button" class="btn btn-info desc" (click)="openCard(card._id)">Open</button>
In your customer component you will have an event listener:
public openCard(_id: string) {
this.router.navigate(['/detail', _id]);
}
You will have a routing module which will be responsible for different routings taking place:
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: CardComponent },
{ path: 'detail', component: CardDetailComponent },
{ path: 'detail/:details', component: CardDetailComponent },
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
The last line inside the path is responsible for handling the id part which will be utilized to do the necessary logic inside the customer detail component. This routing module should be imported in your app module.
In the customer detail component.
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.fetchDataService.getData().subscribe( data => {
this.cards = [...data];
this.cardDetails = this.cards.find(card => card._id === params.details);
})
});
}
And then inside card detail template:
<div class="card" *ngIf="cardDetails">
<img class="card-img-top" src="../assets/avatar.png" alt="{{cardDetails.title}}">
<div class="card-body">
<h5 class="card-title">{{cardDetails.title}}</h5>
<p class="card-text">{{cardDetails.description}}</p>
</div>
</div>
You can have a look at this repo which I created some time back if you want more details: GitHub Angular 5 Seed Master
Though this is in angular 5. The code will not be very different for Angular 6.
This also contains using a service to fetch data from mock json.

Answer 2

selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
(use above code in component .ts file(on select))
<h2>{{selectedHero.name | uppercase}} Details</h2>
<div>
<span>id: </span>{{selectedHero.id}}
</div>
<div>
<label>name:
<input [(ngModel)]="selectedHero.name" placeholder="name">
</label>
</div>
(use above code in component.html file(selected hero details))