Angular Tutorial

Angular Interview Questions for Beginners

Tuba Mansoor
Latest posts by Tuba Mansoor (see all)

Here are some basic angular interview questions and answers at the beginner level. These mostly deal with Angular concepts.

So, let’s begin with Angular interview questions.

What is Angular? 

Angular is a Typescript-based open-source web application framework. 

What is the difference between Angular & AngularJS? 

While AngularJS had the concept of scope or controllers, there is no such concept in Angular. Angular is based on Typescript whereas AngularJS is based on Javascript. Angular provides mobile support whereas AngularJS does not. Angular uses components & directives whereas AngularJS uses more of an MVC approach. 

What are the advantages of using Angular? 

  • Two-way data binding provides increased responsiveness.
  • Angular uses independent components which provide for reusability & independent testing. 
  • It provides code consistency as all components follow the same structure. 
  • Modules provide lazy loading & reusability. 

What is a component in Angular?

A component is a view, similar to the view that we have in MVC architectures. It will consist of template(HTML) + class (properties,methods written in Typescript) and metadata (some extra information). For more information refer here.

What is a module in Angular? 

A module in angular is a group of components, directives, services, etc. Every Angular app has a root module, conventionally named AppModule, which provides the bootstrap mechanism that launches the application. An app typically contains many functional modules. Modules are decorated with @NgModule. Do not confuse the term module in Angular with the term module in Typescript or Javascript. To avoid confusion we distinguish between them as Javascript modules and NgModules. In JavaScript, modules are individual files with JavaScript code in them.

See also  Load Balancing Microservices using Zuul and Consul

What are directives in Angular? 

Directives modify your DOM. There are three types of directives in angular:

  1. Components: The templates in components structure your DOM.
  2. Structural directives: These change the layout of the DOM for. E.g. ngIf & ngElse. These always begin with a ‘*’.
  3. Attribute directives: These are directives that change the appearance or behavior of a DOM element. For example : ngStyle.

To understand Modules, Components & Directives with examples, visit here.

What are decorators in Angular? 

Decorators are functions that modify JavaScript classes. These help add metadata to classes. Angular defines a number of decorators that attach specific kinds of metadata to classes so that Angular can configure their behavior For eg. @Component defines classes as components. 

What are pipes in Angular? 

Pipes are used to transform or format your data. There are many in-built pipes that Angular provides. You can create your own custom pipes too. For more information & examples on how to use pipes refer here.

What is data binding in Angular? 

Data binding refers to coordination between component & its template to display data. 

There are four types of data binding in Angular: 

Interpolation: 

This is used to display component properties in the view.

The expression to be displayed is written in double curly braces as below: 

{{employee.employeeId}} The above expression refers to the employeeId property of the employee class. 

Property Binding: 

In this our HTML element properties depend upon component properties. For example: <img =’employee.imageUrl’ [title]=’employee.employeeName’/> 

Event Binding: 

The above two types are used to pass value from the component to the DOM. Event binding is used to pass value from the DOM to the component.

See also  Angular Tutorial For Beginners - Part 7 : Pipes

Two way data binding: 

As the name suggests, this provides the binding from component to DOM and vice versa. In this, the value in the view and the model is the same at all times. This is two way binding. 

Learn more about data binding here.

What is difference between interface & class in Angular? 

Interfaces are a feature of typescript. There is no such concept in JavaScript. The advantage of using interfaces is that it provides a compile-time checking of the data structure. For example, I can create an interface of type Employee with certain properties. Later on, if some service returns an array of Employee, we will get compile time checking for the properties. Now, why don’t we use classes in this case, instead of interfaces. As mentioned earlier, there is no concept of interfaces in JavaScript. So, no transpiled code is created when interfaces are used. But if classes are used, a lot of JavaScript code is generated. 

For more information refer here.

Explain Angular Architecture 

The below diagram from the official Angular website aptly summarises the working of angular.

Angular Interview Questions

Angular consists of different modules. The root module usually called the AppModule is the starting point of the application. It may import functionality from other feature modules. A module in angular consists of components, directives, services, etc. The template along with metadata & component forms the view. The template and component interact with each other using data binding. The different directives modify the structure of the DOM. Services provide data to the component. 

What is content projection in Angular? 

When we create nested elements or components in a component then that is called content projection. eg. when if write <app-employee></app-employee> in our component view, the employee component will be displayed. 

See also  Angular Tutorial for Beginners - Part 2 : Modules, Components & Directives

Describe and Angular Component Lifecycle. 

Angular components come with Lifecycle hooks which can be thought of as different stages in the lifecycle of an angular component. The following are the lifecycle hooks that are called once Angular creates a component by calling its constructor. 

ngOnChanges(): This is called when Angular sets or resets its input fields. 

ngOnInit() : Initializes the component after ngOnChanges() is called. 

ngDoCheck(): This is called when change detection runs to check for changes to component properties. 

ngAfterContentInit(): This is called when Angular projects external content into the view for eg, for nested components.

ngAfterContentChecked() : This occurs after Angular checks the content projected. 

ngAfterViewInit: This is called after the component and its child views have been initialized. 

ngAfterViewChecked: Called after Angular checks the components views and child views. 

ngOnDestroy: Cleanup before Angular destroys the directive. 

A detailed explanation can be found here

Why should we not initialise our components in contructor? 

The best place to initialise your components is in the ngOnInit lifecycle hook and not the constructor because only at this point have any input property bindings been processed. The reason we use ngOnInit and not ngOnChanges to initialize a component is that ngOnInit is only called once whereas ngOnChanges is called for every change to the input properties. 

For more information refer here.

This concludes the Angular Interview Questions. The Angular interview questions above beginner level.

Also make sure to check out the Angular tutorial for beginners:

Part 1: Getting Started

Part 2: Modules, Components & Directives in Angular.

Part 3: Data binding in angular.

Part 4 : Interfaces

Part 5: Services in Angular

Part 6: Http Requests with Observables.

Part 7: Pipes in Angular

Part 8 :Nesting Components in Angular

Part 9: Routing in Angular