SOOPRO Pathshala provides Angular Interview Questions and Answers
Angular is an open-source, JavaScript framework wholly written in TypeScript
Angular was introduced to create Single Page applications.
TypeScript is a superset of JavaScript that offers excellent consistency.
Data binding is a phenomenon that allows any internet user to manipulate Web page elements using a Web browser.
Angular uses the two-way binding. Any changes made to the user interface are reflected in the corresponding model state.
Misko Hevery
Single-page applications are web applications that load once with new features just being mere additions to the user interface. It does not load new HTML pages to display the new page's content, instead generated dynamically.
AngularJs uses Javascript language
Angular uses Typescript language
AngularJs supports Model view controller design
Angular Uses components and directives
AngularJs not supported by mobile browsers
Angular supports all popular mobile browsers
1. MVC architecture-Angular is a full-fledged MVC framework. It provides a firm opinion on how the application should be structured.
2. Modules- Angular consists of different design patterns like components, directives, pipes, and services, which help in the smooth creation of applications.
3. Dependency injection-Components dependent on other components can be easily worked around using this feature.
4. Other generic advantages-Include clean and maintainable code, unit testing, reusable components, data binding, and excellent responsive experience.
Angular Templates are written with HTML that contains Angular-specific elements and attributes.
In combination with the model and controller's information, these templates are further rendered to provide a dynamic view to the user.
Annotations in Angular are used for creating an annotation array. They are the metadata set on the class that is used to reflect the Metadata library.
Directives are attributes that allow the user to write new HTML syntax specific to their applications.
Angular supports three types of directives.
1. Component Directives
2. Structural Directives
3. Attribute Directives
The Ahead-of-time (AOT) compiler converts the Angular HTML and TypeScript code into JavaScript code during the build phase, i.e., before the browser downloads and runs the code.
Some of its advantages are as follows.
1. Faster rendering
2. Fewer asynchronous requests
3. Smaller Angular framework download size
4. Quick detection of template errors
5. Better security
Components are the basic building blocks of the user interface in an Angular application. Every component is associated with a template and is a subset of directives.
Pipes are simple functions designed to accept an input value, process, and return as an output, a transformed value in a more technical understanding. Angular supports several built-in pipes.
Some key features include:
1.Pipes are defined using the pipe “|” symbol.
2.Pipes can be chained with other pipes.
3.Pipes can be provided with arguments by using the colon (:) sign.
PipeTransform interface receives an input value and transforms it into the desired format with a transform() method. It is typically used to implement custom pipes.
A pure pipe doesn't use any internal state, and the output remains the same as long as the parameters passed stay the same.
An impure pipe is called regardless of the change in the input fields. Multiple pipe instances are created for these pipes. Inputs passed to these pipes can be mutable.
NgModules are containers that reserve a block of code to an application domain or a workflow.
. @NgModule takes a metadata object that generally describes the way to compile the template of a component and to generate an injector at runtime.
Filters are used to format an expression and present it to the user. They can be used in view templates, controllers, or services.
some inbuilt features are as follows:
date - Format a date to a specified format.
filter - Select a subset of items from an array.
Json - Format an object to a JSON string.
limitTo - Limits an array/string, into a specified number of elements/characters.
lowercase - Format a string to lowercase.
AngularJS controllers control the data of AngularJS applications. They are regular JavaScript Objects. The ng-controller directive defines the application controller.
The scope in Angular binds the HTML, i.e., the view, and the JavaScript, i.e., the controller. It as expected is an object with the available methods and properties.
1. ngOnChanges() - Responds when Angular sets/resets data-bound input properties.
2. ngOnInit() - Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties
3. ngDoCheck() - Detect and act upon changes that Angular can't or won't detect on its own.
4. ngAfterContentInit() - Responds after Angular projects external content into the component's view.
5. ngAfterContentChecked() - Respond after Angular checks the content projected into the component.
6. ngAfterViewInit() - Respond after Angular initializes the component's views and child views.
7. ngAfterViewChecked() - Respond after Angular checks the component's views and child views.
8. ngOnDestroy - Cleanup just before Angular destroys the directive/component.
String Interpolation is a one-way data-binding technique that outputs the data from TypeScript code to HTML view. It is denoted using double curly braces. This template expression helps display the data from the component to the view. {{ data }}
Template statements are properties or methods used in HTML for responding to user events.
TypeScript class is one that is used to create components. This genre of class is then decorated with the "@Component" decorator.
Angular Services perform tasks that are used by multiple components.
A service can be written once and injected into all the components that use that service.
Promises - They emit a single value at a time. They execute immediately after creation and are not cancellable. They are Push errors to the child promises.
Observables - They are only executed when subscribed to them using the subscribe() method. They emit multiple values over a period of time. They help perform operations like forEach, filter, and retry, among others. They deliver errors to the subscribers. When the unsubscribe() method is called, the listener stops receiving further values.
ngOnInit is a lifecycle hook and a callback method that is run by Angular to indicate that a component has been created. It takes no parameters and returns a void type
The ngFor directive is used to build lists and tables in the HTML templates.
Bootstrap is a powerful toolkit. It is a collection of HTML, CSS, and JavaScript tools for creating and building responsive web pages and web applications.
There are two ways to embed the bootstrap library into your application.
1. Angular Bootstrap via CDN - Bootstrap CDN is a public Content Delivery Network. It enables you to load the CSS and JavaScript files remotely from its servers.
2. Angular Bootstrap via NPM - Another way to add Bootstrap to your Angular project is to install it into your project folder by using NPM (Node Package Manager).
Eager loading
is the default module-loading strategy. Feature modules under Eager loading are loaded before the application starts.
Lazy loading
dynamically loads the feature modules when there's demand.
Angular uses the regular DOM. This updates the entire tree structure of HTML tags until it reaches the data to be updated.
Client-side frameworks like Angular were introduced to provide a more responsive user experience. By using a framework, developers can create web applications that are more interactive and therefore provide a better user experience.
An Angular application is a Single Page Application, or SPA. This means that the entire application lives within a single page, and all of the resources (HTML, CSS, JavaScript, etc.) are loaded when the page is first loaded.
One major difference between Angular expressions and JavaScript expressions is that Angular expressions are compiled while JavaScript expressions are not.
Components are the smallest, self-contained units in an Angular application. They are typically used to represent a view or UI element, such as a button or a form input field.
This means that the Angular application is rendered on the client-side — in the user's web browser. Client-side rendering has a number of advantages, including improved performance and better security.
Sharing data between components in Angular is simple and easy. To share data, all you need to do is use the Angular CLI to generate a new service. This service can be injected into any component and will allow the components to share data.
Dependency injection is a technique used to create loosely coupled code. It allows pieces of code to be reused without the need for hard-coded dependencies. This makes code more maintainable and easier to test.
MVVM architecture is an architectural pattern used mainly in software engineering. It stands for Model-View-ViewModel. MVVM is a variation of the traditional MVC (Model-View-Controller) software design pattern.
RxJs is a library that provides reactive programming support for Angular applications. It allows you to work with asynchronous data streams and handle events over time.
A parameterized pipe in Angular is a pipe that accepts one or more arguments, also known as parameters. Pipes transform data in Angular templates, and parameterized pipes allow you to customize the transformation based on specific requirements. By passing parameters to a pipe, you can modify its behavior and apply different transformations to the data.
Class decorators in Angular are a type of decorator that can be applied to a class declaration.
They are used to modify the behavior of the class or add additional functionality. Class decorators are defined using the @ symbol followed by the decorator name and are placed immediately before the class declaration
Method decorators in Angular are decorators that can be applied to methods within a class.
They are used to modify the behavior of the method or add additional functionality. Method decorators are defined using the @ symbol followed by the decorator name and are placed immediately before the method declaration.
They can be used for tasks like logging, caching, or modifying the method's behavior based on specific conditions.
Property decorators in Angular are decorators that can be applied to class properties.
They are used to modify the behavior of the property or add additional functionality. Property decorators are defined using the @ symbol followed by the decorator name and are placed immediately before the property declaration.
They can be used for tasks like validation, memoization, or accessing metadata associated with the property.
Router links in Angular are used for navigation within an application. They are defined using the routerLink directive and provide a way to navigate to different routes or components.
Router links can be used in HTML templates and are typically placed on anchor (a) tags or other clickable elements. By specifying the destination route or component, router links allow users to navigate between different parts of an Angular application.
The router state in Angular represents the current state of the Angular router. It contains information about the current route, including the URL, route parameters, query parameters, and other related data.
Angular Material is a UI component library for Angular applications. It provides a set of pre-built and customizable UI components, such as buttons, forms, navigation menus, and dialog boxes
Transpiling in Angular refers to the process of converting TypeScript code into JavaScript code that web browsers can execute.
HTTP interceptors in Angular are a feature that allows you to intercept HTTP requests and responses globally.
Interceptors provide a way to modify or handle HTTP requests and responses at a centralized location before they reach the server or client.
Change Detection in Angular is a mechanism that determines when and how to update the user interface based on changes in the application's data model.
A bootstrapping module in Angular is the main entry point of an Angular application. It is responsible for starting the application and initializing the root component.
The bootstrapping module is typically defined in the main.ts file and is configured in the Angular AppModule.
This operator allows you to provide a fallback value or execute alternative logic when an error occurs.
You can chain the catchError operator after the observable that might produce an error and define a callback function to handle the error. Within the callback function, you can perform error handling tasks such as logging the error, displaying an error message to the user, or initiating a retry mechanism.
To include SASS (Syntactically Awesome Style Sheets) into an Angular project, you need to install the required dependencies and configure the project accordingly. Follow these steps:
1. Install the node-sass package by running the command npm install node-sass --save-dev.
2. Update the angular.json file in your project's root directory.
3. Locate the styles property under architect > build > options.
4. Change the file extension from .css to .scss to indicate that you are using SASS.
5. Rename your existing CSS files to SCSS files (e.g., styles.css to styles.scss).
6. Restart the Angular development server for the changes to take effect.
Angular templates are intended for defining the structure and layout of the user interface, and including scripts directly within the template goes against the separation of concerns principle.
When a script tag is used within a template, the browser treats it as part of the HTML content and attempts to execute it.
To share data from a parent component to a child component in Angular, you can make use of input properties. Input properties allow you to pass data from a parent component to a child component.
In Angular, "ng" stands for "Angular".
Some key concepts of Angular include components, modules, templates, data binding, services, dependency injection, and routing.
A scope is an object that refers to the application model. It is a context in which expressions can be executed. These scopes are grouped hierarchically, comparable to the DOM structure of the application.