Most Asked Angular Interview Questions ?

1. What is Angular?

Angular is a javascript(actually a Typescript bases open-source full-stack web application) framework which makes you able to create reactive Single Page Application nothing but SPA. Angular is completely based on Components. It consists of Several Components which form a tree structure with parent and child components. Angular’s versions beyond 2+ are generally known as Angular only.

2. Difference between AngularJS vs Angular?

AngularJS (1.x)

Angular (2–9)

Language

Javascript

Typescript

Architecture

Controller

Component

Mobile Complaint

No

Yes

CLI

No

Yes

Lazy Loading

No

Yes

SEO

No

Yes

Server Side

No

Yes

3. Explain directives in Angular?

Directives help you to attach behavior to your HTML DOM or else in simply we can say Directives are Angular Syntaxes which we write inside HTML

The highlighted one in the above code are comes under the directives.

4. Explain the types of Angular directives and elaborate on them?

There are 3 kinds of directives in Angular itself and its simply you can remember as SAC.

1. Structural directive

It starts with a * sign . These directives are used to manipulate and change the structure of the DOM elements. For example, *ngIf and *ngFor.

2. Attribute directive

These are used to change the look and behavior of the DOM elements. For example: ngClass, ngStyle etc.

3. Component directive

These are used in main class. They contain the detail of how the component should be processes instantiated and used at runtime.

5. Explain the need for the NPM and Node_Modules folder?

NPM is simply known as Node Package Manager it helps in the installation of Javascript Framework. For suppose if we want to install jQuery just simply type in Terminal

-> Terminal — “npm install jquery

“node_modules” where all packages are going to be installed at the time of project creation.

6. What is Package.json file in Angular?

The package.json is used by all projects in the workspace, including the initial app project that is created by the CLI when it creates the workspace. Initially, this package.json includes a starter set of packages, some of which are required by Angular and others that support common application scenarios.

7. What is Typescript?

Typescript is a superset of Javascript. Typescript is a primary language for Angular application development with design-time support for type safety and tooling. Browsers can’t execute Typescript directly

8. Explain the importance of Angular CLI?

Angular CLI makes it easy to start with an Angular project. Angular CLI comes with commands that help us create and start on our project very fast. let us now go through the commands available to create a project, a component, and services, change the port, etc.

To install the CLI and to create a project. Below are the commands.

-> Terminal — “npm install @angular/cli” once the CLI is installed we need to create the project with the below command

-> Terminal — “ng new myapp” It creates a project template.

9. Explain the importance of Component and Modules?

Component:

A component is for code binding. Components are the UI building block of an Angular app. An Angular app contains a tree of Angular Components.

Module:

The module internally groups components, directives, pipes, and services which are related, in such a way that is combined with other modules to create an application. Another way to understand angular modules is by classes. In class, we can define public or private methods.

10. What is a decorator in Angular?

Decorators are the features of Typescript and are implemented as functions. The name of the decorator starts with @ symbol following by brackets and arguments. That means in angular whenever you find something which is prefixed by @symbol, then you need to consider it as a decorator.

11. What are Data Annotations or MetaData?

Whatever answer we have answered for decorator the same answer holds to.

12. What are templates in Angular?

Templates are simply Views of HTML and we can write directives. There are two ways of defining Template one is inline and the other is a separate HTML File. Templates are used to display the information from the model and controller that a user sees in his browser.

13. What are the types of Data Bindings in Angular?

Data bindings are used to define the communication between a component and the DOM.

Data bindings can be either one-way data binding or two-way data binding.

One-way data-binding:

It is simple one-way communication where the HTML template is changed when we make changes in the Typescript code.

Two-way data-binding:

In two-way data-binding, automatic synchronization of data happens between the Model and the View.

  • String Interpolation — {{}} — Adds the value of a property from the component.
  • Property binding — [] — We bind a property of a DOM element to a field which is a defined property in our component Typescript code.
  • Two-way binding — [()] — In two-way property binding and event binding combined together.
  • Event binding — () — It is used to handle the events raised from the DOM like button click, mouse move etc.

14. Explain the architecture of Angular?

The architecture of an Angular application relies on certain fundamental concepts. The basic building blocks are NgModules, which provide a compilation context of components.NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module that enables bootstrapping and typically has many more features modules. Components define views, which are sets of screen elements that Angular can choose among and modify.

15. What is SPA in Angular?

SPA stands for Single Page Application

SPA is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.

16. How do we implement SPA in Angular?

To implement in SPA in Angular we need to use the Angular routing.

Routing is a simple collection that has two things URL and when this URL is called which component to load. So routing helps you to define the navigation for your angular application. So if you want to move from one screen to another screen and you want to respect SPA that means not loading and refreshing the whole UI routing is needed.

17. Explain Lazy Loading in Angular?

Lazy loading is a technique in which you load some part of the web page at a later point of time when it’s actually needed. But why does someone do that? Angular is a SPA meaning it has only a single page.. all the other content on the DOM and rendered using Javascript.

If your app is pretty big, and you have a single Javascript bundle, then your app will probably a failure when in production. This is were you need lazy-loading. You should be splitting up the application into smaller bundles and then load bundles when you need to.

18. Define Services?

We might come across a situation where we need some code to be used everywhere on the page. It can be for data connection that needs to be shared across components, etc. Services help us achieve that. With services, we can access methods and properties across other components in the entire project.

To create a service — Terminal -> “ng g service myservice

19. What is Dependency Injection?

A dependency in Angular can be a class, referred to as service or even a simple object. Angular’s Dependency injection is based on providers.injectors and tokens. Every Angular module has an injector associated with it. The injector is responsible to create the dependencies and inject them when needed.

20. Differentiate between ng serve and ng build?

“ng serve” does not write build and it builds artifacts from memory instead of faster development experience.

“ng build,” writes generated build artifacts to the output folder

So when you want to go for production “ng build” command is used.

I hope this article helps you in cracking the Angular Interview,

keep learning..!

--

--

--

Full Stack Developer | Top Writer ✍🏻 Medium | C# Corner MVP 🏅| Cloud Enthusiast ☁️

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Universal Scrubbing Experience on Web

How to setup StoryBook for React, Vue and Angular

Managing and deploying NodeJS monorepo project

Documenting a NodeJS REST API with OpenApi 3/Swagger

Deep Linking Your React Native App

Building a Rails + JavaScript SPA

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jay Krishna Reddy

Jay Krishna Reddy

Full Stack Developer | Top Writer ✍🏻 Medium | C# Corner MVP 🏅| Cloud Enthusiast ☁️

More from Medium

Angular Dependency Injection Provider

Data Binding in Angular

Lazy loading: Angular modules

Lazy loading angular cover

Angular Datatable with an Example