Top 25 Interview questions of Angular

Top 25 Interview questions of Angular

Q1.What do you understand by AngularJS?

AngularJS is a JavaScript framework that is used for making rich and extensible web applications.

It runs on plain JavaScript and HTML, hence you don’t need any other dependencies to make it work. AngularJS is perfect for Single Page Applications (SPA). It is basically used for binding JavaScript objects with HTML UI elements.

Q2.What are the key features of AngularJS?

The key features of AngularJS are:

• Scope
• Controller
• Model
• View
• Services
• Data Binding
• Directives
• Filters
• Testable

Q3.What are the technologies used in Angular?

Angular is a modern frontend JavaScript framework developed by Google. Angular itself makes use of several technologies for several reasons to accomplish certain tasks easily as well as to allow developers to have a better experience while developing applications with it. Angular uses TypeScript, which is a superscript of JavaScript. So, any valid JavaScript is a valid TypeScript. However, TypeScript allows us to write JavaScript as a strongly typed language, and we can define our own types as well, which makes catching bugs much easier. It also uses RxJS, which allows developers to better deal with asynchronous operations.

Q4.Why was Angular introduced as a client-side framework? 

Traditionally, VanillaJS and jQuery were used by developers to develop dynamic websites. As the websites became more complex with added features and functionality, it was hard for the developers to maintain the code. Moreover, there was no provision of data handling facilities across the views by jQuery. So, Angular was built to address these issues, thus, making it easier for the developers by dividing code into smaller bits of information that are known as Components in Angular. 

Client-side frameworks permit the development of advanced web applications like SPAs which, if developed by VanillaJS, is a slower process.

Q5.What is TypeScript?

TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as a primary language. You can install it globally as

Q6.Define Data Binding.

Data binding is among the most important and powerful features that help in establishing communication between DOM and the component. It makes the defining process of interactive applications simple as you no longer need to panic about data pushing or pulling between the component and the template.

Listed below are the four types of data binding in Angular:

• Event binding
• Property binding
• String interpolation
• Two-way data binding

Q7.What is Angular Expression? Explain the key difference between angular expressions and JavaScript expressions

Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as {{ expression }}

The key difference between the JavaScript expressions and Angular expressions is:

• Context: In Angular, the expressions are evaluated against a scope object, while the JavaScript expressions are evaluated against the global window
• Forgiving: In Angular expression, evaluation is forgiving to null and undefined, while in JavaScript undefined properties generate TypeError or ReferenceError
• No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an angular expression
• Filters: You can use filters to format data before displaying it.

Q8.What do you mean by string interpolation?

String interpolation in Angular, also known as the mustache syntax, only allows one-way data binding. It is a special syntax that makes use of double curly braces {{}} so that it can display the component data. Inside the braces are the JavaScript expressions that Angular needs to execute to retrieve the result, which can further be inserted into the HTML code. Moreover, as part of the digest cycle, these expressions are regularly updated and stored.

Q9.What are Lifecycle hooks in Angular? Explain some life cycles hooks

Angular components enter its lifecycle from the time it is created to the time it is destroyed. Angular hooks provide ways to tap into these phases and trigger changes at specific phases in a lifecycle. 

• ngOnChanges( ): This method is called whenever one or more input properties of the component changes. The hook receives a SimpleChanges object containing the previous and current values of the property.
• ngOnInit( ): This hook gets called once, after the ngOnChanges hook.
• It initializes the component and sets the input properties of the component.
• ngDoCheck( ): It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular.
• We can implement our change detection algorithm in this hook. 
• ngAfterContentInit( ): It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component.
• ngAfterContentChecked( ): It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked.
• ngAfterViewInit( ): It responds after a component's view, or a child component's view is initialized.
• ngAfterViewChecked( ): It gets called after ngAfterViewInit, and it responds after the component's view, or the child component's view is checked.
• ngOnDestroy( ): It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.

Q10.What is dependency injection in Angular?

Dependency injection (DI), is an important application design pattern in which a class asks for dependencies from external sources rather than creating them itself. Angular comes with its own dependency injection framework for resolving dependencies( services or objects that a class needs to perform its function).So you can have your services depend on other services throughout your application.

Q11.Write all the steps to configure an Angular App(ng-app).

To set up an Angular App we must follow certain steps as mentioned below:

• angular.module will be created at first.
• A controller will be assigned to the module.
• The module will be linked with the HTML template(i.e. UI or View) with an angular app(ng-app).
• The HTML template will be linked with the controller(i.e JS) with an ng-controller directive.

Q12.How Angular JS routes work?

AngularJS routes enable you to create different URLs for different content in your application. Different URLs for different content enable the user to bookmark URLs to specific content. Each such bookmarkable URL in AngularJS is called a route

A value in Angular JS is a simple object. It can be a number, string, or JavaScript object. Values are typically used as configuration injected into factories, services, or controllers. A value should belong to an AngularJS module.

Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value

Q13.What is an AOT compilation in Angular?

The AOT (ahead-of-time) compiler in Angular converts Angular HTML and TypeScript code into JavaScript code during the build phase, which makes the rendering process much faster. This compilation process is needed since Angular uses TypeScript and HTML code. The compiler converts the code into JavaScript, which can then be effectively used by the browser that runs our application.

Q14.Explain Angular Authentication and Authorization.

The user login credentials are passed to an authenticate API, which is present on the server. Post server-side validation of the credentials, a JWT (JSON Web Token) is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication.

Post logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

Q15.What is the purpose of async pipe?

The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes. Let’s take a time observable which continuously updates the view for every 2 seconds with the current time.

Q16.How can we share the data between controllers in AngularJS?

First, we have to create a service. Service is used to share the data between controllers in AngularJS in a very lucid, easy and fastest way. We use events, $parent, next sibling, and controller by using a $rootScope.

Q17. What are the steps for the compilation process of HTML?

Compilation of HTML process occurs in the following ways

• Using the standard browser API, first, the HTML is parsed into DOM
• By using the call to the $compile () method, a compilation of the DOM is performed. The method traverses the DOM and matches the directives.
• Link the template with a scope by calling the linking function returned from the previous step

Q18.What is DOM?

The full form of DOM is Document Object Model, and it is responsible for representing the content of a web page and changes in the architecture of an application. Here, all the objects are organized in the form of a tree, and the document can easily be modified, manipulated, and accessed only with the help of APIs.

Q19.What are directives in Angular?

Directives are one of the core features of Angular. They allow an Angular developer to write new, application-specific HTML syntax. In actual, directives are functions that are executed by the Angular compiler when the same finds them in the DOM. Directives are of three types:

• Attribute Directives
• Component Directives
• Structural Directives

Q20.What is a parameterized pipe?

A pipe can accept any number of optional parameters to fine-tune its output. The parameterized pipe can be created by declaring the pipe name with a colon ( : ) and then the parameter value. If the pipe accepts multiple parameters, separate the values with colons. 

Q21.What is SPA (Single Page Application) in AngularJS?

It is a web application that loads a single HTML page and dynamically updates the page as the user connects with the app.

By using AJAX and HTML a fluid and responsive web app can be created by SPA without invariant page reloads. Through this, we can make responsive UI with no page flicker.

Q22.Explain the linking function and its types.

Link combines the directives with a scope and produces a live view. For registering DOM listeners as well as for updating the DOM, link function is responsible. After the template is cloned, it is executed.

• Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as a safe way for DOM transformation.
• Post linking function: Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function

Q23.What does Angular Material mean?

Angular Material is a UI component library that allows professionals to develop consistent, attractive, and completely functional websites, web pages, and web applications. It becomes capable of doing so by following modern principles of web designing, such as graceful degradation and browser probability.

Q24.Please explain the digest cycle in Angular?

The process of monitoring the watchlist in order to track changes in the value of the watch variable is termed the digest cycle in Angular. The previous and present versions of the scope model values are compared in each digest cycle.

Although the digest cycle process gets triggered implicitly, it is possible to start it manually by using the $apply() function.

Q25.What is HttpClient and its benefits?

Most of the Front-end applications communicate with backend services over HTTP protocol using either XMLHttpRequest interface or the fetch() API. Angular provides a simplified client HTTP API known as HttpClient which is based on top of XMLHttpRequest interface. This client is avaialble from @angular/common/http package. You can import in your root module as below,

import { HttpClientModule } from '@angular/common/http';

The major advantages of HttpClient can be listed as below,

• Contains testability features
• Provides typed request and response objects
• Intercept request and response
• Supports Observalbe APIs
• Supports streamlined error handling