Angular Route Check with If Statement

Question

Angular Route Check with If Statement

Can someone assist me with creating an if-statement in my program to determine the current route or path I'm on?

I have a function that should only execute when I'm on a specific path. For instance, if the path is "homepage", then I know I'm on the homepage. However, if the URL includes "homepage/add", I want to trigger a different function. I attempted to use the code:

if(this.router.url.include('add') { .... code ... }

, but it did not work as expected. Any help would be greatly appreciated! Thank you!

angular typescript path routes

Answer 1

Answer №1

To implement a nested route '/add', you need to include it in the routes array and create a component for this route where you can call your function inside the ngOnInit() method.

const routes: Routes = [
  {
    path: 'homepage',
    component: DashboardComponent,
    children: [
      {path: 'add', component: DashboardAddComponent}
    ]
  }
]

Next, within the DashboardAddComponent class:

class DashboardAddComponent implements OnInit {
  ngOnInit() {
    // ... CALL YOUR FUNCTION HERE
  }
}

Answer 2

To implement a nested route '/add', you need to include it in the routes array and create a component for this route where you can call your function inside the ngOnInit() method.

const routes: Routes = [
  {
    path: 'homepage',
    component: DashboardComponent,
    children: [
      {path: 'add', component: DashboardAddComponent}
    ]
  }
]

Next, within the DashboardAddComponent class:

class DashboardAddComponent implements OnInit {
  ngOnInit() {
    // ... CALL YOUR FUNCTION HERE
  }
}

Angular Route Check with If Statement

Answer №1

Similar questions

If placed in the same document, will promises be executed sequentially?

Does Vue.js have its own version of Angular's named templates feature?

Enhance the visual appeal of incoming data using Angular Material's dynamic styling feature

The recent update from Angular version 5.2 to 7 has caused issues with Post methods

Module 'glob' not located

Evaluate Angular component through unit testing by employing tick and fakeAsync to handle Observables efficiently

The React lifecycle method componentDidMount is failing to execute

Ng2-smart-table is experiencing difficulty showing date and time values when used on Internet Explorer

Allusion to a intricate data component

Invoking a method in a child component from the parent component using Angular

Uploading files in Angular 5 with additional properties of other objects

How can I determine which dist folder is utilized during the building of my App if an npm package contains multiple dist folders?

The automatic renewal of silent access tokens in Oidc client js fails due to the failure of the sliding expiration feature of the identity server authentication cookie

Tips for successfully importing $lib in SvelteKit without encountering any TypeScript errors

What is the reason behind the extra space generated when a keyframe content contains a diacritic mark?

Handling a callback after the completion of another action in Angular 2

The issue with Multiselect arises when the array is being set up initially

Unable to retrieve title from view source with Angular 5 Universal

A Single Codebase Supporting Websites in a Variety of Languages

Utilizing CucumberJs, Protractor, and TypeScript to Implement Dynamic Tags/Variables in .feature Files