angular2-routing – Page 12

Angular 2.0 router not working on reloading the browser

October 18, 2022 by Tarik

The error you are seeing is because you are requesting http://localhost/route which doesn’t exist. According to Simon. When using html5 routing you need to map all routes in your app(currently 404) to index.html in your server side. Here are some options for you: using live-server: https://www.npmjs.com/package/live-server $live-server –entry-file=index.html` using nginx: http://nginx.org/en/docs/beginners_guide.html error_page 404 /index.html Tomcat … Read more

Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?

October 12, 2022 by Tarik

Absolute path routing There are 2 methods for navigation, .navigate() and .navigateByUrl() You can use the method .navigateByUrl() for absolute path routing: import {Router} from ‘@angular/router’; constructor(private router: Router) {} navigateToLogin() { this.router.navigateByUrl(‘/login’); } You put the absolute path to the URL of the component you want to navigate to. Note: Always specify the complete … Read more

Angular 2: 404 error occur when I refresh through the browser [duplicate]

October 11, 2022 by Tarik

Update for Angular 2 final version In app.module.ts: Add imports: import { HashLocationStrategy, LocationStrategy } from ‘@angular/common’; And in NgModule provider, add: {provide: LocationStrategy, useClass: HashLocationStrategy} Example (app.module.ts): import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { AppComponent } from ‘./app.component’; import { HashLocationStrategy, LocationStrategy } from ‘@angular/common’; @NgModule({ declarations: … Read more

Can’t bind to ‘routerLink’ since it isn’t a known property

October 5, 2022 by Tarik

You need to add RouterModule to imports of every @NgModule() where components use any component or directive from (in this case routerLink and <router-outlet>. import {RouterModule} from ‘@angular/router’; @NgModule({ declarations:[YourComponents], imports:[RouterModule] declarations: [] is to make components, directives, pipes, known inside the current module. exports: [] is to make components, directives, pipes, available to importing … Read more

How to redirect to an external URL in Angular2?

October 4, 2022 by Tarik

You can use this-> window.location.href=”https://stackoverflow.com/questions/34338440/…”; This would change the page to whatever you want..

How to pass a parameter to routerLink that is somewhere inside the URL?

October 4, 2022 by Tarik

In your particular example you’d do the following routerLink: [routerLink]=”[‘user’, user.id, ‘details’]” To do so in a controller, you can inject Router and use: router.navigate([‘user’, user.id, ‘details’]); More info in the Angular docs Link Parameters Array section of Routing & Navigation

How to pass query parameters with a routerLink

October 1, 2022 by Tarik

queryParams queryParams is another input of routerLink where they can be passed like <a [routerLink]=”[‘../’]” [queryParams]=”{prop: ‘xxx’}”>Somewhere</a> fragment <a [routerLink]=”[‘../’]” [queryParams]=”{prop: ‘xxx’}” [fragment]=”yyy”>Somewhere</a> routerLinkActiveOptions To also get routes active class set on parent routes: [routerLinkActiveOptions]=”{ exact: false }” To pass query parameters to this.router.navigate(…) use let navigationExtras: NavigationExtras = { queryParams: { ‘session_id’: sessionId }, … Read more

In Angular, how do you determine the active route?

September 23, 2022 by Tarik

With the new Angular router, you can add a [routerLinkActive]=”[‘your-class-name’]” attribute to all your links: <a [routerLink]=”[‘/home’]” [routerLinkActive]=”[‘is-active’]”>Home</a> Or the simplified non-array format if only one class is needed: <a [routerLink]=”[‘/home’]” [routerLinkActive]=”‘is-active'”>Home</a> Or an even simpler format if only one class is needed: <a [routerLink]=”[‘/home’]” routerLinkActive=”is-active”>Home</a> See the poorly documented routerLinkActive directive for more info. … Read more

Angular 2 Scroll to top on Route Change

September 18, 2022 by Tarik

Angular 6.1 and later: Angular 6.1 (released on 2018-07-25) added built-in support to handle this issue, through a feature called “Router Scroll Position Restoration”. As described in the official Angular blog, you just need to enable this in the router configuration like this: RouterModule.forRoot(routes, {scrollPositionRestoration: ‘enabled’}) Furthermore, the blog states “It is expected that this … Read more

How to go back last page

September 13, 2022 by Tarik

Actually you can take advantage of the built-in Location service, which owns a “Back” API. Here (in TypeScript): import {Component} from ‘@angular/core’; import {Location} from ‘@angular/common’; @Component({ // component’s declarations here }) class SomeComponent { constructor(private _location: Location) {} backClicked() { this._location.back(); } } Edit: As mentioned by @charith.arumapperuma Location should be imported from @angular/common … Read more