Menu
Hi there Im not sure if this is possible... basically I want to be able to show a component but only if the route matches and hide a component if the route matches Ive tried this app-header-home shows when the route is '/'which is good but app-header doesnt show at all even when the route inst '/' how can I fix this?
app.component.html
<app-header *ngIf="router.url == '/'"><app-header> <app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/' <router-outlet></router-outlet> <app-footer></app-footer> app.component.ts
import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app'; constructor( private router: Router ) { } } Thanks
502
Setting up wildcard routeslink The Angular router selects this route any time the requested URL doesn't match any router paths. To set up a wildcard route, add the following code to your routes definition. The two asterisks, ** , indicate to Angular that this routes definition is a wildcard route.
Include AuthGuard to Route Now for each request of the route, the verify() function will be called and if the verify() function returns true, then only we can access the particular route. If it returns false, we are not able to access it. This is how we can restrict the routes from unauthorized user access.
To access the route parameters, we use route.snapshot , which is the ActivatedRouteSnapshot that contains information about the active route at that particular moment in time. The URL that matches the route provides the productId . Angular uses the productId to display the details for each unique product.
check the router.url in the template:
<app-header><app-header> <app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home <router-outlet></router-outlet> <app-footer></app-footer> in app.component.ts inject the router.
export class AppComponent { title = 'app'; router: string; constructor(private _router: Router){ this.router = _router.url; } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
