angular2-routing – Page 4

Handle @Input and @Output for dynamically created Component in Angular 2

August 10, 2023 by Tarik

You can easily bind it when you create the component: createSub() { const factory = this.resolver.resolveComponentFactory(SubComponent); const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []); ref.someData = { data: ‘123’ }; // send data to input ref.onClick.subscribe( // subscribe to event emitter (event: any) => { console.log(‘click’); } ) ref.changeDetectorRef.detectChanges(); return ref; } Sending data is really … Read more

Error: Cannot match any routes. URL Segment: – Angular 2

August 9, 2023 by Tarik

Solved myself. Done some small structural changes also. Route from Component1 to Component2 is done by a single <router-outlet>. Component2 to Comonent3 and Component4 is done by multiple <router-outlet name= “xxxxx”> The resulting contents are : Component1.html <nav> <a routerLink=”/two” class=”dash-item”>Go to 2</a> </nav> <router-outlet></router-outlet> Component2.html <a [routerLink]=”[‘/two’, {outlets: {‘nameThree’: [‘three’]}}]”>In Two…Go to 3 … … Read more

Angular 2 get current route in guard

August 7, 2023 by Tarik

You need to use the method parameters to see the target route: canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { console.log(state.url);//’candidates’ } canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot)

angular router navigate then reload

August 3, 2023 by Tarik

Simple this.router.navigate([‘path/to’]) .then(() => { window.location.reload(); });

Angular2: Make route paths case insensitive

July 30, 2023 by Tarik

Here’s what I did. import { DefaultUrlSerializer, UrlTree } from ‘@angular/router’; export class LowerCaseUrlSerializer extends DefaultUrlSerializer { parse(url: string): UrlTree { // Optional Step: Do some stuff with the url if needed. // If you lower it in the optional step // you don’t need to use “toLowerCase” // when you pass it down to … Read more

angular navigate to the same route with different parameter

July 29, 2023 by Tarik

I faced the same issue and this solved it in my case constructor(private router: Router) { this.router.routeReuseStrategy.shouldReuseRoute = function () { return false; }; }

Angular 2: Passing Data to Routes?

July 27, 2023 by Tarik

You can’t pass objects using router params, only strings because it needs to be reflected in the URL. It would be probably a better approach to use a shared service to pass data around between routed components anyway. The old router allows to pass data but the new (RC.1) router doesn’t yet. Update data was … Read more

routerLink absolute url

July 23, 2023 by Tarik

As of August, 2018, Angular docs say: If the first segment begins with /, the router will look up the route from the root of the app. If the first segment begins with ./, or doesn’t begin with a slash, the router will instead look in the children of the current activated route. And if … Read more

Redirect to a different component inside @CanActivate in Angular2

July 22, 2023 by Tarik

As of today, with latest @angular/router 3.0.0-rc.1, here are a couple of references on how to do that through CanActivate guards on routes: angular 2 reference Two answers to this SO question, by Nilz11 and by Jason The main gist of logic looks like: // … canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (this.authService.isLoggedIn) { // … Read more

Error: Uncaught (in promise): Error: Cannot match any routes Angular 2

July 8, 2023 by Tarik

I think that your mistake is in that your route should be product instead of /product. So more something like children: [ { path: ”, component: AboutHomeComponent }, { path: ‘product’, component: AboutItemComponent } ]