[frequently asked in 2019] Top 27 Angular Interview Questions and Answers

Angular is one of the most popular front-end frameworks for building client-side web applications for the mobile and desktop web. It follows a component-based architecture where each component is an isolated and re-usable piece of code that controls a part of the app’s UI.

From my personal interview experiences I gathered below questions which are very common in any typical angular job interview.

1. What is a promise?

A promise is post-processing logic which is executed after some operation/action is completed. If a function is returning a promise, then the execution flow can move on to the next line and handle the promise separately as and when it is fulfilled the callback we provided will be called eventually.

2. What is SPA?

SPA stands for single-page application — A single-page application is a web application that has only one web page and dynamically updates that page as the user interacts with the application. SPAs use Javascript, AJAX and HTML5 to create fluid and rich experience to the user.

Example SPAs: Google Search page, Gmail, Facebook, Google Maps

Example Non SPA’s: Amazon website, WordPress blogs, News websites

3. What is Angular?

Angular is a JavaScript-based open-source front-end web framework developed and maintained by google

The main focus of the Angular is to reduce the pain of developing SPAs with features like Data-binding, Dependency injection, Components, Directives, Pipes, Services and Modules. Prior Angular most of the web applications were developed using plain Javascript and libraries like Jquery, which would generate monolithic builds, which are very hard to maintain and update
as the application grows.

4. How can you create a new project in angular cli?

To ease the application setup and development process, Angular come up with its own cli interface. By running below commands we can setup and run new project in no time.

npm install -g @angular/cli

ng new project-name

cd project-name

ng serve

5. Building blocks of Angular framework?

The building blocks of Angular framework are

Modules,
Component,
Directives, – Structural, Attribute directives
Template,
Services,
Data Binding,
Dependency Injection,
Routing,
Virtual DOM

6. What is an angular component? how can you create it

Components are the most basic UI building blocks of an Angular application. We can define a component as encapsulation of variables, template, styles and sometimes it will have business logic as well.

A Component is a directive with a template. So we should use a Component whenever we want reusable set of DOM elements with behaviors of UI.

Angular cli interface provides an easy way to create a component with below command

  ng generate c <name> 

Example:

7. What is an Angular Directive? how can you create it

Directives allow us to attach behavior to elements in the DOM, for example, doing something on mouse over or click. In Angular, a Directive decorator (@Directive) is used to mark a class as an Angular directive.

we should use a Directive whenever we want reusable behavior to supplement the DOM.

There are two types of Directives in Angular

  • Structural directives change the DOM layout by adding and removing DOM elements. For example, *ngIf and *ngFor
  • Attribute directives change the appearance or behavior of an element.  For example, *ngStyle,*ngClassand custom directives

8. What is Component lifecycle?

A component has a life-cycle managed by Angular itself. Angular does all of the heavy lifting like creating and rendering view etc. And It also offers hooks that allow us to respond to key lifecycle events throughout the component lifecycle.

Here is the component lifecycle hooks with the order of execution.

  • OnChange()
  • OnInit()
  • DoCheck()
  • AfterContentInit()
  • AfterContentChecked()
  • AfterViewInit()
  • AfterViewChecked()
  • OnDestroy()

9. What is the purpose of using package.json?

package.json will be created when we create an angular application. With the existence of package.json, it will be easy to manage the dependencies of the project.

10. What is the purpose of using angular.json

angular.json in the workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI

11. What is routing in Angular?

The Angular router is a core part of the Angular platform. It enables developers to build Single Page Applications with multiple views and allow navigation between these views.

Angular router provides with the possibility to have multiple router outlets, different path matching strategies, easy access to route parameters and route guards to protect components from unauthorized access.

12. What is an Observable ? Give me an example

It is a new way of pushing data in Angular, and this feature is imported from react programming. An observable is a Producer of multiple values which pushing values to subscribers. Some of the developers think Observables like data streams within the applications.

For example, consider a Netflix and its paid subscriber relation. Netflix serves content to only subscribed users. So if we can map this relation to our Angular Observables then Netflix is an Observable and subscriber(user) is subscriber(angular).

Angular makes use of observables as an interface to handle a variety of common asynchronous operations. For example:

  • The HTTP module uses observables to handle AJAX requests and responses.
  • The Router and Forms modules use observables to listen for and respond to user-input events.

13. What is a Subject ? Give me an example

A Subject is much like Observable, used for multi-casting data with in the application. However the Subject can act as both – a data producer and a data consumer, whereas an Observable act as only producer.

This implies two things.
1. A subject can be subscribed to, just like an observable.
2. A subject can subscribe to other observables.

Most of the developers use Subjects over raw Observables due to simplicity.

14. How many ways can we pass data between two Angular components ?

Passing data between components in a typical Angular application is very common scenario. Angular provides multiple ways to achieve that

  1. Passing data between parent-child components
  2. Using a common service between components
  3. Using Observables from Rx module.

15. Explain different types of directives in angular?

There are two types of Directives in Angular

  • Structural directives change the DOM layout by adding and removing DOM elements. For example, *ngIf and *ngFor
  • Attribute directives change the appearance or behavior of an element.  For example, *ngStyle,*ngClassand custom directives

16. what is scss and tell me advantages of using it ?

By convention, CSS does not provide any advanced capabilities like Varaiables, Conditional statements, Loops. So in order to extend CSS and add these features SCSS/SASS has been developed on top of plain CSS.

SCSS/SASS provides many new features such as
Nested Rules
Variables
Functions
Trigonometry
Code Flow and Control Statements
Mixins

However modern browsers doesn’t support SCSS/SASS yet, So it has to be pre-processed/compiled to plain CSS before executing in the browser.

17. Explain different types of Subjects in angular?

There are 4 types are Subjects available

Subject – In general a Subject can be a observable and subscriber at the same time.

BehaviorSubject – Which stores last emitted value, i.e whenever a new subscriber comes then it’ll emit the last store value by default.

ReplaySubject – The only difference between BehaviorSubject and ReplaySubject is that the later gives us ability to control how many last emitted values to be stored, whereas a BehaviorSubject stores only last value.

AsyncSubject – A Subject that only emits its last value upon completion i.e upon calling complete() method.

18. What are Angular modules ?

A Module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to an application or specific functionality.

Angular apps are modular and Angular has its own modularity system called NgModules.

Every Angular app has at least one NgModule class, the root module, which is conventionally named AppModule and resides in a file named app.module.ts. You launch your app by bootstrapping the root NgModule.

19. Explain ViewChildren and ContentChildren in Angular

ViewChildren

The children element which are located inside of its template of a component are called view children. For example h1, ol, input, button and div in below image are viewChildren.

ContentChildren

elements which are used between the opening and closing tags of the host element of a given component are called content children. For Example. app-selector-component in below screen is contentChildren.

20. How can you import an angular module into your app?

Angular modules can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.

Below is the syntax to import BrowserModule into our application module AppModule

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

21. What is ReactiveFormsModule module?

Reactive forms provide a model-driven approach to handle form inputs whose values change over time.

Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time. Each change to the form state returns a new state, which maintains the integrity of the model between changes.

Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously.

22. What is the default library for testing angular apps?

When Angular project is created, The CLI takes care of Jasmine and Karma configuration by default.

And whenever a new component or service etc created in angular project, angular CLI will creates a special file with extension .spec.ts . which will have boilerplate code for writing test cases for that component or service.

23. What is scope in Angular?

There is no scope in Angular 2+, Scope is AngularJs (i.e angular version < 2) feature.

24. AngularJs vs Angular ? what changed

AngularJS
is a JavaScript-based open-source front-end web framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.

AngularJs was developed in Javascript and it has some limitations such as

  1. Gets sloppy if there are more than 2000 watchers
  2. Not built for mobile devices
  3. Multiple ways to do the same thing, it is very hard for a developer to tell which is the best way. We can develop a directive or a controller for same functionality.
  4. Two way binding checks all the variables twice for updating which makes the UI slow.

Angular
Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Angular 2.0 inherited some of the features from angular like two-way binding, Directives, Modules etc, but improvised each of these at a different level. Some of the angular 2 features are

  1. Mobile first
  2. Modularity
  3. Component based
  4. Reactive programming support
  5. Angular cli interface
  6. Improved Dependency Injection (DI)
  7. Annotations

25. What is TypeScript? why should we use it to develop Angular applications

Microsoft TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript.

Today, There is no native browser support for TypeScript, So before executing the typescript code in browser it will be transpiled (translated) to Javascript.

TypeScript fills OOPs gaps in native JavaScript, It provides Decorators, Classes, Interfaces, Mixins, Enums etc. These features helped angular to develop conventions over configuration and dependency injection features out of the box.

TypeScript helps developers to write clean and easy maintainable code, hence most of the developers use TypeScript as primary language for developing angular apps.

26. Difference between JIT and AOT compilers

  • Just-in-time (JIT) compilation: This is a standard development approach which compiles our Typescript and html files in the browser at runtime, as the application loads. It is great but has disadvantages. Views take longer to render because of the in-browser compilation step. App size increases as it contains angular compiler and other library code that won’t actually need.
  • Ahead-of-time (AOT) compilation: With AOT, the compiler runs at the build time and the browser downloads only the pre compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

AOT is better than JIT because it delivers fast and generates smaller application size.

27. What is lifecycle hook in angular?

In Angular, Directive and component instances have a lifecycle as Angular creates, updates, and destroys them. Developers can tap into key moments in that lifecycle by implementing one or more of the lifecycle hook interfaces in the Angular core library.

There are 7 lifecycle hooks angular offers for a component:

  • OnChange()
  • OnInit()
  • DoCheck()
  • AfterContentInit()
  • AfterContentChecked()
  • AfterViewInit()
  • AfterViewChecked()
  • OnDestroy()