Dynamic routing with ngIf in Angular 2's router system

Question

Dynamic routing with ngIf in Angular 2's router system

Is there a way to use *ngIf with dynamic router in Angular? Let's say I have a top navigation component with a back button, and I only want the back button to be visible on the route 'item/:id'.

I tried using

*ngIf="router.url == '/item' or '/item/:id'

but it doesn't seem to work.

Any suggestions for handling *ngIf with dynamic routes?

javascript angular typescript angular-routing

Answer 1

Answer №1

One approach is to implement route guards. The canActivate guard sets a flag to true, while the canDeactivate guard sets it to false. This flag can then be bound to the navigation item.

Another option is to utilize a routing event watcher that monitors specific events and toggles a flag accordingly, which can also be bound to the desired element.

In the following example, routing events are used to control a spinner by toggling a flag:

  constructor(private authService: AuthService,
              private router: Router,
              private messageService: MessageService) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.loading = false;
    }
  }

A similar approach could involve monitoring NavigationStart events for specific routes. For instance, you could try something like this (not tested):

  constructor(private authService: AuthService,
              private router: Router,
              private messageService: MessageService) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent, router.url);
    });
  }

  checkRouterEvent(routerEvent: Event, routerUrl: string): void {
    if (routerEvent instanceof NavigationStart && routerUrl == '/item') {
      this.myflag= true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.myflag= false;
    }
  }

Answer 2

One approach is to implement route guards. The canActivate guard sets a flag to true, while the canDeactivate guard sets it to false. This flag can then be bound to the navigation item.

Another option is to utilize a routing event watcher that monitors specific events and toggles a flag accordingly, which can also be bound to the desired element.

In the following example, routing events are used to control a spinner by toggling a flag:

  constructor(private authService: AuthService,
              private router: Router,
              private messageService: MessageService) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.loading = false;
    }
  }

A similar approach could involve monitoring NavigationStart events for specific routes. For instance, you could try something like this (not tested):

  constructor(private authService: AuthService,
              private router: Router,
              private messageService: MessageService) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent, router.url);
    });
  }

  checkRouterEvent(routerEvent: Event, routerUrl: string): void {
    if (routerEvent instanceof NavigationStart && routerUrl == '/item') {
      this.myflag= true;
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.myflag= false;
    }
  }

Dynamic routing with ngIf in Angular 2's router system

Answer №1

Similar questions

Issues with sending parameters in JQuery Ajax POST request

Triggering a JQuery Toggle Button

Retrieving parameters from a class that is handed over from the constructor to a function by leveraging the rest parameter feature

I often find myself frustrated while using Next.js because the console automatically clears itself, making it difficult for me

Identify Bootstrap modal to modify destination of keypress input

Sending data from PHP to JavaScript using AJAX

Mastering the Art of Integrating API and JSON!

When using Styled Components with TypeScript, you may encounter the error message "No overload matches

Unleashing the Power of Google Apps Script Filters

Transferring information from a component that includes slot content to the component within the slot content

Having trouble updating the DataTable with extra details retrieved from a new URL

What is the proper method for terminating an Express app.all?

Retrieve data from an array of JSON objects within a JSON object using ReactJS

Navigating the express subdomain

Performing Cypress testing involves comparing the token stored in the localStorage with the one saved in the clipboard

Disable the meta tags in Zurb Foundation 5

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

This method or property is not supported by the object - How to call an Applet in Internet Explorer 9

Tips for linking the search button to the corresponding input field in Angular

Making a JavaScript script compatible with select drop down menus that can handle multiple selections