Angular Interview Questions

When appearing for an interview, you must know the topic well. For that, it is vital to refresh the technical details well in advance. Do not worry! Here are some frequently asked interview questions along with their solutions that will help you take a quick scan of what might be asked.

What is Angular?

Angular is an open-source web application framework. It is TypeScript based and is developed and maintained by Google. Angular is an easy and powerful tool for building front end web-based applications. It is an integration of several features that adds to the ease of web development.

What is AngularJS?

AngularJS is a JavaScript framework used for creating single web page applications. AngularJS permits the programmer to use HTML as the base-template language and extend its features to create more interactive and well-developed web-applications.

What are the various advantages of using Angular?

There are several advantages of using Angular. Some of them are:

  • Angular has a unique feature that allows the programmer to add a custom directive.
  • The community support is exceptional.
  • Angular also facilitates client and server communication.
  • It has numerous out of the box features, such as Animation and Event Handlers.
  • Angular also supports two-way data-binding.
  • Angular uses HTML to create the UI of the application and HTML is easier to use than JavaScript.

Mention a few disadvantages of using Angular?

Apart from a wide variety of advantages of using angular, there are also a few disadvantages. They are:

  • Complex Single Page Applications can be inconvenient and may also lag when used, due to their large size
  • Dynamic applications are not always executed properly
  • Learning Angular is not a very easy task.

What was the need to introduce frameworks like Angular?

Before the introduction of Angular, developers used VanillaJS and jQuery to develop websites that were dynamic to use. However, when the logics behind the development started to grow, it became difficult to maintain and manage the codes as they started getting complex. Besides, jQuery does not provide facilities for data handling across views. Keeping in mind these mentioned problems client-side frameworks like Angular were developed. These frameworks made it easier for developers to handle complex codes by dividing them into smaller bits of information, known as components in Angular. These frameworks allowed development to be quick and more comfortable to manage and maintain.

What are the various features of Angular Framework?

features of Angular Framework

Angular has several features that make it an ideal choice for front end development. A few of them are listed below:

  • Accessibility Applications
  • Animation Support
  • Cross-Platform App Development
  • Easy Code Splitting
  • Predefined Templates
  • Improved Dependency Injection
  • Improved Data Binding
  • Browser support
  • Directives

Give a detailed explanation of the working of an Angular application.

Angular application component tree

Every Angular app consists of an angular.json file. It is the main file of an Angular application and contains all the app’s configurations. The developer uses this file to find the entry point of the application. This is how the angular.json file looks like.

"build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/angular-starter",
          "index": "src/index.html",
          "main": "src/main.ts",
          "polyfills": "src/polyfills.ts",
          "tsConfig": "tsconfig.app.json",
          "aot": false,
          "assets": [
            "src/favicon.ico",
            "src/assets"
          ],
          "styles": [
            "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
            "src/style.css"
          ]
        }
      }

In this case, the application’s entry point is main.ts because it is the main property that the object defines. The main.ts file allows the application to run, and it also calls the bootstrap module, which bootstraps the application. For calling the function, the following two steps are performed in the main.ts file.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)

This code bootstraps the AppModule. The AppModule is declared in the app.module.ts file, and it contains the declaration of all the components. This is how the file looks like:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
 @NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule
  ],
 providers: [],
 entryComponents: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

The AppComponent is getting bootstrapped. This component is defined in the app.component.ts file, which interacts directly with the webpage. The app.component.ts file looks like this:

import { component } from '@angular/core';
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent {
        title = 'angular';
      }

Each component of an Angular application consists of three properties:

  1. Selector
  2. Template/ Template URL
  3. Styles URL

For the last step the Angular calls the index.html file which consequently calls the root component, app-root. The root component is defined in app.component.ts. The index.html file is given below:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular</title>
  <base href="/">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
</html>

The HTML template of the root component is displayed inside the <app-root> tag. Hence, this is the complete explanation of the working of an Angular application.

What is the difference between Angular and AngularJS?

angular vs angularjs

AngularJS Angular
Architecture A model-View-Controller architecture where the Model contains the logic, the view presents the information and the controller processes that information. Model-View-Component architecture. Components are nothing but directives predefined templates.
Mobile Support Is not supported by mobile browsers Almost all mobile browsers support it
Language AngularJS uses a dynamically typed language, JavaScript Angular uses a statically typed language, TypeScript. TypeScript is a superset of JavaScript
Speed AngularJS is slower when compared to Angular. Faster than AngularJS
Structure AngularJS is less structured. Angular is more structured as compared to AngularJS

What are the types of compilation in Angular? Which is better and Why?

Angular provides two types of compilation:

  • JIT(Just-in-Time) compilation
  • AOT(Ahead-of-Time) compilation

Angular applications consist of components and templates which are not understandable by the browser. Therefore, all the Angular applications must be compiled first before they are run in the browser.

jit vs aot

In JIT compilation, the application compiles during the runtime inside the browser,
whereas the application compiles during the build time in the AOT compilation. Thus, AOT is considered a better way of compiling the Angular application.

The advantages of using AOT compilation are:

  • The application is executed faster since the application compiles before running inside the browser. The browser loads the executable code and renders the application immediately leading to quick execution.
  • In the AOT compilation, the developer can detect and handle errors during the building phase, reducing the errors.
  • With the AOT compilation technique, the application is more secure. The AOT compiler adds HTML and templates into the JS files before they run inside the browser. Hence, there are no extra HTML files to be read, leading to better security to the application.

By default, Angular builds and serves the application using JIT compiler. A few changes must be made for using the AOT compilation technique.

Explain Components in Angular.

Angular Interview Questions 1

Components are the basic UI building blocks for an Angular application. The @Component decorator is used to define it. An Angular app contains a tree of Angular components. Every component in Angular consists of three parts.

  1. Template: The template loads the view for the component.
  2. Stylesheet: It is used to define the look of the component.
  3. Class: A class contains the logic for the component.

Angular components are a subset of directives.

What are the building blocks of Angular?

There are fundamentally 9 building blocks of an Angular application. They are:

  1. Components
  2. Data Binding
  3. Dependency Injection
  4. Directives
  5. Metadata
  6. Modules
  7. Routing
  8. Services
  9. Templates
  10. What are lifecycle hooks in Angular? Explain each of them.

In Angular, every component has a lifecycle, and during this lifecycle, it goes through several different phases. To alter, modify or trigger changes at any specific phase, Angular provides hooks that the developer can use to tap into these phases. These are known as lifecycle hooks.

Component lifecycle angular

  • ngOnChanges( ) This hook/method is called before ngOnInit . Whenever one or more input properties of the component changes, this method receives an object that contains the previous and current values of the property.
  • ngOnInit( ) This hook gets called after the ngOnChanges hook. It is used to initialize the component and set its input properties.
  • ngDoCheck( ) This hook is called after ngOnChanges and ngOnInit . It is used to detect and act on changes that Angular does not detect. The programmer must use this hook to implement any change detection algorithm.
  • 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 the ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is verified.
  • 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( ) This hook is called just before an Angular component is destroyed. it can be used to clean up the code and detach event handlers.

What are modules in Angular?

Angular modules

In Angular, a module is a mechanism to group components, directives, services, and pipes related to each other. An Angular module decides whether other modules can use the components or directives or not. Every module is defined with a @NgModule decorator. By default, modules are of two types:

  • Root Module
  • Feature Module

Any Angular application can have only one root module and several feature modules.

Explain Services in Angular.

Services in Angular, are objects which get instantiated only once during the lifetime of an application. Service is a broad category encompassing any value, function, or feature that an app needs. The primary objective of a service is to share data and functions with an Angular application’s components. To define a service, we use the @Injectable decorator. A function which is defined inside a service can be invoked from any component or directive.

To create a service, the following command must be run:

ng g s test-service

Explain string interpolation in Angular.

string interpolation in Angular

In Angular, String Interpolation is a one-way data-binding technique used to convert the data from a TypeScript code to an HTML template. It uses the template expression in double curly braces to display the data from the component to the view. String interpolation adds the value of a property from the component.

For example:

{{Enter the data here}}

What is property binding in Angular? Why is it used?

Property binding is a technique, which helps to bind values to the properties of HTML elements. One-way data-binding binds the data from component to the view (DOM) or from view to the component using property binding. As the name suggests, one-way data binding is unidirectional. Property binding is useful in several situations. A few of the reasons are mentioned below:

    1. Property binding allows the programmer to bind the desired values to the target property of the element property enclosed within the square brackets. Consider the following example:
<span [innerHTML]='Hello World!'></span>

Alternatively, we can also use the prefix bind to avoid using the square brackets.

<span bind-innerHTML='Hello World!'></span>
    1. The property binding technique is used for binding an element property to a non-string data value. It ensures that there is no change in the type of object we are binding to the view and the value that we have passed from the component.

What is data binding in Angular?

Data binding is the core concept of Angular. It defines the communication between a component and the Document Model Object. It is a technique to link the data to a view layer. Data binding is a communication method between the typescript code of an Angular component and the template which the user sees. Data binding can either be one-way data binding or two-way data binding.

data binding in Angular

Angular provides four types of data binding.

  • String Interpolation
  • Property Binding
  • Event Binding
  • Two-way binding

Can you explain the concept of scope hierarchy in Angular?

Angular organizes the $scope objects into a hierarchy that is used by views. It is known as the scope hierarchy in Angular. The root scope can contain any number of scopes referred to as child scopes. In a scope hierarchy, each view has its own $scope. Hence, the variables set by a view’s view controller are not visible to other view controllers.scope hierarchy in Angular

How are Angular expressions different from JavaScript expressions?

The most significant difference between Angular and JavaScript expressions is that Angular expressions allow us to write JavaScript in HTML. In contrast, JavaScript expressions do not allow the programmer to do so. Angular expressions have a local scope object, whereas JavaScript expressions have global scope for their evaluation. It can be better understood with an example:
Consider the following component named test:

import { Component, OnInit } from '@angular/core';
 @Component({
 selector: 'app-test',
 template: `
    <h4>{{message}}</h4>
        `,
styleUrls: ['./test.component.css']
})
 export class TestComponent implements OnInit {
message:string = “Hello world”;
 constructor() { }
 ngOnInit() {
   }
  }

In the code mentioned above, an Angular expression is used to display message property of a component. Since it is an Angular expression, the properties cannot be accessed outside of its local scope, which in this case is the TestComponent.
Next, Consider the following JavaScript example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Test</title>
</head>
<body>
    <div id="foo"><div>
</body>
<script>
    'use strict';
    let bar = {};
    document.getElementById('foo').innerHTML = bar.x;
</script>
</html>

Apart from the differences mentioned, one cannot use loops in Angular expressions. However, the concept of pipes makes them more beneficial than JavaScript expressions.

Can one make an angular application to render on the server-side? If yes, what are its advantages?

By default, Angular uses client-side rendering for its applications. However, angular provides a technology called Angular Universal, which can be used to render applications on the server-side. Here are a few advantages of using Angular Universal:

  • The First-time users of Angular can instantly see a view of the application. This benefits in providing a better user experience.
  • The Angular Universal makes sure that your content is available on every search engine, which leads to better SEO.
  • In general, server-side rendered application loads faster since rendered pages are available to the browser sooner.

What are directives in Angular? When are they used?

In Angular, a directive is a class declared with a @Directive decorator. In other words, a directive is a function that executes whenever the Angular compiler finds it in the DOM. Each directive has specified a name which can either be predefined or a custom one. Every directive has different behaviour and can be imported into various components of an Angular application. Suppose the developer wants multiple components to have similar functionalities. In that case, he can create a directive with the required functionality and import it to the components that require the mentioned functionality.

What are the different types of directives? Explain each of them.

In Angular, there are three types of directives:

  1. Component directives
  2. Structural directives
  3. Attribute directives

Angular Interview Questions 2

Component directives
These form the main class in directives. The component directives are declared with a @Component decorator rather than @Directive decorator. These directives have a view, a stylesheet and a selector property.

Structural directives
These directives are often used to manipulate DOM elements. Every structural directive has a ‘*’ sign before them. We can apply these directives to any DOM element.

Attribute Directives
These directives are used to change the look and behaviour of any DOM element. These directives act as the attributes of elements.

Explain the MVVM architecture.

MVVM architecture consists of three parts:

1.Model
2.View
3. ViewModel

Angular Interview Questions 3

Model: It defines the structure of an entity. In simple terms, it contains the data of an object.
View: It is the visual layer of the application. It displays the data contained inside the Model.
ViewModel: The ViewModel is an abstract layer of the application. It handles the logic of the application and manages the data of a model.

In the MVVM architecture, The View and ViewModel are connected using a two-way-data-binding technique. If the view is modified, the changes are noted by the ViewModel, and appropriate alterations are made inside the Model.

What do you understand by controllers in AngularJS?

angularjs controllers

A controller is a JavaScript Object. It provides data and logic to the HTML UI. A standard JavaScript object constructor creates controllers. An AngularJS application relies on controllers to control the flow of data in the application.

View Encapsulation in angular

What is View Encapsulation? In how many ways can you do it in Angular?

ViewEncapsulation is a method of determining whether the styles defined in a particular component will affect the entire application or not. There are three types of ViewEncapsulation techniques supported in Angular:

  • Emulated: Styles used in other HTML pages spread to the component
  • Native: Styles used in other HTML components do not spread to the component
  • None: Styles defined in a component are visible to all the components of the application.

Give an overview of the Angular architecture?

Angular architecture

What is the one significant difference between Angular and jQuery?

The notable difference between Angular and jQuery is that Angular is a JS frontend framework. On the other hand, jQuery is a JS library.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments