I have an array of objects that I retrieve with an ngFor. Subsequently below I have a navigation bar in which I redirect to one or the other component and I need to pass the selected object above. However the most I get is to receive a literal "[Object object]
HTML
<div>
<div *ngFor="let visit of list">
<span (click)="selected(visit.id)">
<span class="photo">{{ visit.urlFoto }}</span>
<span id="text-data">
<span>{{ visit.cliente.nombre }} {{ visit.cliente.apellidos }}</span>
<span>{{ visit.cliente.apellido2}}</span>
</span>
</span>
</div>
</div>
<nav class="navbar navbar-expand-lg">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" [routerLink]="['client']" [queryParams]="{'p': this.index - 1, 'list': this.listVisits[this.index - 1]}">Client Detail</a>
</li>
</ul>
</nav>
TS of the client component:
ngOnInit() {
this.sub = this.routeParams.queryParams.subscribe( params => {
this.index = params['p'];
this.listVisits = params['list'];
console.log(this.listVisits);
})
}
You can't, the parameters are taken from the URL, so they are always text. You could use
JSON.stringify
, but it's really not a good idea.The ideal in that case is to have a service that communicates to different components or use something like
localStorage
orsessionStorage
to save data (In which case you will also have to useJSON.stringify
You can create a service and inject it into root or inject it into a module that reaches the components you want to communicate with, then create a property on the service class:
Then in your components you inject the service to load the object you want to share in the sharedObjContract property :