I want to stop loader from loading from few screens and therefore I applied ngIf at routes where loader isn't needed. Here is the code for app.component.ts :
<router-outlet>
<app-spinner></app-spinner>
<ngx-ui-loader *ngIf="!(currentRoute =='/dashboard' || currentRoute == '/vehicle/edit/')"></ngx-ui-loader>
</router-outlet>
app.component.html
this.currentRoute = "";
this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationEnd) {
this.currentRoute = event.url;
}
});
I need to add * to vehicle/edit URL as there can be any vehicle ID while fetching the edit page like : /vehicle/edit/49042/1422
, /vehicle/edit/49023/1421
and so on.
How to allow currentRoute accept /vehicle/edit/* ?
I applied a hack to solve this :
currentDynamicRouteVehicleClient: string;
this.currentDynamicRouteVehicleClient = this.currentRoute.slice(0, 15);
if(this.currentDynamicRouteVehicleClient == '/vehicles/edit/') {
this.dynamicRouteValue = true;
}
And then passing this dynamicRoute to app.component.html like this :
<router-outlet>
<app-spinner></app-spinner>
<ngx-ui-loader *ngIf="!dynamicRouteValue"></ngx-ui-loader>
</router-outlet>
Henceforth, all the URLS starting with /vehicles/edit/ will by bypassed.