Angular Interview Questions Part 1

In this article we are going to see a well curated list of angular interview questions 2021 and answers for experienced as well as freshers.

Part 2 of this series :- Angular Interview Questions Part 2

Part 3 of this series :- Angular Interview Questions Part 3

Why were client-side frameworks like Angular introduced?

The advent of modern JavaScript frameworks has made it much easier to build highly dynamic, interactive applications. 

JS frameworks are JavaScript code libraries that have pre-written code to use for routine programming features and tasks. It is literally a framework to build websites or web applications around.

A framework is a library that offers opinions about how software gets built. These opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software.

Angular is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built AngularJS. Angular was officially released on the 14th of September 2016.

Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions.

What are lifecycle hooks in Angular?

Angular Lifecycle hooks are different states of an angular applications component or directive through out the time of its instantiation to time when its destroyed. These lifecycle hooks are invoked at different phases and conditions of angular application.

The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. 

We can use any of these lifecycle hooks to tap into particular event or state of the application to perform task's as required.

Below are the lifecycle hooks:

• ngOnChanges(): Called whenever one or more data-bound input properties change just before before ngOnInit().
• ngOnInit(): Called once, after the first ngOnChanges() and angular has insantiated the component
• ngDoCheck(): Called on every change detection run, and once after ngOnChanges() and ngOnInit() respectively. The purpose of this lifecycle hook is to act upon changes that Angular can't or won't detect on its own.
• ngAfterContentInit(): Called once after the first ngDoCheck(). The purpose of this lifecycle hook is to respond after angular has finished loading any external data into its component.
• ngAfterContentChecked(): Called after ngAfterContentInit() and every subsequent ngDoCheck(). The purpose of this lifecycle hook is to check the content projected into the directive or component.
• ngAfterViewInit(): Called once after the first ngAfterContentChecked(), This lifecycle hook is invoked when angular initializes the component's views and child views
• ngAfterViewChecked(): Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked(). This lifecycle hook is invoked after angualr checks the component's views and child views, or the view that contains the directive.
• ngOnDestroy(): Called immediately before Angular destroys the directive or component. We can use this lifecycle hook for Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

Explain Components, Modules and Services in Angular

Components in Angular are the main building block for Angular applications. Each component consists of 4 files by default .html, .less, .ts and .spec.ts. A component is basically a wrapper for our presentation layer and the logical layer.

An HTML template that declares what renders on the page. A Typescript class that defines behavior. A CSS selector that defines how the component is used in a template.

Module in Angular are basically a container for all the code blocks in the application. We declare and import all services, pipes, directives and components in the default main module created by angular at time of project creation which is the AppModule. We can create more than one modules for our application and lazy or eager load as per our requirement. An angular module is defined with the @NgModule() decorator.

Services in Angular are way of communicating between the components of an Angular application and sharing data between them. We can make our code modular and re-usable by means of services as it can be used across the application. Services in angular are declared with use of the @Injectable() decorator.

What are directives in Angular?

Directives are classes that add additional behavior to elements in your Angular applications. Directives are basically custom HTML attributes which Angular provides us Built in to use and some of which we can create by ourselves.

Below are the different types of Directives

Structural Directives:

These are the type of directives which helps us to create DOM Objects. We can add DOM objects and remove DOM objects inside our application dynamically by using these two directives.

1. *ngFor: Loop over the Array of objects creating HTML elements on which the directive is used.
2. *ngIf: Add or remove the HTML element from DOM depending upon the condition specified.

Attribute Directives:

These are the type of directives which helps us to change the look and feel and behavior of our HTML elements, attributes, properties, and components.

1. NgClass: adds and removes a set of CSS classes.
2. NgStyle: adds and removes a set of HTML styles.
3. NgModel: adds two-way data binding to an HTML form element.

Component Directives:

These are the types of directives with a template. This type of directive is the most common directive type. This Specifies that an Angular component is also a type of Directive.

What is Angular Router?

Angular Router is a Routing service for our angular application provided by Angular. Which we can import and use in our Application. We need specify the Array of Routes to this service and import it in our AppModule. This service is required for Navigating through different components/view of our angular application.

What is Angular Material?

Angular Material is a material UI component library built by the Angular team to integrate seamlessly with Angular applications. Angular Material provides built in ready to use components that helps in creating minimal, elegant and functional, HTML elements and pages. It consists of well tested components to ensure performance and reliability with straightforward APIs and consistent cross platform behavior.

Angular Material provides tools that help developers build their own custom components with common interaction patterns. It helps in creating faster, beautiful, and responsive websites. It is inspired by the Google Material Design.

What is string interpolation in Angular?

String Interpolation in Angular is method to bind data from the logical layer to the presentation layer. We can bind our ts variables in our html directly by using this mechanism called as string Interpolation which is denoted by double curly braces.

Below is the example

//ts file
title: String = 'Angular Application';

//html file
{{ title }} 

How does one share data between components in Angular?

Following are the most common ways in which we can share data between angular components:

1. @Input: The @Input method is used when we want to pass data from parent to child.
2. @Output: The @Ouput method is used when we want to pass data from child to parent by using it EventEmmitter feature.
3. Services: Services are the most common way of sharing data across multiple components as its declared in the root of the commponent.

List out differences between AngularJS and Angular

Angular JS is the first ever version of Angular and is based on Javascript. Where as the Angular is completely based on Typescript which is a superset of Javascript and has backward compatibility.

Angular JS, based on JavaScript, uses terms of scope and controllers while Angular uses a hierarchy of components. Angular is component-based while AngularJS uses directives.

Angular is based on modern web applications platform and we can develop cross platform applications with single angular code.

Checkout other Articles on Angular Interview Questions series from below Links

Part 2 of this series :- Angular Interview Questions Part 2

Part 3 of this series :- Angular Interview Questions Part 3

Happy Coding!