Questions tagged [angular-router]

I am aiming to develop a breadcrumb navigation system with one element that changes dynamically. Here's an example: Home > Category A > Subcategory 1 > XYZ The categories "Category A" and "Subcategory 1" remain constant, while "XYZ" varies base ...

I am facing a challenge where I need to execute a method on ComponentB after a routerLink is clicked, causing the navigation from ComponentA to ComponentB. It is crucial that this method is triggered only after the entire navigation process is complete (i. ...

These are my guidelines for routes: export const appRoutes: Routes = [ { path: "", component: HomeComponent }, { path: '/signup', component: AppComponent }, { path: "**", redirectTo: "/" } ]; Upon attempting to access the URL: http ...

My link is not displaying as a tab (I'm using Bootstrap 4 and Angular 5). Instead, it shows up as just a plain link. This seems like it should be a simple issue, but this is my first time working with bootstrap... Thank you! <div> <nav class= ...

I am working on a navigation setup that looks like this: <a (click)="onCustomParameters()"> <app-custom-start-card></app-custom-start-card> </a> When the user clicks on the app-custom-start-card, the onCustomParame ...

Currently, I am developing a simulated e-commerce platform using Angular 11. The structure of my app.component.html file is outlined below: <mat-toolbar> <mat-toolbar-row> <!-- Various buttons and links --> <button *ngIf=&quo ...

I have been working through the Angular Tour of Heroes Guide and encountered the section on the "default route". I decided to experiment by removing the pathMatch attribute from the Route associated with an empty string. Below is the code snippet in quest ...

As I work on my Progressive Web App, I am incorporating back and forward navigation buttons specifically for standalone mode. To make this happen, I have integrated the Location service in my component and added the following code: public onForward() { ...

I am currently working on a straightforward application using Angular 9 and Ionic 5. The main page consists of a list of items. Here is my HTML code: <ion-header> <ion-toolbar> <ion-title>recipes</ion-title> </ion-toolba ...

Imagine we have a module called "Parent" which has some child routes: const routes: Routes = [ { path: '', component: ParentComponent, children: [ { path: '/:id', component: ChildComp ...

In my application built with Angular 5, this is how my app.module.ts file looks like. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { For ...

Encountering an issue with Angular compiler-cli v.7.2.0: Error message: Types of property 'runGuardsAndResolvers' are incompatible. Type 'string' is not assignable to type 'RunGuardsAndResolvers' This error occurs when trying to set runGuardsAndResolve ...

In my web application, there is a Parent component called Item which has the route '/Item'. Within this Parent component, I have two children components: one is named Catalogue and the other is named AddSize. By default, when the page loads, the Catalogu ...

Here is the code snippet for my HTML routerLink: <a [routerLink]="['create']">Create</a> - it's working just fine. When I try to call the same on a button click, it doesn't work.. navigateTo(page) { this.router.na ...

As I searched for a way to make standard a[href] links act like routerLinks when loaded dynamically into [innerHTML], I realized that this functionality is not provided out of the box. After exploring various options, I was unable to find a solution that m ...

Despite exhausting all other options, I am still facing a persistent issue: when trying to navigate to a different component, the URL changes but the destination component fails to load. Explanation: Upon entering the App, the user is directed to either ...

I am currently working on implementing dynamic routing functionality in my Angular application. So far, I have successfully achieved the following functionalities: Addition of routing to an existing angular component based on user input Removal of routin ...

I am currently working on an Angular project that involves Angular routing. The code snippet below is extracted from my app-routing.module.ts file: // app-routing.module.ts: import { NgModule } from '@angular/core'; import { ActivatedRoute, Route ...

I am currently developing a custom file viewer. To achieve this, I have created a specialized component known as FileBrowserComponent that is specifically designed to be displayed when the route /files is accessed. When navigating, I include a query param ...

Is it possible for a component to autonomously set up the canDeactivate guard in order to prompt or prevent user navigation with confirmation options like Yes/No? I am exploring this possibility due to the large scale of the application and how workflow c ...

Just a heads up: I'm relatively new to Angular, so there's a possibility that my understanding might be off and therefore my question may not make sense. I've recently started working on an application that requires several intricate features. To keep thi ...

I'm looking to publish my prebuilt angular module on a CDN and have an Angular route load it. However, I'm encountering issues when trying to reference the module from a URL - it only works when the module is in the same directory as my index.htm ...

I'm currently experiencing an issue with routing using path parameters: Navigation works perfectly when moving between categories initially, but once I navigate from one category to another, the routing doesn't update even though the URL in the ...

Each time a route is changed, the correct component is rendered but there seems to be an issue with the path. For example, when navigating from /items to /add-item, the URL changes momentarily but then reverts back. This issue occurs on every page, reg ...

I'm currently exploring the possibility of running angular alongside our existing angularjs application. Instead of immediately diving into the tedious process of transitioning to ngUpgrade, I wanted to attempt running them independently first. My idea was ...

I am in the process of building a website with Angular that features numerous articles. Whenever a user clicks on an article, I want it to navigate to a new URL using routing. To achieve this, I have created a new Article component and here is how my app- ...

I'm encountering some issues with child/nested routes in Angular 4. In the app.module.ts file, my imports statement looks like this: RouterModule.forRoot([ { path: 'templates', component: TemplateLandingC ...

I created a router module with the following configuration: RouterModule.forRoot([ {path: 'general', component: MapComponent}, {path: 'general/:id', component: MapComponent}, {path: '', component: LoginComponent} ]) Subsequently, I implemented a map ...

I am using nodejs (express) as a server side and angular 6 as the client. On the server, I have a middleware function that checks for a session. If the session is invalid or does not exist, I want to send a response to the client so it can handle it accord ...

This is a custom Angular interceptor designed to handle potential session timeouts during the usage of an application. export const sessionExpiredInterceptor: HttpInterceptorFn = (req, next) => { const router: Router = inject(Router); return nex ...

I am encountering an issue with my Angular 9.1.11 application where it freezes after navigating from one page to another (which belongs to a different module with lazy loading). Here is the scenario: There is an action button called View Report that re ...

I'm encountering difficulties with the Angular router while trying to navigate to a specific state. Despite my attempts to utilize a custom guard with canLoad() and canActivate() functions that return true, I have not been successful. The Angular documen ...