Sign In
Best Online Tutorials
SQL Tutorial
Free SQL Tutorial
SQL Interview Questions
SQL Practice Questions
SQL Tips & Tricks
SQL Errors
SQL Books
Angular Tutorial
Free Angular Tutorial
Angular Interview Questions
Angular Practice Questions
Angular Tips & Tricks
Angular Errors
Angular Books
Node.js Tutorial
Free Node.js Tutorial
Node.js Interview Questions
Node.js Practice Questions
Node.js Tips & Tricks
Node.js Errors
Node.js Books
React.js Tutorial
Free React.js Tutorial
React.js Interview Questions
React.js Practice Questions
React.js Tips & Tricks
React.js Errors
React.js Books
SSIS Tutorial
Free SSIS Tutorial
SSIS Interview Questions
SSIS Practice Questions
SSIS Tips & Tricks
SSIS Errors
SSIS Books
SEO Tutorial
Free SEO Tutorial
SEO Interview Questions
SEO Practice Questions
SEO Tips & Tricks
SEO Errors
SEO Books
Javascript Tutorial
Free Javascript Tutorial
Javascript Interview Questions
Javascript Practice Questions
Javascript Tips & Tricks
Javascript Errors
Javascript Books
MongoDB Tutorial
Free MongoDB Tutorial
MongoDB Interview Questions
MongoDB Practice Questions
MongoDB Tips & Tricks
MongoDB Errors
MongoDB Books
Next.js Tutorial
Free Next.js Tutorial
Next.js Interview Questions
Next.js Practice Questions
Next.js Tips & Tricks
Next.js Errors
Next.js Books
Angular interview questions | Part 4
Prashant Surya | Oct 25, 2019 | Views: 579
Description:
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'];
}
} Comments:
Content Contributor
Prashant Surya
Software developer at Uniserve Data Technologies Pvt. Ltd. | Noida, Uttar Pradesh, India
I am a software developer, freelancer and trainer working on technologies likes. MEAN stack, MERN Stack, ASP.NET full stack, WebRTC, socket.io ,PWA, SQL, JavaScript, jQuery, HTML, CSS, SEO, responsive UI/UX designing... having 7 years of experience in development in multiple domains like, eCommerce, RTA, capital markets, education, real estate...
Read related articles
Angular interview questions | Part 4
Prashant Surya | Oct 25, 2019 | Views: 580
Angular interview questions | Part 3
Prashant Surya | Oct 21, 2019 | Views: 520
Angular interview questions | Part 2
Prashant Surya | Oct 15, 2019 | Views: 722
Angular interview questions | Part 1
Prashant Surya | Oct 13, 2019 | Views: 958
Want to sell your software ?-
If you want to sell your readymade software to the genuine clients or businessman, list your software with details and demo links.
- Sell ERP
- Sell Website Clones
- Sell App Clones
- Sell Readymade Portals
- Sell Readymade Websites
- Sell Mobile Apps
- Sell Window Apps
Clients will find it using our advanced search filter and will contact you directly.
No any charge for the product lsiting.
Do you own a Company ?+
Buy or Sell Commercial Property+
Are you a freelancer ?+
Looking for a job ?+
Are you a Service Provider ?+
Are you a blogger ?+
Do you own an IT Institute ?+
© Copyright 2020 DritalConnect - All Rights Reserved
Powered By: Uniserve Data Technologies Pvt Ltd.