Angular Interview Question Set 9

Categories: Angular

What were the main reasons behind introducing client-side frameworks like Angular?

Before Angular was introduced, the web developers used VanillaJS and jQuery to develop dynamic websites, but the biggest drawback of these technologies is that as the logic of the website grew, the code became more and more complex to maintain. For websites and applications that use complex logic, developers had to put in extra effort to maintain the separation of concerns for the app. Also, jQuery did not provide facilities for data handling across views.


What is Angular CLI?

Angular CLI is a short form for Angular Command Line Interface. It is a command-line interface to scaffold and build angular apps using node.js style modules.

To use Angular CLI, we have to install it by using the following npm command:

npm install @angular/cli@latest  


 What is lazy loading in Angular?

Lazy loading is one of the most powerful and useful concepts of Angular Routing. It makes the web pages easy to download by downloading them in chunks instead of downloading everything in a big bundle. Lazy loading facilitates asynchronously loading the feature module for routing whenever required using the property loadChildren.



What is Angular Router?

Angular Router is a mechanism that facilitates users to navigate from one view to the next as users perform application tasks. It follows the concept model of browser's application navigation.


What do you understand by the router imports?

The Angular Router, representing a particular component view for a given URL, is not part of Angular Core. It is available in a library named @angular/router, and we have to import the required router components. This process is called router imports.

See the following example of how we can import them in the app module:

import { RouterModule, Routes } from '@angular/router';  



What do you understand by RouterOutlet and RouterLink?

A RouterOutlet is a directive from the router library that acts as a placeholder. It marks the spot in the template where the Router should display the components for that outlet. Router outlet is used as a component.

Syntax:

<router-outlet></router-outlet>  



What are the different router events used in Angular Router?

During each navigation, the Router emits navigation events through the Router.events property. It allows us to track the lifecycle of the route.

Following is the list of different router events in sequence:

  1. NavigationStart
  2. RouteConfigLoadStart
  3. RouteConfigLoadEnd
  4. RoutesRecognized
  5. GuardsCheckStart
  6. ChildActivationStart



What do you understand by the RouterLinkActive?

The RouterLinkActive is a directive used to toggle CSS classes for active RouterLink bindings based on the current RouterState. i.e., the Router will add CSS classes when this link is active and remove them when the link is inactive.

For example, you can add them to RouterLinks as follows:

<h1>Angular Router</h1>  

<nav>  

  <a routerLink="/todosList" routerLinkActive="active">List of todos</a>  

  <a routerLink="/completed" routerLinkActive="active">Completed todos</a>  

</nav>  

<router-outlet></router-outlet>



What do you understand by the RouterState?

The RouterState is a tree of activated routes. Every node in this tree knows about the "consumed" URL segments, the extracted parameters, and the resolved data. We can access the current RouterState from anywhere in the application by using the Router service and the routerState property.


@Component({templateUrl:'template.html'})  

class MyComponent {  

  constructor(router: Router) {  

    const state: RouterState = router.routerState;  

    const root: ActivatedRoute = state.root;  

    const child = root.firstChild;  

    const id: Observable<string> = child.params.map(p => p.id);  

    //...  

  }  

}  

Top Blogs
Angular and Node JS difference Published at:- The top 5 new features of Angular did you know Published at:- Introduction to AngularJS Published at:- Single-Page Applications and Bootstrapping the Application in Angular JS Published at:- Dependency Injection and AngularJS Routes Published at:- AngularJS Templates, Views, Models, Controllers Published at:- Integrating AngularJS with Other Frameworks Published at:- Testing AngularJS Applications in the IDE Published at:- End-to-End Testing with Protractor Published at:- AngularJS Views and Bootstrap Published at:- Adding a New Blog Controller Published at:- Adding a New Blog Template In Angular JS Published at:- Ways to Communicate with REST Services Published at:- Services and Business Logic and Handling User Authentication in Angular JS Published at:- Using Basic Authentication, Creating AngularJS Services, Holding User Credentials in Angular JS Published at:- AngularJS Security : why we are covering security in a book on AngularJS Published at:- MEAN Cloud and Mobile, Local Deployment and Installing Node.js, npm, and MongoDB in Angular Published at:- Angular 4 Questions - Angular 4 Quiz (MCQ) Published at:- AngularJS MCQ Quiz Questions with Answer Part 2 Published at:- AngularJS MCQ Quiz Questions with Answer Published at:- AngularJS MCQ Quiz Questions with Answer Published at:- Angular Interview Question Set 1 Published at:- Angular Interview Question Set 2 Published at:- Angular Interview Question Set 3 Published at:- Angular Interview Question Set 4 Published at:- Angular Interview Question Set 5 Published at:- Angular Interview Question Set 7 Published at:- Angular Interview Question Set 8 Published at:- Angular Interview Question Set 9 Published at:- Angular Interview Question Set 10 Published at:- Angular Interview Question Set 11 Published at:- Angular Interview Question Set 11 Published at:- Angular Interview Question Set 12 Published at:- Angular Interview Question Set 13 Published at:- Angular Interview Question Set 14 Published at:- Angular Interview Question Set 15 Published at:-
R4Rin Team
The content on R4Rin.com website is created by expert teams.