I have a large amount of data that needs to be displayed on the screen in a simplified list format for users to choose an item and view its details.
Consider a component called SimpleListComponent, which will store the data and present a condensed view:
export class SimpleListComponent{
@Input() data: any[];
}
The HTML:
<ul>
<li *ngFor="let item of data">
<a>{{item.name}}</a>
</li>
</ul>
Users should be able to click on an item and open it in a new tab to see more details. To achieve this, we can create a second component:
export class DetailedViewComponent{
@Input() item: any;
}
<div>
<!--Display all fields of the selected item here-->
</div>
Note: The challenge here is that the data is from a customized search, so there is no unique identifier to fetch the details again from the server. One way to tackle this is by passing the existing data to the detailed view component.
How can we accomplish this functionality in Angular? How do we pass the item data to the second component and open it in a new tab?