46. What is RouterLinkActive in routing in angular?
RouterLinkActive is a directive in angular, used to add css to the active routing link.
RouterLinkActive takes css, which it sets to the link, which is currently active.
Adding single class:
<a routerLink="/category/mobile" routerLinkActive="css-active">Mobile</a>
Adding multiple class:
<a routerLink="/category/mobile" routerLinkActive="css-active font-large">Mobile</a>
<a routerLink="/category/mobile" [routerLinkActive]="['css-active' , 'font-large']">Mobile</a>
Adding class if exact match:
<a routerLink="/category/mobile" routerLinkActive="css-active" [routerLinkActiveOptions]="{exact:
true}">Mobile</a>
Add on parent element:
<div routerLinkActive="css-active" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/category/mobile">Mobile</a>
<a routerLink="/category/tablet">Tablet</a>
</div>
Add RouterLinkActive instance to a template:
<a routerLink="/category/mobile" routerLinkActive #catLink="routerLinkActive">
Mobile Link is {{ catLink.isActive ? 'Active Now' : 'Not Active Now'}}
</a>
47. What is RouterState in angular?
RouterState is a interface in angular, which keeps the tree of the activated routes.
Example to use :
@Component({templateUrl:'dritalconnect.html'})
class MyComponent {
constructor(router: Router) {
const routerState: RouterState = router.routerState;
const root: ActivatedRoute = routerState.root;
const child = root.firstChild;
const id: Observable<string> = child.params.map(p => p.id);
}
}
48. What are router events in angular?
While navigating to the another route, angular router emits some events as hooks.
These events are provides so as to handle, start,end, error etc. during navigation session.
Available list of events are as follows:
- NavigationStart
- RouteConfigLoadStart
- RouteConfigLoadEnd
- RoutesRecognized
- GuardsCheckStart
- ChildActivationStart
- ActivationStart
- GuardsCheckEnd
- ResolveStart
- ResolveEnd
- ChildActivationEnd
- ActivationEnd
- NavigationEnd
- NavigationCancel
- NavigationError
- Scroll
49. What is ActivatedRoute in routing in angular?
Its a interface available in '@angular/router' which contains the information about the current active route.
It have following properties:
interface ActivatedRoute {
snapshot: ActivatedRouteSnapshot
url: Observable<UrlSegment[]>
params: Observable<Params>
queryParams: Observable<Params>
fragment: Observable<string>
data: Observable<Data>
outlet: string
component: Type<any> | string | null
routeConfig: Route | null
root: ActivatedRoute
parent: ActivatedRoute | null
firstChild: ActivatedRoute | null
children: ActivatedRoute[]
pathFromRoot: ActivatedRoute[]
paramMap: Observable<ParamMap>
queryParamMap: Observable<ParamMap>
toString(): string
}
50. What is meant by wildcard route in angular?
It's the else like condition defined in the route, if URL does not matches any of the defined routes, it considers the wild card route.
Wild card route is defined with double asterisk. (**)
Wild card route is kept at the last of the of the routes array.
Wild card route should be only one in the whole application.
{ path: '**', component: PageNotFoundComponent }
51. What is the purpose of Wildcard route?
This is useful for displaying a "404 - Page Not Found".
Or to redirecting to another route, like to the home page.
Its like a else condition in if/else, to catch if route is not found.
52. How to set redirects in router?
{ path: 'mobile', redirectTo: '/electronics', pathMatch: 'full' },
{ path: 'tablet', redirectTo: '/electronics', pathMatch: 'full' },
53. How to navigate to another routing in typescript?
this.router.navigate(['/another-path']);
54. What is guard in angular?
Guard in angular is used to allow to grant or remove access to the certain routes.
There are 4 types of guard, which are defined in the route.
1. CanActivate : It checks whether user have access to navigate to the given path or not.
2. CanDeacticate : It gives option , to write your own logic at the time of leaving the current route.
3. CanLoad : It checks whether user have access to navigate to the given path or not, especially used for the lazy loading Featured modules. It even stops from loading of the module, if the guard responses false.
4. CanActivateChild : It checks whether user have access to navigate to the child path or not.
55. What is Parameter routing ?
When we need to pass the constraint data from the router, we need to define in the route.
In Routing:
{ path: 'mobile/:id', component:MobileComponent },
In HTML:
<a [routerLink]="['/mobile', mobile.id]">Samsung</a>
In Component to receive Id from active route:
export class DemoComponent implements OnInit {
mobileId: number;
constructor(
private route: ActivatedRoute
) {}
ngOnInit() {
this.route.paramMap.pipe(
switchMap(params => {
this.mobileId = params.get('id');
})
);
}
}
56. Which module is available in angular for routing?
RouterModule
import {RouterModule} from '@angular/router';
57. What is the use of forRoort() and forChild() in routerModule?
forRoort is used to set router config to the root level, in the main module.
forChild is used to set route config to the child level, in the lazy loading Featured Modules.
58. Can we define more than one RouterOutlet in same component?
Yes, we can.
For that we have to use auxiliary routing, in which each router outlets given a unique name.
At the time of router Link binding , we have to define the name of the outlet to which have to render the route component.
59. What is RouterStateSnapshot in routing in angular?
RouterStateSnapshot represents the state of the router at a moment in time.
Its a interface having 'url' property.
60. How to get data from router in angular?
Using ActivatedRoute:
We can access the route's data property from the snapshot:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {
public pageTitle: string;
constructor( private route: ActivatedRoute) {
}
ngOnInit(): void {
this.pageTitle = this.route.snapshot.data['title'];
}
}