26 Top Angular 8 Interview Questions To Know in 2020

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

Q1: Explain the difference between Promise and Observable in Angular?

Topic: Angular
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

Q2: Why should ngOnInit be used, if we already have a constructor?

Topic: Angular
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

Q3: What is AOT?

Topic: Angular
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

Q4: What is the use of codelyzer?

Topic: Angular
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

Q5: What is the purpose of Wildcard route?

Topic: Angular
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

{ path: '**', component: PageNotFoundComponent }

🔗 Source: github.com/sudheerj

Q6: What are custom elements?

Topic: Angular
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

Q7: What are the utility functions provided by RxJS?

Topic: Angular
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

Q8: What is subscribing?

Topic: Angular
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.

    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

Q9: What's new in Angular 8?

Topic: Angular
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

// 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

Q10: Angular 8: What is Bazel?

Topic: Angular
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

Q11: Angular 8: What is Angular Ivy?

Topic: Angular
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

Q12: Angular 8: Explain Lazy Loading in Angular 8?

Topic: Angular
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:

{path: ‘user’, loadChildren: ‘./users/user.module#UserModule’}

Angular 8:

{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

Q13: How to detect a route change in Angular?

Topic: Angular
Difficulty: ⭐⭐⭐⭐

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

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

🔗 Source: medium.com

Q14: Are there any pros/cons (especially performance-wise) in using local storage to replace cookie functionality?

Topic: Angular
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

Q15: What is Zone in Angular?

Topic: Angular
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

Q16: What does a just-in-time (JIT) compiler do (in general)?

Topic: Angular
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

Q17: What is ngUpgrage?

Topic: Angular
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

Q18: What is incremental DOM? How is it different from virtual DOM?

Topic: Angular
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

Q19: Angular 8: Why we should use Bazel for Angular builds?

Topic: Angular
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

Q20: Explain the purpose of Service Workers in Angular

Topic: Angular
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

Q21: What is the Angular equivalent to an AngularJS "$watch"?

Topic: Angular
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.

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

Q22: Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation. Explain the difference.

Topic: Angular
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

Q23: Why did the Google team go with incremental DOM instead of virtual DOM?

Topic: Angular
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

Q24: Why Incremental DOM is Tree Shakable?

Topic: Angular
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

Q25: Angular 8: How does Ivy affect the (Re)build time?

Topic: Angular
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

Q26: Angular 8: What are some changes in Location module?

Topic: Angular
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

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