Interview Question (8920128728): Angular Interview Questions and Answers

Angular is a JavaScript-based framework developed by Google. Angular allows developers to build applications for browsers, mobile, and desktop using web technologies like HTML, CSS, and JavaScript. This article contains the top 20 Angular interview questions and answers, in order to prepare you for the interview.

What is Angular?

Angular is a JavaScript-based framework developed by Google. Angular allows developers to build applications for browsers, mobile, and desktop using web technologies like HTML, CSS, and JavaScript.

Angular2+ is different from Angular1.x and it is completely re-written from scratch using Typescript. At the time of writing this, book the latest version of Angular was 7 which was released on 19 Oct 2018.
Explain the evolution history of Angular?

The evolutionary history of Angular is given below –
What are the differences between Angular2+ and Angular 1.x?

There are the following differences between Angular2+ and Angular 1.x are given below:

Angular 2+

Angular 1.x

Based on components

Based on controller and scope

Improved DI

Supports DI

Mobile First

Not built with mobile first

Supports ES5/6, TS or Dart

Supports ES5/6 or Dart

Supports Angular CLI

Doesn’t have CLI

The class is the only way to define services in Angular2

factory, service, provider, value and constant are used for services

Runs on client-side & server-side

Run on only client-side

bootstrapModule() function is used to initialize

ng-app and angular.bootstrap() function are used to initialize

Supports Pipe

Support filters

Supports camelCase and PascalCase syntaxes likengModel, 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
Why uses Angular?

There are multiple reasons to use Angular over other front-end frameworks which are listed below.
- Angular is a full-featured Single Page Application (SPA) framework
- The product of Google and completely open-source
- Follows MVC (Model View Controller) architecture
- Simple Dependency Injection implementation
- It supports Typescript and ES6 standard
- Able to create a re-usable component, modules, routes
- Supports to enable testing using jasmine and karma
- Great community support
Important fundamentals of Angular

Angular has large numbers of feature which makes it more useful over other front-end frameworks, below is the list of important features.
- Component
- Module
- Data bindings
- Services
- Dependency Injection
- Directives
- Templates
- Application Bootstrapping
- Navigation
- Native mobile development
What are the new features of Angular 7?

Recently Angular has released its newer version Angular 7, and with this version, we got several updated as well as the new features and these are listed below.
- CLI Prompt
- Angular Elements
- Updates in Angular Material
- Virtual scrolling
- Drag and Drop
- Setting budgets
- Checking bundle size
- Ivy rendering engine
- Typescript 3.1 supports
How to update your app to Angular 7?

If you want to work on the latest version of the Angular then we need to update our Angular CLI as well as Core angular packages by using below command.
```
 ng update @angular/core @angular/cli
```
What is an Angular CLI?

Angular Command Line Interface is a command line tool which is used to create, initialize, scaffold and to manage the whole angular application. We can also use Angular Console tool to work with the command line to generate or work with different part of the Angular application, using CLI we can manage everything using commands.

You can find the complete details of Angular CLI and different commands into the CLI introduction part later on this series.
What are the features of Angular CLI?

Angular CLI is a powerful command-line tool by which we can create new files, update the file, build and deploy the angular application and other features are available so that we can get started with Angular development within few minutes.
- Packaging application and release for the deployment
- Testing an Angular app
- Bootstrapping Angular app
- Various code generation options for Component, Module, Class, Pipes, Services, Enums, and many other types are also supported.
- Running the unit test cases
- Build and deployment our Angular application
What is the Angular Console?

Angular CLI is a powerful tool and by using this we can develop an Angular application without following complex stuff. Angular Console is a way to achieve different command line features using a simple GUI which is completely alternative to know all of the CLI commands. To download the GUI tool, you can get the executable file from here. And after downloading the tool, it will look like this.
What are the advantages of the Angular Console?

There are a few advantages and features provided by the Angular Console.
- Build CLI Commands visually
- Internal terminal for the output
- Import the existing Angular project
- Trivial code generation
- Run the custom NPM scripts
- Install various extensions
How to get the version of Angular CLI?

To get the current version of the Angular CLI, we can use the below command.
```
 ng –version
```
After running above command, we will get the output like this.
How to specify the type of stylesheet using the command?

Angular 7 provides the CLI prompt where we can choose stylesheet type from the available option, but for an older version, CSS was the default format for styling the pages. But for that, we can use additional flag --style to specify any other supported stylesheet type than css, below is the simple example by which we can use specific stylesheet format while creating a new Angular app.
```
 ng new <project_name>--styles <type>
```
Example
```
 ng new ngDemo --styles scss
```
After running the above command, now our default stylesheet format will be SCSS, not the CSS, this is how we can change the stylesheet type.
What is Component in Angular?

Components are the basic building block of an Angular application. An Angular component mainly contains a template, class, and metadata. It is used to represent the data visually. A component can be thought of as a web page. An Angular component is exported as a custom HTML tag like as: <my-app></my-app>.

When we create new create an Angular app using CLI, it will create a default App component as the entry point of application. To declare a class as a Component, we can use the Decorators and decorator to declare a component looks like the below example.
```
 import{ Component } from'@angular/core';
 
 @Component({
 selector: 'my-app',
 template: `<h1></h1>`,
 styleUrls: ['./app.component.css']
 })
 exportclassAppComponent {
 message = "Hello From Angular";
 }
```
For creating a component, we can use decorator @component like the above example. If we are using Angular CLI than new component will be created using the below ng command.
```
 
 ng generate component democomponent
```
What is the Template Expression?

Template 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 (--). Let’s see a simple example of the mathematical calculation using template expression.
App.component.html
```
 
 <p>Addition : 2</p>
 <p>Subtraction : -25</p>
 <p>Multiplication : 1250</p>
 <p>Division : 0.5</p>
```
Here we have used brackets in order to use an expression within our template, and you can see the output like this.
What is Data Binding in Angular?

Data binding is one of the important core concepts which is used to do the communication between the component and DOM. In other words, we can say that the Data binding is a way to add/push elements into HTML Dom or pop the different elements based on the instructions given by the Component. There are mainly three types of data binding supported in order to achieve the data bindings in Angular.
- One-way Binding (Interpolation, Attribute, Property, Class, Style)
- Event Binding
- Two-way Binding
Using these different binding mechanisms, we can easily communicate the component with the DOM element and perform various operations.
What is Interpolation?

Interpolation in Angular is used to show the property value from component to the template or used to execute the expressions. Generally, interpolation can be used to execute the JavaScript expressions and append the result to the Html DOM. Another use of Interpolation is to print the data or we can say one-way data, which is coming from the component i.e. from a variable or the item of an array. And interpolation can be used to achieve Property binding as well by using curly braces , let’s see a simple example.
App.component.ts
```
 myMessage: string = "Hello World";
```
App.component.html
```
 <p></p>
 <p>Total : 250</p>
```
The same way, we can use interpolation to the different places or elements like the source of the image, values for the classes, and other use as well. The output will look like this.
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. Let’s see the simple example by taking simple string value from component to the template.
App.component.ts
We are going to create a string variable with a default value like this.
```
 myMessage: string = "Hello World";
```
And to show this message into the template, we will use a symbol which is called interpolation like this.
App.component.html
```
 <h1></h1>
```
Whenever we change the value of the myMessage variable, at that time it will be reflected in the template but not vice versa.
What is Directive in Angular?

The directive in Angular basically a class with the (@) decorator and duty of the directive is to modify the JavaScript classes, in other words, we can say that it provides metadata to the class. Generally, @Decorator changes the DOM whenever any kind of actions happen and it also appears within the element tag. The component is also a directive with the template attached to it, and it has template-oriented features. The directive in Angular can be classified as follows.
1. Component Directive
2. Structural Directive
3. Attribute Directive
What is Module in Angular?

The module in Angular is a very essential part of the application, which is used to organize our angularapp into a distributive manner. Or we can say that Modules plays an important role to structure our Angular application. Each Angular application must have one parent module which is called an app module and it contains the list of different items which are listed below.
- Components
- Service providers
- Custom modules
- Routing modules
- Pipes
  
  Module file group all of them into a single file; the same module will be useful for bootstrapping the application.