Angular Questions & Answers
Provides Latest and Useful Interview Q & A on Angular technology
Provides Latest and Useful Interview Q & A on Angular technology
1. What is Angular?
Angular is an open-source, JavaScript framework wholly written in TypeScript.
2. Why Angular was introduced?
Angular was introduced to create Single Page applications.
3. What is TypeScript?
TypeScript is a superset of JavaScript that offers excellent consistency
4. What is data binding? Which type of data binding does Angular deploy?
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.
5. Who is developer of Angular?
Misko Hevery
6. What are Single Page Applications (SPA)?
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.
7. Difference between Angular and AngularJS
AngularJs uses Javascript language
Angular uses Typescript language
AngularJs supports Model view controller design
AngularUses components and directives
AngularJsnot supported by mobile browsers
Angularsupports all popular mobile browsers
8. What are decorators in Angular?
Decorators are a design pattern or functions that define how Angular features work
Angular supports four types of decorators, they are:
9. Mention some advantages of Angular.
Some of the common advantages of Angular are -
1. MVC architecture - Angular is a full-fledged MVC framework. It provides a firm opinion on how the application should be structured. It also offers bi-directional data flow and updates the real DOM.
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.
10. What are Templates in Angular?
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.
11. What are Annotations in Angular?
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.
12. What are Directives in Angular?
Directives are attributes that allow the user to write new HTML syntax specific to their applications.
Angular supports three types of directives.
13. What is an AOT compilation? What are its advantages?
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.
14. What are Components in Angular?
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. An Angular application typically consists of a root component, which is the AppComponent, that then branches out into other components creating a hierarchy.
15. What are Pipes in Angular?
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:
15. What is the PipeTransform interface?
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.
16. What are Pure 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. Angular calls the pipe only when it detects a change in the parameters being passed. A single instance of the pure pipe is used throughout all components.
17. What are Impure Pipes?
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.
18. What is an ngModule?
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.
19. What are filters in Angular? Name a few of them.
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:
20. What are controllers?
AngularJS controllers control the data of AngularJS applications. They are regular JavaScript Objects. The ng-controller directive defines the application controller.
21. What do you understand by scope in Angular?
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.
22. Explain the lifecycle hooks in Angular
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.
23. What is String Interpolation in Angular?
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 }}
24. What are Template statements?
Template statements are properties or methods used in HTML for responding to user events.
25. What is the difference between AOT and JIT?
Ahead of Time (AOT) compilation converts your code during the build time before the browser downloads and runs that code. This ensures faster rendering to the browser. To specify AOT compilation, include the --aot option with the ng build or ng serve command.
The Just-in-Time (JIT) compilation process is a way of compiling computer code to machine code during execution or run time. It is also known as dynamic compilation. JIT compilation is the default when you run the ng build or ng serve CLI commands.
26. Explain the @Component Decorator
TypeScript class is one that is used to create components. This genre of class is then decorated with the "@Component" decorator. The decorato’s purpose is to accept a metadata object that provides relevant information about the component.
27. What are Services in Angular?
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.
28. What are Promises and Observables in Angular?
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.
29. What is ngOnInit? How is it defined?
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
30. What is used of ngFor in a tag?
The ngFor directive is used to build lists and tables in the HTML templates.
31. What is Bootstrap? How is it embedded into Angular?
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).
32. What is Eager and Lazy loading?
Eager loading is the default module-loading strategy. Feature modules under Eager loading are loaded before the application starts. This is typically used for small size applications.
Lazy loading dynamically loads the feature modules when there's a demand. This makes the application faster. It is used for bigger applications where all the modules are not required at the start of the application.
33. What type of DOM does Angular implement?
Angular uses the regular DOM. This updates the entire tree structure of HTML tags until it reaches the data to be updated.
34. Why were client-side frameworks like Angular introduced?
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.
35. How does an Angular application work?
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.
36. Explain components, modules and services in Angular.
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.
Modules are larger units that group together one or more related components. Services are singleton objects that provide specific functionality throughout an Angular application, such as data access or logging.
Services, on the other hand, are not isolated and can be injected into any other unit in an Angular application (component, module, service, etc.).
37. How are Angular expressions different from JavaScript expressions?
One major difference between Angular expressions and JavaScript expressions is that Angular expressions are compiled while JavaScript expressions are not.
38. Angular by default, uses client-side rendering for its applications.
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.
39. How do you share data between components in Angular?
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.
40. Explain the concept of dependency injection.
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.
41. Explain MVVM architecture.
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.
42. What are RxJs in Angular?
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.
43. What exactly is a parameterized pipe?
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.
44. What are class decorators?
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
45. What are Method decorators?
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.
46. What are property decorators?
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.
47. What are router links?
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.
48. What exactly is the router state?
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.
49. What does Angular Material mean?
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, that follow the Material Design guidelines. Angular Material simplifies the process of building consistent and visually appealing user interfaces in Angular. It offers a range of features and styles that can be easily integrated into Angular projects.
50. What is transpiling in Angular?
Transpiling in Angular refers to the process of converting TypeScript code into JavaScript code that web browsers can execute.
51. What are HTTP interceptors?
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.
52. What is Change Detection, and how does the Change Detection Mechanism work?
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. Angular uses a tree of change detectors to track changes in component properties and update the DOM accordingly. When a change occurs, Angular performs a process called change detection, which involves checking each component's properties for changes and updating the DOM if necessary. The change detection mechanism is responsible for keeping the UI in sync with the application's data.
53. What is a bootstrapping module?
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.
54. How do you deal with errors in observables?
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.
55. How to include SASS into an Angular project?
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:
56. What happens when we use the script tag within a template?
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. However, Angular's template compiler does not process or execute scripts within templates. Instead, scripts should be placed in separate JavaScript files and included using the appropriate Angular mechanisms, such as component logic or Angular modules.
57. Write a code to share data from the Parent to Child Component?
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.
58. What is the full form of ng in Angular?
In Angular, "ng" stands for "Angular".
59. What are the key concepts of Angular?
Some key concepts of Angular include components, modules, templates, data binding, services, dependency injection, and routing.
60. What is the scope?
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.