Top Interview Questions and Answers on Angular


Define the ng-content Directive?

Conventional HTML elements have some content between the tags. For instance:

<p>Put your paragraph here</p>

Now consider the following example of having custom text between angular tags:

<app-work>This won’t work like HTML until you use ng-content Directive</app-work>

However, doing so won’t work the way it worked for HTML elements. In order to make it work just like the HTML example mentioned above, we need to use the ng-content Directive. Moreover, it is helpful in building reusable components.

Know more about the ng-content directive.

Demonstrate navigating between different routes in an Angular application.
Following code demonstrates how to navigate between different routes in an Angular app dubbed “Some Search App”:

import {Router} from "@angular/router";

selector: 'app-header',
template: `
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" (click)="goHome()">Some Search App</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" (click)="goHome()">Home</a>
<li class="nav-item">
<a class="nav-link" (click)="goSearch()">Search</a>
class HeaderComponent {
constructor(private router: Router) {}
goHome() {
goSearch() {

Enumerate some salient features of Angular 7.

Unlike the previous versions of Angular, the 7th major release comes with splitting in @angular/core. This is done in order to reduce the size of the same. Typically, not each and every module is required by an Angular developer. Therefore, in Angular 7 each split of the @angular/core will have no more than 418 modules.

Also, Angular 7 brings drag-and-drop and virtual scrolling into play. The latter enables loading as well as unloading elements from the DOM. For virtual scrolling, the latest version of Angular comes with the <cdk-virtual-scroll-viewport> package. Furthermore, Angular 7 comes with a new and enhanced version of the ng-compiler.

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.

Here is a detailed post on Angular 7 – JWT Authentication Example & Tutorial:

How to generate a class in Angular 7 using CLI?

ng generate class Dummy [options]

This will generate a class named Dummy.

How do Observables differ from Promises?
AAs soon as a promise is made, the execution takes place. However, this is not the case with observables because they are lazy. This means that nothing happens until a subscription is made. While promises handle a single event, observable is a stream that allows passing of more than one event. A callback is made for each event in an observable.

QuestionObserve the following image:

Angular Interview Questions-1

What should replace the “?”?
Directives. The image represents the types of directives in Angular; Attribute, structural, and custom.

What are the building blocks of Angular?
AThere are essentially 9 building blocks of an Angular application. These are:

  1. Components – A component controls one or more views. Each view is some specific section of the screen. Every Angular application has at least one component, known as the root component. It is bootstrapped inside the main module, known as the root module. A component contains application logic defined inside a class. This class is responsible for interacting with the view via an API of properties and methods.
  2. Data Binding – The mechanism by which parts of a template coordinates with parts of a component is known as data binding. In order to let Angular know how to connect both sides (template and its component), the binding markup is added to the template HTML.
  3. Dependency Injection (DI) – Angular makes use of DI to provide required dependencies to new components. Typically, dependencies required by a component are services. A component’s constructor parameters tell Angular about the services that a component requires. So, a dependency injection offers a way to supply fully-formed dependencies required by a new instance of a class.
  4. Directives – The templates used by Angular are dynamic in nature. Directives are responsible for instructing Angular about how to transform the DOM when rendering a template. Actually, components are directives with a template. Other types of directives are attribute and structural directives.
  5. Metadata – In order to let Angular know how to process a class, metadata is attached to the class. For doing so decorators are used.
  6. Modules – Also known as NgModules, a module is an organized block of code with a specific set of capabilities. It has a specific application domain or a workflow. Like components, any Angular application has at least one module. This is known as the root module. Typically, an Angular application has several modules.
  7. Routing – An Angular router is responsible for interpreting a browser URL as an instruction to navigate to a client-generated view. The router is bound to links on a page to tell Angular to navigate the application view when a user clicks on it.
  8. Services – A very broad category, a service can be anything ranging from a value and function to a feature that is required by an Angular app. Technically, a service is a class with a well-defined purpose.
  9. Template – Each component’s view is associated with its companion template. A template in Angular is a form of HTML tags that lets Angular know that how it is meant to render the component.

Question: Can you give us an overview of Angular architecture?
Answer: You can draw some like this:


Here is Angular Architecture in detail:

What is Angular Material?
It is a UI component library. Angular Material helps in creating attractive, consistent, and fully functional web pages as well as web applications. It does so while following modern web design principles, including browser portability and graceful degradation.

What is AOT (Ahead-Of-Time) Compilation?
Each Angular app gets compiled internally. The Angular compiler takes in the JS code, compiles it and then produces some JS code. This happens only once per occasion per user. It is known as AOT (Ahead-Of-Time) compilation.

What is Data Binding? How many ways it can be done?
In order to connect application data with the DOM (Data Object Model), data binding is used. It happens between the template (HTML) and component (TypeScript). There are 3 ways to achieve data binding:

  1. Event Binding – Enables the application to respond to user input in the target environment
  2. Property Binding – Enables interpolation of values computed from application data into the HTML
  3. Two-way Binding – Changes made in the application state gets automatically reflected in the view and vice-versa. The ngModel directive is used for achieving this type of data binding.

What is demonstrated by the arrow in the following image?

Angular dependency injection

This represents a dependency injection or DI.

What is new in Angular 6?
Here are some of the new aspects introduced in Angular 6:

  • Angular Elements – It allows converting Angular components into web components and embeds the same in some non-Angular application
  • Tree Shakeable Provider – Angular 6 introduces a new way of registering a provider directly inside the @Injectable() decorator. It is achieved by using the providedIn attribute
  • RxJS 6 – Angular 6 makes use of RxJS 6 internally
  • i18n (internationalization) – Without having to build the application once per locale, any Angular application can have “runtime i18n”

What is ngOnInit ()? How to define it?
ngOnInit () is a lifecycle hook that is called after Angular has finished initializing all data-bound properties of a directive. It is defined as:

Interface OnInit {
           ngOnInit () : void

What is SPA (Single Page Application) in Angular? Contrast SPA technology with traditional web technology?
In the SPA technology, only a single page, which is index.HTML, is maintained although the URL keeps on changing. Unlike the traditional web technology, SPA technology is faster and easy to develop as well.

In the conventional web technology, as soon as a client requests a webpage, the server sends the resource. However, when again the client requests for another page, the server responds again with sending the requested resource. The problem with this technology is that it requires a lot of time.

What is the code for creating a decorator?
We create a decorator called Dummy:

function Dummy(target) {         
dummy.log('This decorator is Dummy', target);     

What is the process called by which TypeScript code is converted into JavaScript code?
AIt is called Transpiling. Even though TypeScript is used for writing code in Angular applications, it gets internally transpiled into equivalent JavaScript.

What is ViewEncapsulation and how many ways are there do to do it in Angular?
To put simply, ViewEncapsulation determines whether the styles defined in a particular component will affect the entire application or not. Angular supports 3 types of ViewEncapsulation:

  • Emulated – Styles used in other HTML spread to the component
  • Native – Styles used in other HTML doesn’t spread to the component
  • None – Styles defined in a component are visible to all components of the application

Why prioritize TypeScript over JavaScript in Angular?
ATypeScript is developed by Microsoft and it is a superset of JavaScript. The issue with JS is that it isn’t a true OOP language. As the JS code doesn’t follow the Prototype Pattern, the bigger the size of the code the messier it gets. Hence, it leads to difficulties in maintainability as well as reusability. To offset this, TypeScript follows a strict OOP approach.