Angular 8 Interview Questions and Answers

1. What is Angular 8?

Angular 8 is an open-source, client-side TypeScript based JavaScript framework for developing dynamic mobile and desktop web applications. Angular 8 is released on May 28, 2019.

2. What are the new features in angular 8?

Angular 8 has following new features:

Differential loading - With differential loading, when you build applications for production, two bundles are created - One bundle for Modern browsers that support ES6+ and another bundle for older browsers that only support ES5. The correct bundle will be automatically loaded, when App is opened in the browser. This means the newer browsers that support ES6+, they now will be loading lesser code causing great performance improvement.

Dynamic imports for lazy routes - In Angular version 8 there is nothing new in the concept of lazy routes itself but the syntax has totally changed. In the older version of Angular, CustomString Syntax is used, but angular 8 uses standard dynamic import syntax so the syntax which was customized to Angular has now being migrated into industrial standard.

Ivy rendering Engine - It translates the templates and components into regular HTML and JavaScript that the browser can interpret and understand. Ivy is latest rendering engine but still not the default engine for Angular 8. But it does offer a switch to opt-in Ivy. This latest engine generates considerably smaller bundles and allows faster compilation.  

Bazel - It is a build tool through which angular developer can build the application as an incremental build and deploy only what has been changed rather than the entire App. This is in experimental phase and has been introduced as an opt-in option with Angular 8.

Support TypeScript 3.4 - Angular 8 doesn't support any version below 3.4.3.

What are the key parts of Angular 8 Architecture?

Key parts of Angular 8 Architecture are:

Modules - Modules are the logical grouping of components, directives, services etc. It gives rise to modularity in your application. Every Angular application has at least one Module which is root module.

Components - Components are basic building blocks of Angular. Components build the UI and control the look and feel of the Angular Application. They are made up of Template, Class and Metadata.

Templates - Templates represent the views of the angular application. They are created using HTML and are the user interface of an application.

Metadata - Metadata tells Angular how to process a class. It is the information that Angular needs to decide if the particular class is a component or just a regular class. It is used to decorate a class using decorators.

Data-Binding - Data-Binding is the automatic synchronization of data between the model and view components. It allows establishing a connection between application data and DOM.

Directives - Directives are used to change the appearance, behavior or a layout of a DOM element.

Services - A Service is a class with a specific purpose that is created when a common functionality needs to be provided across components. It can be used for sharing data, implementing application logic and interacting with external resources such as connecting to database.

Dependency Injection - Dependency Injection is a technique in which classes receive their dependencies from the external sources rather than creating them itself.

4. What is AOT(Ahead-Of-Time) Compilation?

We have two ways of compilation in Angular - JIT(Just-In-Time) compilation and AOT(Ahead-Of-Time) compilation.

JIT compiles the application Just-In-Time in the browser at runtime.

AOT compilation compiles the application at build time before the browser downloads and runs it. Compiling the application during the build process provides a faster rendering in the browser. The browser loads a pre-compiled version of the application and renders it immediately, without waiting to compile it first.

Angular AOT compilation helps you find template error during the build process itself.

We use JIT in development mode while AOT is for production mode.

5. Explain Lazy Loading in Angular 8?

Lazy loading is a programming practice where we delay the loading of an object until it is required. Lazy loading in Angular makes it easy to have features loaded only when the user navigates to their routes for the first time. This can be useful for keeping initial bundle sizes smaller, which in turn helps decrease load times.

6. What is Angular CLI? List some Angular CLI Commands with explanation.

Angular CLI is a command-line interface tool that makes it easy to create an Angular application with just single-line commands. It can create new Angular project, generate application and perform operations such as testing, bundling and deployment without hassle of complex configurations.    

Some the best Angular CLI commands that enhances developers' productivity are:

ng new - generate new angular projects

ng build - compiles an Angular app

ng generate - generates components

ng serve - builds and serves your entire project.

ng test - runs unit tests in the existing project

7. Difference between Promise and Observable in Angular.

Both observables and promises are responsible for handling asynchronous requests.

Here are some key differences:

Promise can handle a single response for the same request
Observable can handle multiple responses for the same request.

Promise is not cancellable in nature
Observable can be cancelled by using the unsubscribe() method.  

Promise is not lazy and is executed immediately after creation.
Observable is lazy in nature and does not return any value until we subscribe using the subscribe() method.

8. What is ngOnInit()?

ngOnInit() is a Angular component’s life-cycle hook that is called after ngOnChanges() event. It initializes the component, sets and displays component input properties. It only fires once during the component lifecycle so it is great for fetching data from external sources like servers and APIs.

9. What is the purpose of Wildcard Route?

Wildcard route intercept invalid URLs and handle them gracefully.

When we try to redirect a page which is not available, then we can redirect it to an Error page. Using the wildcard route, we can redirect to an error page if a particular page is not found.

We can use the Wildcard using "**"

A wildcard route is the least specific route in the route configuration, so we should place it last in the route configuration.

10. What is the use of RxJS in angular8?

RxJS is Reactive Extensions for Javascript. It is a library that allows us to work with observables in an Angular application.

11. Explain Web Workers in Angular.

Web Workers allows to run a script operation in a background thread, freeing the main thread to run without being slowed down. Using Web Workers, you can offload heavy work such as generating CAD drawings, generating heavy computations etc. to a background thread.

12. Why is Typescript useful?

TypeScript is a superset of JavaScript which means it is nothing but JavaScript with some additional features. It compiles simply to plain JavaScript.

Typescript is useful in following ways:

TypeScript points out the compilation errors at the time of development only. This reduces the chance of getting errors at run-time.

TypeScript is an object-oriented programming language which makes TypeScript code very clean and organized. This helps improve the code quality and maintainability.

TypeScript introduces strong typing that allows for checking type correctness at compile time.  

TypeScript is portable across browsers, devices, and operating systems. It can run on any environment that JavaScript runs on.

TypeScript is a wrapper around JavaScript so helper classes are available that reduces the code.

13. What is the use of codelyzer?

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.

14. What are the key differences between JQuery and Angular?

Key differences between Angular and JQuery are:

Jquery is a JavaScript based library used for DOM manipulation whereas Angular is a Javascript framework for front end development.

Jquery does not have two-way binding features whereas Angular does support two-way binding

Jquery has no support for Restful API but Restful API can be consumed in Angular.

Jquery doesn't offer Form validation whereas it is available in Angular.