Angular Interview Questions and Answers

1- What is Mean stack?

Mean Stack stands for :

  • MongoDb
  • Express js
  • Angular
  • Nodejs

MongoDB – MongoDB is a document database, It stores data in  JSON-like documents, fields can vary from document to document and data structure can be changed over time.

Express – Express is a Node.js web application framework that provides a robust set of features for web and mobile applications.

Angular – Angular is a typescript based open source, web application framework. It is a platform for creating efficient and sophisticated single-page apps.

Nodejs – Node.js is an open-source javascript run time environment , It allows us to run javascript on the server.

2- What is Angular?

Angular is a typescript based open source, web application framework, it provides an easy way to make single page web applications, using angular framework.

It has great features like Component& Templates, Reactive Forms, Observable & RxJS, NgModules, Routing, Dependency Injection and various which together makes web application development very simple.

3- What is ng-content Directive?

ng-content Directive allows us to show the content that we write directly between any component selector, for example lets takean  app-demo selector below :

<app-demo>this content will show when you use ng content directive</app-demo>

the content between the selector in above line, will only show when you use ng content directive i.e <ng-content></ng-content>.

4- What are the advantage of using Angular?

– It follows MVC Pattern architecture

– It supports two way data – binding

– It supports Dependency injection

– It has got great community support

– Testing is extremely simple

– Makes component highly reusable

– It has strong Features like Reactive forms, Animation, Validations

5- What is data binding?

In angular there are 4 types of Binding:

String Interpolation

Property Binding

Event binding

Two-Way Data Binding

Interpolation: 

The easiest way to display a component property is to bind the property name through interpolation. With interpolation, you put the property name in the view template, enclosed in double curly braces: {{MeanAcademy}}

Property Binding:

 In interpolation there is a limitation it can only work with string values, there can some times situations where we need to bind boolean values, then comes the role of property binding as shown below, here is Unchanged is passing true or false for making it disabled/Enabled.

 <button [disabled]=”isUnchanged”>Disabled Button</button>

Event binding :

 In both the above bindings we looked that the data flow is from component class to template , but sometimes we need to response to user events such as  mouse clicks or keyboard events at that time we need the data flow in other direction as well, then there comes the role of Event binding. 

<button (click)=”onSave($event)”>Save</button>

In above button code, when user click’s save button, onSave method gets executed, passing event information to the function called and also we can receive data from the function called. 

Event binding allows us to listen for certain events such as keystrokes, mouse movements, clicks, and touches.

Two way Binding : 

Some time it is essential that our class/ts file and template/html file should be in sync, for that we need to use two way binding.

Angular offers a special two-way data binding syntax for this purpose, [()]. The [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, (). 

The NgModel directive allows you to display a data property and update that property when the user makes changes. Here’s an example:

<label for=”example-ngModel”>[(ngModel)]:</label>

<input [(ngModel)]=”currentItem.name” id=”example-ngModel”>