I have the following requirement to load angular component with a set of records based on the query params passed to it.
Use case -
I am working on an incident management application. An incident has many attributes which are queryable. For example - Incident Type, Customer, Priority, Escalated
Lets say, a user working on the incident is reviewing a particular incident and wants to review other incidents reported by this customer, the user should be able to click on the "Customer" field which has a hyperlink to load all incidents reported by the customer.
Similarly, the user can click on the "Escalated" field which has a hyperlink to load all incidents that are escalated.
On click of each of these attributes, the output is a list of all incidents satisfying the hyperlink criteria.
The user can also directly click on All Incidents menu to simply load all incidents in the system without any filters applied.
The angular component loading the list of issues should receive the filter conditions while the component is loaded.
The user could typically navigate to this incident-list.component either directly from the main menu or by clicking through attributes (Customer, Priority, Escalated etc) in incident-detail.component
Similarly there are various other places from where the incident-list.component can be loaded.
To load this component, I have used the following angular routing configuration.
const routes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
{path: 'listIssues', component: IncidentListComponent, canActivate: [AuthGuard]},
]
Is there a way by which I can pass params to the IncidentList component that can be parsed by the component to load all/specific records satisfying the params passed to the component?
For example, if the customer was click on the Incident detail component, then => Attribute Name (Customer) & Attribute Value (Customer Name) should be sent as input to the incident-list component.
I quickly setup route params as suggested. But I have the following issue.
The hyperlink is not getting rendered on the incident-detail component if i remove the routerLink property from the anchor tag.
<a (click)="routeToIncidentDetail(customer.id)">{{customer.name}}</a>
routeToIssueDetail(id: string){
console.log('Router to issue detail - ', id);
this.router.navigate(['//listIssues', { id: id, name: 'customer', project: this.currentProjectId }]);
}
I cannot set this directly on the template as I need to call a method to pass the list of parameters to the incident-list.component.
You can pass the query params like this:
this.router.navigate(['listIssues'], { queryParams: {attr: 'customer'}});