Angular Questions and Answers

-

List of commonly asked Angular interview questions along with clear, concise answers. 

Core Angular Concepts

1. What is Angular?

Angular is a TypeScript-based front-end web framework developed by Google for building single-page applications (SPAs) with MVC architecture.

2. What is a Component in Angular?

A component controls a part of the UI. It consists of:

  • A class (.ts) for logic

  • An HTML template

  • Optional CSS styles

3. What is a Module?

An Angular module (NgModule) is a container for a set of related components, services, and other modules.
Example: AppModule, SharedModule

4. What are Directives?

Directives modify DOM behavior or structure.

  • Structural: *ngIf, *ngFor

  • Attribute: ngClass, ngStyle

5. What is Data Binding?

Mechanism to bind data between component and view.
Types:

  • One-way (Interpolation, Property binding)

  • Two-way ([(ngModel)])

Advanced Angular Features

6. What is Dependency Injection (DI)?

A design pattern in Angular for injecting services or objects into components or other services to increase modularity and testability.

7. What is the difference between Observable and Promise?

  • Promise: Handles one async event.

  • Observable: Can handle multiple events over time and supports operations like map, filter, etc. (from RxJS)

8. What is the purpose of ngOnInit()?

A lifecycle hook that runs after the component is initialized and the inputs are set—commonly used to fetch data.

9. What is Change Detection?

Angular automatically checks and updates the DOM when data changes.
Optimized using OnPush strategy and ChangeDetectorRef.

10. What is a Service in Angular?

Services provide business logic and data access across components. They are often singleton and injected using DI.

Routing and Navigation

11. How does Angular routing work?

The RouterModule maps URLs to components using route configuration (app-routing.module.ts).

12. What are Route Guards?

Guards control access to routes:

  • CanActivate, CanDeactivate, Resolve, etc.

13. How can you pass data between routes?

  • Route parameters: /user/:id

  • Query params: /search?term=angular

  • Navigation extras or shared services

Forms in Angular

14. Template-driven vs Reactive Forms?

  • Template-driven: Simpler, uses ngModel, defined in HTML.

  • Reactive: More scalable, defined in TS with FormControl, FormGroup.

15. How do you validate forms?

  • Built-in validators: Validators.required, etc.

  • Custom validators

  • Async validators for server-side checks

Performance and Optimization

16. What is Lazy Loading?

Lazy loading loads feature modules only when needed, improving initial load time. Configured using loadChildren in route definitions.

17. What is Ahead-of-Time (AOT) Compilation?

AOT compiles Angular HTML and TypeScript code during build time, resulting in faster rendering and better error detection.

18. What is Angular Universal?

It enables server-side rendering (SSR) of Angular apps, improving SEO and initial load speed.

19. How do you reduce bundle size in Angular?

  • Lazy load modules

  • Use --prod build

  • Enable tree-shaking

  • Use lightweight libraries

  • Remove unused code

Testing and Debugging

20. How do you test Angular components?

  • Use Jasmine and Karma for unit tests

  • Use TestBed to configure testing modules

  • Use fixture.detectChanges() to apply updates

21. What is TestBed?

A testing utility that allows creating and configuring Angular modules in tests to isolate components/services.

22. What is HttpClient and how do you mock it in tests?

HttpClient is used to make HTTP requests.
For testing, use HttpTestingController to mock requests.


Comments

Post a Comment

Popular posts from this blog

API development using .NET Core - ProductManagmentCRUD

-
Image
 1) Create Database and Table as mentioned below queries create table products(ProdId int Primary key, ProductName varchar(20), Price int ) insert into products (ProdId, ProductName, Price ) values (1,'Laptop','45000'); insert into products (ProdId, ProductName, Price ) values (2,'Mouse','500'); insert into products (ProdId, ProductName, Price ) values (3,'Router','1800'); select * from products; 2) Create ASP.NET Core API Project Install NuGet Packages  3)  AppSettings.json {   "Logging": {     "LogLevel": {       "Default": "Information",       "Microsoft.AspNetCore": "Warning"     }   },   "ConnectionStrings": {     "DbConnection": "Server=Server_name; Database=ProductManagementCrud; User Id=sa; password=oj#$kdfn; TrustServerCertificate=True;"   },   "AllowedHosts": "*" } 4) Model -  Product.cs namespace ProductManagmentCRUD.Mo...
Read more

Singleton Design Pattern Realtime Example of banking

-
Image
Logger Utility in a Banking System using Singleton In a banking application, you might have a logger that logs important events like transactions, errors, and user activities. You want to ensure that only one instance of the logger exists throughout the application to maintain a consistent log format and avoid file access conflicts. 1) Why Singleton? A logging class doesn't need multiple instances. One instance is sufficient and more efficient. 2) Consistency: All log messages are centralized through one instance. 4) Resource Management: Avoids file access conflicts and redundant memory usage. using System; public sealed class Logger {     private static Logger instance;     // Private constructor to prevent instantiation from outside     private Logger()    {         Console.WriteLine(" Logger Initialized. ");     }     // Public method to get the single instance     public static Logger ...
Read more

Consume API in MVC Application

-
Image
 To map the response from API ( https://localhost:7264/api/Product ) to a .NET MVC Web App , you need to call the API from your controller and deserialize the response into a model, which you can then pass to a view. 1: Create the Product Model 2: Call API from MVC Controller 3: Register HttpClient in Program.cs (or Startup.cs ) 4: Create the Razor View ( Views/Product/Index.cshtml ) 5: Route to Controller Step 1: Create the Product Model public class Product {     public int Id { get; set; }     public string Name { get; set; }     public decimal Price { get; set; } } Step 2: Call API from MVC Controller using Microsoft.AspNetCore.Mvc; using ProductManagementMVC.Models; using System.Net.Http.Headers; using System.Text.Json; namespace ProductManagementMVC.Controllers {     public class ProductController : Controller     {         private readonly HttpClient _httpClient;         public Pro...
Read more