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
pictures

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

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 ?+

Property.sale

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 ?+



Property.sale