TOP Angular - Interview Questions and Answers

Q.1 What Is Angular/What Do You Know About Angular?

Angular is an open-source, front-end web development framework based on TypeScript. It is most suited for developing enterprise web applications because the code is reusable and maintainable. Angular started as a SPA (Single-Page-Application) framework and now supports dynamic content based on different users through dependency injection. YouTubeTV is the most popular company that uses Angular.


Q.2 What Is the Purpose of Angular?


The purpose of using Angular is to create fast, dynamic, and scalable web applications with ease, using components and directives.


Q.3 What Are the Essential Building Blocks of Angular?

The concept of Angular is based around Components, which is the first building block. Components follow tree structures where the App component is the root component. A component encapsulates the logic of the view, data, and the HTML mark-up. Every app must have at least one part. The more the parts of smaller sizes, the better is the readability of the code.
Module, the second most crucial building block is a container that groups related components. The default module in an application is the app module. Blades should be small in size and have related components.

The other essential building blocks of Angular are:
Templates: Templates are written in HTML and contain Angular elements and attributes. Models provide a dynamic view to the user by combining information from the controller and view and rendering it.
Directives: Directives allow developers to add new HTML syntax, that is application-specific. The behavior is essentially added to the existing DOM elements.
Services: Rather than calling the Http service, Angular allows for the creation of new service classes. When new Services are created in Angular, they can be used by different components.

Q.4 What is main Difference Between Angular and Angularjs

AngularJS	Angular
Based on JavaScript	Based on TypeScript
Based on the MVC design pattern	Based on components, modules, and directives
No support for mobile app	Supports mobile
Can’t build SEO friendly applications	SEO friendly applications can be easily created
Dependency Injection tokens can only be strings. Also, only the injector is present.	DI Tokens can be of any type, for example, strings or class. Angular follows a tree-hierarchy for injectors starting with the root injector, and a nozzle for each component henceforth.
No support or backward compatibility	Backward compatibility can be done without issues. Also, there is a lot of support documentation for the same.
Uses $routeprovider.when() for routing	Routing is done using @RouteConfig[()]
Requires specific ng directive for each of property, event, and image	For event binding, () is used and for image or property binding [] is used

Q.5 Explain the main features of Angular

Here are the main features of Angular

Component-based architecture – applications are written as a set of independent components.
Parts can be created, tested, integrated using Angular CLI.
Great support for complex animations without writing much code.
Because of the component router, Angular supports automatic code-splitting. Hence only the code required to render a particular view is loaded.
Cross-platform application development.
Template syntax for creating UI views.

Q.6 What are the advantages of angular . ?

There are many advantages apart from the fact that Angular gives us a break from the MVC pattern, as it follows a Component-based structure. Here are some more critical benefits –

• Supports two-way data binding.
• Supports validations and template syntax (both angular and static).
• We can add custom animations, directives, and services.
• The event handling process is seamless.
• Hierarchical Dependency Injection structure (Parent-child).
• Provision to facilitate RESTful services and client-server communication.

Q.7  What are the Disadvantages of Angular . ?

Not as a disadvantage, but in some scenarios, Angular may not be the right fit. For example, for short-term projects or light-weight websites that have more static content do not require a complex framework like Angular. Same way, apps that have a microservice design approach will find too many unused features if they use Angular since it is a complete solution. There is less flexibility with the developer to choose additional tools.

Q.8  What Is Angular CLI? How Do You Use It?

Angular CLI automates the end-to-end development process. The app's initialization, configuration, and development process become straightforward and easy. With a CLI (Command Line Interface), we can create a new project, add new features, and run tests (unit tests and end-to-end tests) by just typing a few simple commands. This way, development and testing processes both become faster.

For Examples:- 

ng new <appname> [options]
to create a class using CLI (in Angular 7), we have to type –
ng generate class MySampleClass [options]
to generate a component,
ng g c <componentname>

Q.9 What Are Directives in Angular?

With directives, developers can write application-specific custom HTML syntax. The new language is written in the DOM, and the Angular compiler executes the directive functions when it finds a new HTML syntax. 

There are three types of directives – 
attribute, 
component, 
structural.

Q. 10  Can you please explain about Structural Directive

Structural directives change the structure of DOM. Examples, *ngIf and *ngFor. Usage example.

<div *ngIf = “product” class=”name”>{{product.name}}</div>

Same way.

<ul> <li *ngFor = “Show product list”>{{product.name}}</li> </ul>




Q.11 How Is Dependency Injection (DI) Done in Angular?

In Angular, a class asks for services or objects when it is instantiated, which means if a class is invoked, it doesn’t create any objects, rather it depends on an external source to instantiate objects, services, or parameters. In this process, an injectable service is created and registered. Injectors can be configured in three different ways,
@Injectable() decorator for the service.
@NgModule for NgModule.
@Component for the component.


Q.12 What Are Templates in Angular?

The template is simply an HTML view where binding controls can display data to the properties of the Angular component. Templates can be defined inline using the template property as –

Template:

<div>My Template</div>

Or can be called from a different HTML file by using @Component decorator’s URL property –
templateUrl: 'app/app.component.html'

Q.13 How Are Angular Expressions Different From Javascript Expressions?

Both are similar and can have operators, variables, and literals. However, some differences between both are –

Angular expressions	JavaScript expressions
Conditions, exceptions, and loops (control statements) cannot be used	All the control statements can be used
Regular expressions cannot be used	Regex is widely used
Filters can be used within the expression itself so that data is formatted before being displayed	Such a concept doesn’t exist
Expressions are evaluated against a scope object	Expressions are evaluated against the global window
Expression evaluation forgives to undefined or null	If there are issues in evaluating an expression or property, JS generates ReferenceError or TypeError.
Functions cannot be declared	Any number of functions can be declared
New, comma, bitwise, void operators cannot be used.	These are possible

Q.14 Explain the Architecture of Angular

As we have seen in Question 2, Components, modules, templates, etc. are the main building blocks of Angular. All of these are again based on NgModules, which provide compilation context for components. When asked in the interview, you can talk about the essential building blocks and then draw the following diagram (source: angular documentation) to depict the relationship between each –

You can see that the view is contained in the template, and properties are bound from components to the template. The DI services are injected by the injector into the parts as required. Directives are added to the model. Modules contain the core logic like services, values, functions, and components.

Add caption