Angular 2+ interview questions I’ve found while taking interview for UI developer, along with correct answers. Feel free to contribute/send corrections if I have made any mistake.

Angular Interview Questions

What is Angular?

Angular is a platform for developing mobile and desktop web applications. Our applications are now a “client-side application”, where the display control and part of the logic are transferred to the browser side.  With Angular, we describe the application structure declaratively, and with TypeScript, we begin to make fewer errors due to static typing. Angular has tons of features out of the box. It can be both good and bad, depending on what you need.

What are the pros and cons of using Angular?

• Support Google, Microsoft
• Developer Tools (CLI)
• Typescript out of the box
• Reactive Programming with RxJS
• Dependency Injection framework out of the box
• HTML extension based templates
• Cross-browser Shadow DOM out of the box
• Cross-browser support for HTTP, WebSockets, Service Workers
• No need to configure anything extra. No more wrappers. jQuery plugins and D3 can be used directly
• More modern framework than AngularJS (at React, Vue level)
• Large community

Cons of using Angular :

• Higher entry threshold due to Observable (RxJS) and Dependency Injection
• For everything to work well and quickly, you need to spend time on additional optimizations
• Creating components dynamically is not a trivial task.
• Angular is a framework so it’s difficult to make changes to pattern need to follow angular standards.

What are MVVM and MVC in Angular?

MVVM is an application architecture design pattern. Consists of 3 key blocks: Model, View, ViewModel.
Differences from MVC are:

View responds to user actions and passes them to the View Model via Data Binding. The View Model, unlike the controller in MVC, has a special mechanism that automates the relationship between View and related properties in the ViewModel.

The data binding between View and ViewModel can be one-way or two-way (one-way, two-way data-binding).

Angular Template Syntax

What is interpolation in Angular?

Angular interpolation markup with embedded expressions is used to assign data to text nodes and attribute values. For instance:

< A the href = ” img / {{}} the username. Jpg ” > the Hello {{the username}}! </ A >

What are structured directive and attribute directive in Angular?

Structural directives affect the DOM and can add / remove elements (ng-template, NgIf, NgFor, NgSwitch, etc)

Attribute directives change the appearance or behavior of elements, components, or other directives (NgStyle, NgClass, etc).

What are ng-template, ng-container, ng-content directives in Angular

ng-template

<template> It is a mechanism for the deferred rendering of client content that is not displayed at boot time, but can be initialized using JavaScript.

ng-container

<ng-container> – This is a logical container that can be used to group nodes but does not appear in the DOM tree as a node.

In fact, the structural directives (* ngIf, * ngFor, ..) are the syntactic sugar for our templates. 

ng-content

<ng-content> – allows you to embed parent components html-code in child components.

Angular development environment

What is a directive, component, module, service, pipe in Angular?

The component controls a portion of the screen, the so-called view.

Service is a class with a narrow, well-defined goal. It can be a value, function, query, etc. The main thing in them is that they are reused, separating the pure functionality of the component.

Pipe converts the display of values ​​in the template, for example, the display of dates in different locales or changes the case of strings in the display.

Angular @NgModule, @Component, @Directive, @Injectable, @Pipe

@NgModule may contain the following parameters:

• providers – a list of injectable objects that are added to this module
• declarations – components, directives, and pipes belonging to this module
• imports – modules that are exported declared and available in the template of this module
• exports – components, directives and pipes that are declared and can be used in the template of any component that belongs to the NgModule importing them.
• entryComponent – compiled components defined by NgModule, for dynamic loading into view.
• bootstrap – components that are loaded when this module loads are automatically added to entryComponent.
• schemas – a set of schemas declaring allowed elements in MgModules
• id is the name or path, the unique identifier of this NgModule in getModuleFactory. If you don’t flood, it won’t be registered there.
• jit – if true, then this module will be skipped by the AOT compiler and JIT will always be compiled.

@Component may contain the following parameters:

• changeDetection – change detection strategy used for this component
• viewProviders – injectable objects that are visible to the DOM children of this component.
• moduleId – id of the module to which the component belongs.
• templateUrl – relative path or absolute URL to the component template.
• template is an inline template for this component.
• styleUrls – one or more paths to a file containing CSS, absolute or relative.
• styles – inline CSS used in this component.
• animations – one or more trigger () animation calls containing state () and transistion ().
• encapsulation – encapsulation rules for the template and CSS.
• interpolation – redefinition of basic interpolation characters.
• entryComponents – components that must be compiled with this component. For each component mentioned here, a ComponentFactory is created and stored in a ComponentFactoryResolver.
• preserveWhitespaces – if true, potentially extra spaces are removed from the compiled template.

What are dynamic components in Angular?

Dynamic components – components that are added to the page at runtime. Dynamic components can be used in cases where the component may not be displayed immediately when the page loads. For example: dialog boxes, notifications, content in tabs.

Angular lifecycle

Angular component life cycle?

• After creating a component or directive via a constructor call, Angular calls the lifecycle methods in the following sequence at well-defined points:
• ngOnChanges () – is called when Angular at / reassigns the attached data to input properties. The method receives a SimpleChanges object, with old and new values. Called before NgOnInit and each time one or more related properties change.
• ngOnInit () – initializes the directive/component after Angular first displays the associated properties and sets the input parameters.
• ngDoCheck () – when detecting changes that Angular cannot independently detect, reacts to them.
• ngAfterContentInit () – called after Angular projects external content into a component mapping or directive mapping. Called once, after the first ngDoCheck ().
• ngAfterContentChecked () – responds to Angular checking the projected content. Called after ngAfterContentInit () and each subsequent ngDoCheck ().
• ngAfterViewInit () – called after the initialization of the display of the component and child/directives. Called once, after the first ngAfterContentChecked ().
• ngAfterViewChecked () – reacts to checking the display of the component and child/directives. Called after ngAfterViewInit () and each subsequent ngAfterContentChecked ().
• ngOnDestroy () – after the directive/component is destroyed, cleaning is performed. Unsubscribes Observables and disables event handlers to avoid memory leaks.

What is ngZone?

Dependency injection service that can run outside of Angular. It is common to use this service to optimize performance at startup, consisting of one or more asynchronous tasks that do not require an Angular user interface update or error handling.

Difference between constructor and ngOnInit in Angular?

The constructor itself is a feature of the class itself, not Angular. The main difference is that Angular will start ngOnInitafter it finishes setting up the component, that is, it is a signal due to which properties @Input()and other bindings and decorated properties are available in ngOnInit, but not defined inside the constructor, by design.

Angular Dependency Injection?

This is an important application design pattern. In Angular, dependency injection is implemented from under the hood.
Dependencies are services or objects that a class needs to perform its functions. DI – allows you to request dependencies from external sources.

What is an Observable?

Observable is an observer who subscribes to a “sight” and reacts to all events until the moment of unsubscribing.

Difference between Observable and Promise?

Promise processes a single value upon completion of an asynchronous operation, regardless of its outcome, and does not support canceling the operation.
Observable is a stream and allows you to send both zero and several events when a callback is called for each event.

Difference between switchMap, mergeMap, concatMap?

• switchMap – Unsubscribe from the Observable returned by its project argument as soon as it calls it again in a new element.
• mergeMap – unlike switchMap, it allows implementing several internal subscriptions simultaneously.
• concatMap – sequentially processes each event, unlike mergeMap.

Angular interact with the backend API?

Angular there is a package for communication with the server (@ angular/common / HTTP), which is enough for everyday development. Its interface is based on rxjs streams, so it is easy to use to work with data streams in the application.

Angular JIT and AOT

An angular application can be compiled using the ng serve and ng build commands . At the same time, you can work with different types of compilation:

• JIT – (Just-In-Time compilation) – on-the-fly compilation, dynamic compilation. Angular is the default.
• AOT – (Ahead-Of-Time compilation) – compilation before execution.