Angular Interview Questions

1. What is Angular?

Angular is a JavaScript framework which is developed by Google. By using Angular developers can build Web Applications, mobile, and desktop Apps with web technologies like HTML, CSS, and JavaScript. Angular 1.x versions and Angular 2+ versions are totally different. Angular 1 controller based and using JS whereas Angular 2 fully component based using TypeScript.

2. What are the differences between Angular2+ and Angular 1.x?

Angular 2+	Angular 1.x
Components Based	Controller and scope Based
Mobile First</td	Not built for mobile first
Improved Dependency Injection	Supports Dependency Injection
Supports ES5/6, TS or Dart	Supports ES5/6 or Dart
Angular CLI Available	Doesn’t have any CLI
Angular 2+ uses the classes for define the services	Classes are not available
Can be run on client-side & server-side	Run on only client-side
bootstrapModule() function is used to initialize the App	ng-app and angular.bootstrap() function are used to initialize the app
Supports Pipes	filters
Supports camelCase and PascalCase syntaxes Like ngModel, ngForm and NgForm	Supports spinal-case and camelCase syntaxes like ng-model, ng-class and ngModel
Use Html DOM elements properties and events	Uses its own directives like ng-click, ng-show and ng-src etc.
Use () for events and [] for attributes	Doesn’t support () and [] based syntax

3. Why uses Angular?

There are various reasons to use Angular which are listed below.

Angular fully supports Single Page Application (SPA) framework
Developed, Maintaining by Google and Open source
It supports Typescript and ES7 standard
By default it comes with Model-View-Controller Architecture
Supports to enable testing using jasmine and karma
Able to create a re-usable component, modules, routes
Supports Dependency Injection implementation
Great community support

4. What are the Building blocks of Angular?

Angular has comes with more features which makes it more useful to create any app easily, below is the list of important features and mail building blocks.

Component
Module
Data bindings
Services
Dependency Injection
Directives
Templates
Application Bootstrapping
Navigation

5. What are the new features of Angular 9?

Recently Angular has released its newer version Angular 9, and with this version, we got several updated as well as the new features and these are listed below.

Smaller bundles and better performance
Added undecorated classes migration schematic in the core.
Support for TypeScript Diagnostics Format.
The formControlName also accepts a number in the form.
Internationalization support for Angular Ivy.
Selector-less directives as base classes in View Engine in the compiler.
Added support for selector-less directive as base classes in Ivy.
Ivy compiler is now the default for ngc.
Convert all ngtsc diagnostics to ts.Diagnostics.
Bazel: support ts_librarytargets as entry-points for ng_package.
Core: add dynamic queries schematic.
Core: Mark getas deprecated.
Ivy: expose ng.getDebugNodehelper and also support ng-add in localize package.
Ivy: i18n —add syntax support for $localizemetadata block.
Ivy: i18n — reorganize entry-points for better reuse.
Language-service: enable logging on TypeScriptHost.
Language-service: provide diagnostic for invalid templateUrls.
Language-service: provide diagnostics for invalid styleUrls.

6. What is a new feature called CLI prompt?

We know that it is difficult to keep in mind all those npm commands, but sometimes we may forget a few of them and get stuck, and at the end, we will find it with the help of different search engine. Using CLI prompts, now we can use different commands very easily like ng new and ng add. When we type ng new and then press the enter key, it will ask three different named and the sequence is listed below.

Application name
Enable routing
The format of the stylesheet

After providing appropriate values, it will create a new Angular project.

7. How to update Angular Material to the latest version?

To work with latest Materialized components, we need to update our latest angular material package using below command. ng update @angular/material

8. How to check the current bundle size of an Angular app?

To optimize our Angular App, we have to very clear with the current bundle size. Based on the current size of our app, we can do optimization techniques. Run the below cmd to
ng serve
And you will get complete bundling details like this into your console.

9. What are the prerequisites for learning Angular?

There are some prerequisites to learn Angular, which are listed below.

Basic knowledge of JavaScript
Basic knowledge of HTML
Basic knowledge of CSS
Knowledge of Typescript add an advantage
Any IDE to work with Angular

10. What is module?

Module is a bundle of functionalities of the Application. Modules are piece of code and it divides your application into small bundle of tasks.

11. Explain NgModule?

NgModule is a decorator which have metadata of the module. It describes components, services, directives, pipes, etc. NgModule decorator having the following metadata properties :

Declarations : Declare view related things like component, custom directives, pipes to make available in this module.
Exports : To makes the declaration stuffs to available on other modules.
Imports : import the other modules features.
Providers :

bootstrap–Bootstrapping root component of the App. This is very 1st component which rendering on the browser.Every angular application must have at least one

12. What is Angular CLI?

The Abbreviation of CLI is Command Line Interface. It is a command line tool which is used to create, initialize, generate andto manage the angular application easily. Angular CLI comes with many inbuilt cmds, by using these cmds we can easily manage the Application. Install the Angular CLI by using the below cmd,
npm install -g @angular/cli

13. List out the features of Angular CLI?

Angular CLI is a powerful command-line tool by which we can create new Angular stuffs, build, test and deploy the angular application.

Bootstrapping Angular app
Code generation options for Component, Module, Class, Pipes, Services, Enums.
Unit test runs
Testing Angular app
Build and deployment our Angular application

14. What is Angular components?

Components are the main building block of an Angular Application.Angular apps have collection of Angular component trees. Components also one of the directives with View. If you want to render any view on the browser, component is the main part.

15.What are directives?

Directives are Instructions to the DOM. Directives instruct how to behave an existing DOM element.Directive update the appearance of a DOM element.

16. What are types for directives?

There are three types of directive in angular and these are as follows:

Component or Template Directive : It renders a View or Template.
Structural directives : It changes or updates structure of the DOM like Adding or removing DOM elements based on the given condition.,
Attribute directives :It changes or updates the appearance of the DOM like Adding or Removing DOM attributes based on the given condition.

17. What are the differences between Component and Directive?

Components	Directive
Component use @Component decorator and its meta-data properties.	Directives use @Directive decorator and its meta-data properties.
Components are mainly used to Render Views.	Directive are used to change the behaviouror update DOM structure of the DOM element.
It is used to divide the application into smaller views.	It is used to manipulate DOMs.
Holding Application Views	Does not have any Views

18.How to use Angular CLI Commands?

Angular Command Line Interface is the tool and by using this tool, we can scaffold, initialize, generate different files, and can build or deploy the angular application easily. To use different commands, we should install the package by using npm below command.
npm install -g @angular/cli

19. What are Angular lifecycle hooks available?

There are 8 angular lifecycle hooks are as follows:

ngOnChanges: This method is called When the value of a data bound property changes.
ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
ngDoCheck: This is for the change detection and to act on changes that Angular cannot or won’t detect on its own.
ngAfterContentInit: This is called in response after Angular projects external content into the component’s view.
>ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.
ngAfterViewInit: This is called in response after Angular initializes the component’s views and child views.
ngAfterViewChecked: This is called in response after Angular checks the component’s views and child views.
ngOnDestroy: This is the clean-up phase just before Angular destroys the directive/component.

20. How to create a new Angular app?

To create a new Angular app using CLI command, then we can use below command.
ng new
It will take a few seconds or minutes based on our internet connection speed and then the new angular app will be created with the basic configuration.

21. How to compile the Angular app?

After creating a new Angular app, now it’s time to compile our app, for that we can use below command to serve our app.
ng serve
After executing above given command, our application will start building and it can also be helpful to rebuild the app after any changes occurred. If you want to open app automatically into a new window from the browser then we can use the flag –o like this.
ng serve –o

22. How to change default port number 4200?

If you have created new Angular app and server the app using ng serve, then our app will be executed on URL localhost:4200, but we can change it using an additional flag along with ng serve which is –port.
ng serve –port 4300

23. What is Component in Angular?

An Angular component mainly contains a view, class, and metadata. It is used to represent the data visually in our view. A component can be thought as a web page. An Angular component is exported as a custom HTML tag like as: When we create a new Angular app using CLI, it will create default App component as the entry component of application. If we are using Angular CLI than new component will be created using the below ng command. ng generate component componentName

24. What is a data binding?

Data binding is one of the main building blockof Angular application which establish communication between a component and the DOM element. There are four types of data binding in angular and these are as follows:

A) Interpolation : {{ value }} adds the value of a property from the component to DOM

B) Property binding : Value is passed from the component to the specified html attribute: Syntax : [property]=”value”

C) Event binding : When a specific DOM event happens like click, change, keyup etc., then call the specified method of the component. The communication is DOM to Component. Syntax : (event)=”functionName()”

D) Two-way Binding : Two-way data binding allows in both ways component to DOM and voice-versa. Syntax : [(ngModel)]=”value”

25. What is the Interpolation Expression?

Interpolation expressions are the same expression that we use with JavaScript. But the difference is that we can use it within our Html template, so it looks like that we are using JavaScript along with Html but keep in mind that not every JavaScript expressions are supported like (new), (++) and (–).

26. What is Property Binding?

Property binding is generally used to show or update the value of the variables in component and vice versa. We can also call it one-way data binding thus it is not used to update the two-way binding mechanism, and value will be reflected at the component level.

27. How to implement Two-way data binding in Angular?

Two-way binding is one of the strongest binding mechanisms, where two different bindings are merged i.e. input and output bindings. It means that Event binding works with the two different binding mechanisms at a time and generates the output based on the event which was triggered. For two-way data binding, we will use the punctuation [( )] in order to bind the two-way data. It can be happen using the directive called ngModel which listen to the input for any changes and return the output. We will understand more by implementing the simple example, where we will type the text into the input and at the same time, we will get the value of the same input value.

28. What is metadata?

Metadata is used to decorate the class so that it can configure the expected behaviour of a class. Metadata can be attached to the TypeScript using the decorator. A) Class decorators : e.g. @NgModule and @Component B) Property decorators Used for properties inside component. for example, @Input and @Output C) Method decorators: Used for methods inside component class, e.g. @HostListener D) Parameter decorators Used for parameters inside component class constructors, e.g. @Inject

29. What is the difference between constructor and ngOnInit?

Constructor	ngOnInit
It is a default method of the class that is executed when the class is instantiated.	It is a component life cycle hook called by Angular to indicate that the Angular is done creating the component.
Used for Injecting dependencies	business logic performed
Called by JavaScript engine	Called by angular
Not everything in component is initialized at the time of invocation	Everything is ready at the time of invocation
No need to import anything	In order to use OnInit we have to import it in the component class like this: import {Component, OnInit} from ‘@angular/core’;

Request more information

Angular Interview Questions