26 Top Angular 8 Interview Questions To Know in 2020
Tags: angular, career, interview
Published: 2019-11-01 00:55:51

---
title: 26 Top Angular 8 Interview Questions To Know in 2020
published: true
description: 26 Top Angular 8 Interview Questions To Know in 2020
tags: #angular #career #interview
canonical_url: https://www.fullstack.cafe/blog/angular-8-interview-questions
cover_image: https://images.pexels.com/photos/34521/space-shuttle-lift-off-liftoff-nasa.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500
---
Angular 8 has arrived in 2019 and with it a bunch of workflow and performance improvements. This release is mostly about Ivy and the possibility to give it a try, but it also includes a few features and breaking changes. Let's learn some Angular 8 Interview Questions before your next tech interview.

> Originally published on [FullStack.Cafe - Never Fail Your Tech Interview Again](https://www.fullstack.cafe/blog/angular-8-interview-questions)

### Q1:  Explain the difference between `Promise` and `Observable` in Angular?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

**Promises**:
- return a single value
- not cancellable
- more readable code with try/catch and async/await

**Observables**:
- work with multiple values over time
- cancellable
- support map, filter, reduce and similar operators
- use Reactive Extensions (RxJS)
- an array whose items arrive asynchronously over time

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/37364973)
### Q2: Why should `ngOnInit` be used, if we already have a `constructor`?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

* The `Constructor` is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses. 

* `ngOnInit` is a life cycle hook called by Angular2 to indicate that Angular is done creating the component.

Mostly we use `ngOnInit` for all the initialization/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn't do actual "work". So you should use `constructor()` to setup Dependency Injection and not much else. ngOnInit() is better place to "start" - it's where/when components' bindings are resolved.

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q3: What is AOT?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

The Angular Ahead-of-Time compiler pre-compiles application components and their templates during the build process.
Apps compiled with AOT launch faster for several reasons. 
* Application components execute immediately, without client-side compilation. 
* Templates are embedded as code within their components so there is no client-side request for template files. 
* You don't download the Angular compiler, which is pretty big on its own. 
* The compiler discards unused Angular directives that a tree-shaking tool can then exclude.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/39488266/what-is-aotor-ahead-of-time-compilation-in-angular2?rq=1)
### Q4: What is the use of codelyzer?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

All enterprise applications follows a set of coding conventions and guidelines to maintain code in better way. **Codelyzer** is an open source tool to run and check whether the pre-defined coding guidelines has been followed or not. Codelyzer does only static code analysis for angular and typescript project.

Codelyzer runs on top of tslint and its coding conventions are usually defined in tslint.json file. Codelyzer can be run via angular cli or npm directly. Editors like Visual Studio Code and Atom also supports codelyzer just by doing a basic settings.

🔗 **Source:** [pankajagarwal.in](http://pankajagarwal.in/?p=377)
### Q5: What is the purpose of Wildcard route?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

If the URL doesn't match any predefined routes then it causes the router to throw an error and crash the app. In this case, you can use wildcard route. A wildcard route has a path consisting of two asterisks to match every URL.

For example, you can define PageNotFoundComponent for wildcard route as below
```javascript
{ path: '**', component: PageNotFoundComponent }
```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q6: What are custom elements?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

Custom elements (or Web Components) are a Web Platform feature which extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. The browser maintains a `CustomElementRegistry` of defined custom elements, which maps an instantiable JavaScript class to an HTML tag. Currently this feature is supported by Chrome, Firefox, Opera, and Safari, and available in other browsers through polyfills.

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q7: What are the utility functions provided by RxJS?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

The RxJS library also provides below utility functions for creating and working with observables.
1. Converting existing code for async operations into observables
2. Iterating through the values in a stream
3. Mapping values to different types
4. Filtering streams
5. Composing multiple streams

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q8: What is subscribing?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

An Observable instance begins publishing values only when someone subscribes to it. So you need to subscribe by calling the **subscribe()** method of the instance, passing an observer object to receive the notifications.

Let's take an example of creating and subscribing to a simple observable, with an observer that logs the received message to the console.
```javascript
    Creates an observable sequence of 5 integers, starting from 1
    const source = range(1, 5);

    // Create observer object
    const myObserver = {
      next: x => console.log('Observer got a next value: ' + x),
      error: err => console.error('Observer got an error: ' + err),
      complete: () => console.log('Observer got a complete notification'),
    };

    // Execute with the observer object and Prints out each item
    myObservable.subscribe(myObserver);
    // => Observer got a next value: 1
    // => Observer got a next value: 2
    // => Observer got a next value: 3
    // => Observer got a next value: 4
    // => Observer got a next value: 5
    // => Observer got a complete notification
```

🔗 **Source:** [github.com/sudheerj](https://github.com/sudheerj/angular-interview-questions/blob/master/README.md)
### Q9: What's new in Angular 8?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

This release is mostly about Ivy and the possibility to give it a try, but it also includes a few features and breaking changes, namely:

* **Differential loading** - with differential loading, two bundles are created when building for production: a bundle for modern browsers that support ES2015+ and a bundle for older browsers that only support the ES5 version of JavaScript
* **TypeScript 3.4** support
* **Ivy** - it is the new compiler/runtime of Angular. It will enable very cool features in the future, but it is currently focused on not breaking existing applications.
* **Bazel** support - it is a build tool developed and massively used by Google, as it can build pretty much any language.
* **Lazy-loading with import()** syntax

 ```js
// from
loadChildren: './admin/admin.module#AdminModule'
// to
loadChildren: () => import('./races/races.module').then(m => m.RacesModule)
```

* To help people migrating from AngularJS, a bunch of things have been added to the **location services** in Angular
* The **service worker registration** has a new option that allows to specify when the registration should take place.
* `@angular/http` has been removed from 8.0, after being replaced by `@angular/common/http` in 4.3 and officially deprecated in 5.0,

🔗 **Source:** [blog.ninja-squad.com](https://blog.ninja-squad.com/2019/05/29/what-is-new-angular-8.0/)
### Q10: Angular 8: What is Bazel?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

Google open sourced the software responsible for building most of its projects under the name **Bazel**. Bazel is a powerful tool which can keep track of the dependencies between different packages and build targets.

Some of the features of Bazel are:

* It has a smart algorithm for determining the build dependencies - based on the dependency graph of a project, Bazel determines which targets it can build in parallel
* Bazel is independent of the tech stack. We can build anything we want with it using the same interface. For example, there are plugins for Java, Go, TypeScript, JavaScript, and more


🔗 **Source:** [blog.mgechev.com](https://blog.mgechev.com/2018/12/17/introduction-bazel-schematics-angular-cli/)
### Q11: Angular 8: What is Angular Ivy?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

A big part of Angular is its compiler: it takes all your HTML and generates the necessary JS code. This compiler (and the runtime) has been completely rewritten over the last year, and this is what Ivy is about. The last rewrite was done in Angular 4.0.

**Ivy** is a complete rewrite of the compiler (and runtime) in order to:

* reach better build times (with a more incremental compilation)
* reach better build sizes (with a generated code more compatible with tree-shaking)
* unlock new potential features (metaprogramming or higher order components, lazy loading of component instead of modules, a new change detection system not based on zone.js…)

🔗 **Source:** [blog.ninja-squad.com](https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/)
### Q12: Angular 8: Explain Lazy Loading in Angular 8?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐

Lazy loading is one of the most useful concepts of Angular Routing and brings down the size of large files. This is done by lazily loading the files that are required _occasionally_.

Angular 8 comes up with support for **dynamic imports** in our router configuration. This means that we use the import statement for lazy loading the module and this will be understood by the IDEs, webpack, etc.

Angular 7:
```js
{path: ‘user’, loadChildren: ‘./users/user.module#UserModule’}
```
Angular 8:
```js
{path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m => m.UserModule)};
```

New with Angular 8, `loadChildren` expects a function that uses the dynamic import syntax to import your lazy-loaded module only when it’s needed. As you can see, the dynamic import is promise-based and gives you access to the module, where the module’s class can be called.

🔗 **Source:** [dev.to](https://dev.to/nishugoel/lazy-loading-in-angular-8-5g54)
### Q13: How to detect a route change in Angular?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

In Angular you can `subscribe` (Rx event) to a Router instance. So you can do things like:

```js
class MyClass {
    constructor(private router: Router) {
        router.subscribe((val) => /*whatever*/ )
    }
}
```

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q14: Are there any pros/cons (especially performance-wise) in using local storage to replace cookie functionality?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

Cookies and local storage serve different purposes. 
* Cookies are primarily for reading *server-side*, 
* Local Storage can only be read by the client-side. 

So the question is, in your app, who needs this data — the client or the server? If it's your client (your JavaScript), then by all means switch to local storage. 
You're wasting bandwidth by sending all the data in each HTTP header.

If it's your server, local storage isn't so useful because you'd have to forward the data along somehow (with Ajax or hidden form fields or something). This might be okay if the server only needs a small subset of the total data for each request.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/3220660/local-storage-vs-cookies)
### Q15: What is Zone in Angular?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

`NgZone` is a wrapper around `Zone.js` which is a library that creates a context around asynchronous functions in order to to make them trackable. Angular's change detection is heavily dependent on Zones.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/45903493/zones-in-angular)
### Q16: What does a just-in-time (JIT) compiler do (in general)?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

A JIT compiler runs **after** the program has started and compiles the code (usually bytecode or some kind of VM instructions) on the fly (or just-in-time, as it's called) into a form that's usually faster, typically the host CPU's native instruction set. A JIT has access to dynamic runtime information whereas a standard compiler doesn't and can make better optimizations like inlining functions that are used frequently.

This is in contrast to a traditional compiler that compiles **all** the code to machine language **before** the program is first run.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/95635/what-does-a-just-in-time-jit-compiler-do)
### Q17: What is ngUpgrage? 
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

**NgUpgrade** is a library put together by the Angular team, which we can use in our applications to mix and match AngularJS and Angular components and bridge the AngularJS and Angular dependency injection systems.

🔗 **Source:** [blog.nrwl.io](https://blog.nrwl.io/ngupgrade-in-depth-436a52298a00)
### Q18: What is incremental DOM? How is it different from virtual DOM?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

**Incremental DOM** is used internally at Google, and it is defined by this key idea:

_Every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes._

React was the first mainstream framework to use** virtual DOM**, which is defined by this key idea:

_Every component creates a new virtual DOM tree every time it gets rerendered. React compares the new virtual DOM tree with the old one and then applies a series of transformations to the browser DOM to match the new virtual DOM tree._


🔗 **Source:** [blog.nrwl.io](https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36)
### Q19: Angular 8: Why we should use Bazel for Angular builds?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

_Bazel allows us to build at scale_. Ideally, the initial build time with Bazel will be comparable to the traditional JavaScript tooling; the difference is that the time will not grow exponentially when our application’s size increases. With Bazel most of the time the build time will stay constant. 

Many large projects report a significant increase in their incremental builds when their codebase grows.  By analyzing the build graph provided by the `BUILD.bazel` files, Bazel _rebuilds only the packages which have changed_ and nothing else.

🔗 **Source:** [blog.mgechev.com](https://blog.mgechev.com/2018/12/17/introduction-bazel-schematics-angular-cli/)
### Q20: Explain the purpose of Service Workers in Angular
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐

At its simplest, a **service worker** is a script that runs in the web browser and **manages caching for an application**.

Service workers function as a **network proxy**. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn't limited to requests made through programmatic APIs, such as fetch; it also includes resources referenced in HTML and even the initial request to index.html. Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.

The service worker is preserved after the user closes the tab. The next time that browser loads the application, the service worker loads first, and can intercept every request for resources to load the application.  Using a service worker to reduce dependency on the network can significantly **improve the user experience**.

🔗 **Source:** [angular.io](https://angular.io/guide/service-worker-intro)
### Q21: What is the Angular equivalent to an AngularJS "$watch"?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

The solution is the `set` syntax from ES6. The `set` syntax binds an object property to a function to be called when there is an attempt to set that property.

```js
import { Component, Input } from '@angular/core';
@Component({
  selector: 'example-component',
})
export class ExampleComponent {
  public internalVal = null;
  constructor() {}
  
  @Input('externalVal')
  set updateInternalVal(externalVal) {
    this.internalVal = externalVal;
  }
}
```

🔗 **Source:** [medium.com](https://medium.com/wizardnet972/48-answers-on-stack-overflow-to-the-most-popular-angular-questions-52f9eb430ab0)
### Q22: Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation. Explain the difference.
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

**JIT** - Compile TypeScript just in time for executing it:
 - Compiled in the browser. 
 - Each file compiled separately.
 - No need to build after changing your code and before reloading the browser page.
 - Suitable for local development.

**AOT** - Compile TypeScript during build phase:
 - Compiled by the machine itself, via the command line (Faster).
 - All code compiled together, inlining HTML/CSS in the scripts.
 - No need to deploy the compiler (Half of Angular size).
 - More secure, original source not disclosed.
 - Suitable for production builds.

🔗 **Source:** [stackoverflow.com](https://stackoverflow.com/questions/95635/what-does-a-just-in-time-jit-compiler-do)
### Q23: Why did the Google team go with incremental DOM instead of virtual DOM?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

They have one goal in mind: **applications have to perform well on mobile devices**. This mainly meant optimizing two things: the bundle size and the memory footprint.

To achieve the two goals:

* The rendering engine itself has to be tree shakable
* The rendering engine has to have low memory footprint

🔗 **Source:** [blog.nrwl.io](https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36)
### Q24: Why Incremental DOM is Tree Shakable?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

When using incremental DOM, the framework does not interpret the component. Instead, the component references instructions. If it doesn’t reference a particular instruction, it will never be used. And since we know this at compile time, we can omit the unused instruction from the bundle.

Virtual DOM requires an interpreter. What part of that interpreter is needed and what part is not isn’t known at compile time, so we have to ship the whole thing to the browser.

🔗 **Source:** [blog.nrwl.io](https://blog.nrwl.io/understanding-angular-ivy-incremental-dom-and-virtual-dom-243be844bf36)
### Q25: Angular 8: How does Ivy affect the (Re)build time?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

One of the Ivy goals is to **reach better build times** (with a more incremental compilation). It's achieved by the new locality principle: 

> To compile an `AppComponent` that uses `AnotherComponent` in its template, Ivy doesn’t need to know anything about the pony component. 

Previously, when you were working on your application, Angular had to recompile everything inside your module to know what had changed, _because the generated code of a component could be using internal details of another component_.

Now each component references the directives and components it uses only by their public APIs. So if you modify an internal detail of a component or a directive, only the actual components that use it will be recompiled! It could lead to huge benefits in rebuild times for applications with dozens of components and directives, as you will go from recompiling all of them to recompile just the needed ones.

🔗 **Source:** [blog.ninja-squad.com](https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/)
### Q26: Angular 8: What are some changes in Location module?
> Topic: **Angular**<br/>Difficulty: ⭐⭐⭐⭐⭐

To help people migrating from AngularJS, a bunch of things have been added to the location services in Angular 8.

* `PlatformLocation` now offers access to the hostname, port and protocol, and a new `getState()` method allows to get the `history.state`. 
* A `MockPlatformLocation` is also available to ease testing. 

All this is really useful if you are using ngUpgrade, otherwise you probably won’t need it.

🔗 **Source:** [blog.ninja-squad.com](https://blog.ninja-squad.com/2019/05/29/what-is-new-angular-8.0/)

> *Thanks 🙌 for reading and good luck on your interview!* <br/>*Please share this article with your fellow devs if you like it!* <br/>*Check more FullStack Interview Questions & Answers on 👉 [www.fullstack.cafe](https://www.fullstack.cafe)*