We Keep Coding

How to check a matching route that has params? ( in route guard)

I have a route defined which has a query param called uuid
{path: 'is-protected/:uuid', component: protectedComponent, canActivate: [RouteGuardService]}
In the route guard, i need to check if the url matches and route param (:uuid) is empty or not. If the route does not have the param, i need to redirect it to home route.
I am trying using
if (state.url == 'is-protected'){
if( query param exists){
return true;
}
else {
this.route.navigate(['/']);
}
}
This wont work because the state.url does not include the query param so it will never reach in this code block.
Is there a way to check if the route including params exists and navigate accordingly?

One possible solution I implemented is create a redirection in the router itself without param and redirect it to home.
{ path: 'is-protected', redirectTo: 'home', pathMatch: 'full' }
This will handle if the query param doesnt exist . This method worked for me because I dont have any similar route or the route without param.
Now in the route guard,
if (state.url.indexOf('is-protected') > -1) {
//this route will have the query param. If it didnt, it would be redirected automatically because of redirection added in list of routes
if (condition I need to test) {
return true
} else {
this.route.navigate(['/home']);
}
}
If there is a better approach or solution, please comment. Thanks!

Getting the params
You can check the route params importing ActivatedRouter from '#angular/router' in your component or guard.
import { ActivatedRoute } from '#angular/router';
then inject it at contructor and subscribe the params.
constructor( private router: ActivatedRoute ) {
this.router.params.subscribe( (params: any) => {
console.log('params.yourParam');
});
}
Then you can acces and use the param to check what you need.
Edit:
to use throught canActivate is very similary and you can do like this:
(you can use ActivatedRouteSnapshot too if you dont need an observable)
import { ActivatedRouteSnapshot, CanActivate } from '#angular/router';
in you guard class get the params like this:
canActivate( router: ActivatedRouteSnapshot ): boolean{
if ( Object.keys(router.params).length > 0 ){
//then you have params
if ( condition you need to check){
return true
} else {
return false;
}
} else {
this.route.navigate(['/home']);
}
hope it helps you.

You should inject in your constructor route: ActivatedRouteSnapshot
You can access route parameters like this and compare them with what you expect
let id;
if(route.paramMap.has('id')){
assessmentId = route.paramMap.get("id");
}

I have only id params in route and for my case I used replace function for url
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '#angular/router';
canActivateChild(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean>|Promise<boolean>|boolean {
const url: string = state.url.replace(/[0-9]/g, ':id');
// if you have route like '/posts/post/5' this will return '/posts/post/:id'
// your checking logic
}

Angular 6 - navigation to child route refreshes whole page

So I'm using Angular 6 and I'm trying to navigate to a child route from the parent route. The navigation is successful, however there is an unwanted page refresh upon rendering the child component. In other words, the navigation works but it also refreshes the page for no apparent reason. Here is my code:
const appRoutes: Routes = [
{
path: "parent/:param1/:param2", component: ParentComponent,
children: [
{ path: ":param3", component: ChildComponent }
]
},
{ path: "", redirectTo: "/index", pathMatch: "full" },
{ path: "**", redirectTo: "/index" }
];
My parent component looks like this:
import { Component } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
#Component({
selector: "my-parent",
templateUrl: "./parent.component.html"
})
export class ParentComponent {
param1: string;
param2: string;
loading: boolean;
tutorials: any[];
constructor(public route: ActivatedRoute) {
this.loading = true;
this.param1= this.route.snapshot.params.param1;
this.param2 = this.route.snapshot.params.param2;
// get data here
}
}
And my child component looks like this:
import { Component } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
#Component({
selector: "my-child",
templateUrl: "./child.component.html"
})
export class ChildComponent {
param1: string;
param2: string;
param3: string;
loading: boolean;
result: any;
constructor(public route: ActivatedRoute) {
this.loading = true;
this.param1= this.route.snapshot.params.param1;
this.param2 = this.route.snapshot.params.param2;
this.param3 = this.route.snapshot.params.param3;
}
}
Now, the way I try to navigate from the parent component to the child component is the following one:
<a [routerLink]="['/parent', param1, param2, param3]">
<b>Navigate</b>
</a>
As I've said, the navigation is successful, but there is an unwanted page refresh which I want to get rid of and I haven't been able to find a working solution. I don't really know what's causing it. I am new to Angular 6.
Thanks in advance for your answers.
EDIT: added parent component html
<router-outlet></router-outlet>
<div class="row" *ngIf="route.children.length === 0">
// content here
</div>

So I found a working solution, which while not very elegant, it... works. In my parent component I created a method like this one:
constructor(public route: ActivatedRoute, private router: Router) {
this.loading = true;
this.param1 = this.route.snapshot.params.param1;
this.param2 = this.route.snapshot.params.param2;
// get data
}
navigateToChild(param3: string) {
this.router.navigate([param3], { relativeTo: this.route });
}
And in the parent template, I did this:
<a (click)="navigateToChild(paramFromServer)">
<b>Navigate</b>
</a>
No more refreshes for this one.
Thank you for your help everyone.

Remove the leading / from [routerLink]= "['/parent'...]" url. The / is telling the app to find the component route from the root of the application whereas no leading / will try to redirect to the child relative to the current component.
Also make sure you have added a <router-outlet> to the parent.component.html as that is where the child component will first try to be added on navigate. If that is not available it might be causing a full refresh to load in the new component from scratch.

const appRoutes: Routes = [
{
path: "parent/:param1/:param2", component: ParentComponent,
children: [
{ path: ":param3", component: ChildComponent }
]
},
// remove this 2 lines
// redirect to index thing is not needed
];

You didn't define param3 in your ParentComponent. Also you may need to change the strategy of params so your ChildComponent can retrieve the params from its parent.
Please check this stackblitz:
https://stackblitz.com/edit/angular-tvhgqu

In my case 'href' was the problem. Using routerLink solved the problem.
Problematic Approach:
<a href='/dashboard/user-details'>User</a>
Solution:
<a routerLink='/dashboard/user-details'>User</a>

How to subscribe to param changes in child route?

I have these routes
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{
path: 'explore',
component: ExploreComponent,
children: [
{ path: '', component: ProductListComponent },
{ path: ':categorySlug', component: ProductListComponent }
]
}
];
This means that the user can go to
/explore (no category)
or
/explore/computers (category computers)
From the parent (ExploreComponent), I want to be able to subscribe to the categorySlug param change, and handle the event of course. How can I do this?
EDIT:
I tried subscribing using:
this.activatedRoute.firstChild.params.subscribe(console.log);
And it gives me exactly what I want, but it dies once I go to /explore (without category). It only works when navigating using /explore/:categorySlug links.

You can subscribe to the params in your component ang get the parameter, e.g. like this:
import { Router, ActivatedRoute } from '#angular/router';
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.categorySlug= params['categorySlug '];
});
// do something with this.categorySlug
}
Side note: In general you use a kind of master detail structure in your web app, so the first path goes to the master and the second one goes to the detail, each served with a different component, but in case that you want to use the same component for both of them, or there is no such a master-detail relationship, you should check if the parameter is null.

Unable to read Route Parameter in Angular 2

I have successfully implemented route parameter in Angular JS for my other components in same project and for the new component also I am following the same way but It's not working and I am unable to understand the problem in the code.
Below is the code of my routes file
import { Routes, RouterModule } from '#angular/router';
import { CustomerBillComponent } from '../components/customer_bill.component';
const routes: Routes = [
{ path: 'add-bill', component: CustomerBillComponent },
{ path: 'add-bill/:customer_reference', component: CustomerBillComponent },
];
export const routing = RouterModule.forRoot(routes);
(I tried using different routes also, but it didn't work)
Below is the code in My CustomerBillComponent.ts file
ngOnInit() {
//When I visit /#/add-bill/CR452152
let route_location = location['hash'].split('/')[1].toLowerCase();
console.log(route_location); //prints add-bill in Console
var customer_reference = this.route.snapshot.params['customer_reference'];
console.log(customer_reference); //prints undefined
}
Did I miss something
Thanks in advance!!!

I face almost the same problems. But the reason was different.
In my scenario, the lending page(Component Specified on routing) was different and I was trying to access the route params on the parent Route Component.
Below is the code to demonstrate my scenario:
home.module.routing.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
//other import statements...
const routes: Routes = [
{
path: 'home', component: HomeComponent,
children: [
{ path: 'buy/:mainType/:subType', component: BuyComponent, data: {} },
{ path: 'buy/:mainType', component: BuyComponent, data: { } },
{ path: '', redirectTo: 'buy', pathMatch: 'full' },
]
},
{ path: 'checkout', component: CheckoutCartComponent },
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
So, I had to access the RouteParam values in HomeComponent(Parent) and the Lending page was BuyComponent(Child Route of HomeComponent).
So, I was not getting values of route params using below code:
//Inside HomeComponent.ts
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.routeText = params['category'];
this.title = this.formatTitle(this.routeText);
});
}
As the lending page is BuyComponent, the above code will not work. Angular allows to access the route params in the above way only on the landing Component.
I tried a lot and finally got a solution to access the Route Params in parent route Component.
Below is the code to access the same:
//Inside HomeComponent.ts
const routeChildren = this.activatedRoute.snapshot.children;
if (routeChildren.length) {
//Your code here to assign route params to the Component's Data Member.
}
So, accessing this.activatedRoute.snapshot.children instead of this.route.params did the trick for me.
Hope this will help if someone lands here in search of the problem like me.
Best Regards.

You need to add ModuleWithProviders. It's a wrapper for module provider.
import {ModuleWithProviders} from '#angular/core';
export const routing: ModuleWithProviders = RouterModule.forRoot(router);

First try:
this.route.params.subscribe(
(params) => {
console.log(params);
}
)
And see what you get. If that doesn't work it's likely that you try to access a parent route's parameter, in which case you have to step up in the router tree in order to gain access to it.
You can do this with the .parent property, like such:
this.route.parent.params.subscribe(
(params) => {
console.log(params);
}
)
As many times as you need.

angular2 get route path as title page

What's the best way of outputting a page title depending on your route path in angular2 rather than hard-coding the title, I want to output a title in the controller instead.
If user go to /dashboard and the dashboard page will have Dashboard title:
{ path: 'dashboard', component: dashComponent}
Somewhere along:
if(path==dashboard){
title:string = "Dashboard"
} else if(path==something){
title:string = "Something"
}
HTML Output:
<h1>{{title}}</h1
this logic works but repeating location.path seems a little bit tedious
if(this.location.path() == '/order-ahead'){
console.log('Dashboard')
this.title = 'Dashboard';
} else {
console.log('its something else');
this.title = 'Something Else'
}

I guess, you should use more complicated logic to achieve more sophisticated solution. For example, using CanActivated guard, something like in this ticket: Angular 2 RC4 Router get intended route before activated

I think you can follow the guidance in the docs to set the title via the Title service:
import { Title } from '#angular/platform-browser';
bootstrap(AppComponent, [ Title ])
then in your component that has access to the route use something like this:
export class AppComponent {
public constructor(private titleService: Title ) { }
public setTitle( newTitle: string) {
this.titleService.setTitle( newTitle );
}
}
Here's a link to the docs on this: https://angular.io/docs/ts/latest/cookbook/set-document-title.html

Easiest solution, subscribe to route changes in the router (example for beta 3.0-2 of router):
import { Router, Event, NavigationEnd } from '#angular/router';
constructor(protected router: Router)
{
this.router.events.subscribe(this.routeChanges.bind(this));
}
protected routeChanges(event: Event)
{
if (event instanceof NavigationEnd) {
let url = event.url;
}
}