Angular Interview Questions and Answers (original) (raw)

**Angular is a popular framework for building dynamic web applications. Developed and maintained by Google, Angular allows developers to create **fast, efficient, and scalable single-page applications (SPAs) that provide a seamless user experience. It is widely used in top companies like **Google, Accenture, Microsoft, PayPal, Upwork, Netflix, etc. because of its comprehensive features and strong performance.

Here is a list of **70+ Angular Interview Questions and Answers designed for both freshers and experienced developers, covering 0 to 12 years of experience. These questions span core concepts like components, services, directives, RxJS, forms, and Angular CLI, helping you prepare for interviews and improve your Angular skills.

Table of Content

Whether you’re a beginner or a seasoned developer, this guide will enhance your problem-solving abilities and keep you up to date with the latest Angular best practices.

Angular Interview Questions for Freshers

In this section, we will discuss basic Angular questions asked in the interview suitable for the freshers.

**1. What is Angular?

**Angularis an open-source framework that is used for building **dynamic, single-page web applications. It uses TypeScript and offers tools like two-way data binding, dependency injection, and component-based architecture to build scalable and efficient apps.

**2. What are the main features of Angular?

The features of the Angular are mentioned below:

3. What is the latest version of Angular?

The latest version of Angular is 19.0.0, which was released on November 19, 2024. The features included in the Angular 19 are like standalone components, directives, and pipes by default, reducing reliance on NgModules.

4. What are the major updates in Angular 19?

The major updates done in the Angular 19 are:

5. What is Difference between Angular 18 and Angular 19?

Angular 19 offers better performance, easier component management, and improved features for developers.

Feature Angular 18 Angular 19 (Latest)
Standalone Components Supported but optional Default approach (NgModules optional)
Rendering Basic SSR improvements Incremental Hydration (partial hydration)
State Management Signals stable Linked Signals for complex state
Performance Zone.js optimization Fine-grained reactivity (less Zone.js)
SEO Improvements Basic route-level metadata Enhanced route-level rendering control
Dev Experience Manual unused import checks Automatic unused import detection
Async Operations Promises/Observables New Resource API for async state
Hydration Full app hydration Component-level hydration
Build System esbuild-based builder Improved incremental builds.

6. Why Angular was introduced?

Angular was introduced to simplify the development of dynamic, single-page applications (SPAs). It offers features like two-way data binding, component-based architecture, and dependency injection, making it easier to manage large applications. Angular also supports cross-platform development, improving code maintainability, performance, and reducing development time for web, mobile, and desktop apps.

7. How many types of compilation Angular provides?

Angular provides two types of compilation:

**JIT (Just-in-Time) Compilation:

**AOT (Ahead-of-Time) Compilation:

**8. What is a component in Angular?

A component is a fundamental building block of Angular applications. It controls a part of the user interface and manages the data and logic for that section. Components are used to create reusable UI elements and define the structure and behavior of the app.

import { Component, Input } from '@angular/core';

@Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent { @Input() title: string; @Input() links: { name: string, url: string }[];

constructor() { }

}

**9. Explain the purpose of @Component decorator in Angular.

**10. What is a module in Angular?

A module is a logical unit of the application that groups related components, directives, pipes, and services. It helps organize and manage the application by encapsulating functionality into cohesive blocks.

@NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

**11. What is Angular CLI?

Angular CLI (Command Line Interface) is a powerful tool that helps automate and streamline the development process for Angular applications. It provides a set of commands for creating, managing, and building Angular projects.

Common Angular CLI commands include:

**12. What is a directive in Angular?

Directives are special markers on a DOM element that tell Angular to do something to that DOM element or its children. Directives are used to extend HTML functionality by adding behavior to elements, such as manipulating their attributes or styling.

JavaScript `

import { Directive, ElementRef, Renderer2, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appHoverBackground]' }) export class HoverBackgroundDirective { @Input('appHoverBackground') hoverColor: string;

constructor(private el: ElementRef, private renderer: Renderer2) { }

@HostListener('mouseenter') onMouseEnter() {
    this.changeBackgroundColor(this.hoverColor || 'yellow');
}

@HostListener('mouseleave') onMouseLeave() {
    this.changeBackgroundColor(null);
}

private changeBackgroundColor(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
}

}

`

**13. What is a service in Angular?

A service is a class that encapsulates reusable logic, which can be shared across different components of an Angular application. Services are typically used for data fetching, business logic, and other operations that need to be shared.

JavaScript `

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, BehaviorSubject } from 'rxjs'; import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root', }) export class DataService { private dataSubject = new BehaviorSubject < any > (null); data$ = this.dataSubject.asObservable();

constructor(private http: HttpClient) { }

fetchData(): Observable<any> {
    return this.http.get('https://api.example.com/data').pipe(
        tap((data) => this.dataSubject.next(data))
    );
}

getData(): Observable<any> {
    return this.data$;
}

}

`

**14. Explain two-way data binding in Angular.

Two-way data binding in Angular is a mechanism that allows **synchronization of data between the model (component class) and the view (template). It ensures that changes in the model are reflected in the view and vice versa, automatically updating both when either one is modified.

JavaScript `

import { Component } from '@angular/core';

@Component({ selector: 'app-user-input', templateUrl: './user-input.component.html', styleUrls: ['./user-input.component.css'] }) export class UserInputComponent { userInput: string = '';

updateInput(value: string) {
    this.userInput = value;
}

}

`

**15. What are Angular Lifecycle Hooks?

Angular lifecycle hooks are methods that allow developers to tap into key moments in a component’s lifecycle. Key hooks include ngOnInit (called once when the component is initialized), ngOnChanges (called when input properties change), and ngOnDestroy (called before Angular destroys the component).

**16. What is the difference between Angular and AngularJS?

Feature Angular AngularJS
**Architecture Component-based architecture MVC (Model-View-Controller)
**Language TypeScript JavaScript
**Mobile Support Designed with mobile support Limited mobile support
**Performance Higher performance with AOT compilation Relatively slower due to dynamic compilation
**Data Binding Two-way data binding with reactive forms and observables Two-way data binding with scopes and watchers

**17. What is Data Binding in AngularJS?

**Data Binding in Angular provides a function Data Binding which helps us to have an almost real-time reflection of the input given by the user i.e. it creates a connection between Model and View.

**18. Differences between one-way binding and two-way binding

In Angular, both one-way and two-way data binding are supported. Angular provides mechanisms for both types of binding based on the use case.

Features One-Way Binding Two-Way Binding
Definition Data flows in one direction (from component to view or vice versa). Data flows in both directions (from component to view and vice versa).
Data Flow Unidirectional (either component → view or view → component). Bidirectional (component ↔ view).
Complexity Simpler to implement as it handles data in one direction only. More complex, as it involves synchronization between the view and the component.
Use Case Used when the view only needs to display data or when the component updates based on view changes. Used when you want to reflect changes in the model immediately to the view and vice versa.
Example {{ message }} or [property]=”value” [(ngModel)]=”value”

**19. What is string interpolation in AngularJS?

String interpolation is a technique used to bind data from the model (JavaScript) to the view (HTML) by embedding expressions within double curly braces {{ }}. It allows you to insert dynamic values or variables into the HTML content, making the view update automatically when the model changes.

{{ message }}

**20. How many types of Directives are available in AngularJS?

There are four kinds of directives in AngularJS those are described below:

**21. What is factory method in AngularJS?

AngularJS Factory Method makes the development process of AngularJS application more robust. A factory is a simple function that allows us to add some logic to a created object and return the created object.

**22. What is the digest cycle in AngularJS?

The digest cycle in AngularJS is a process where Angular compares the current and previous values of the scope model to check for changes. If changes are detected, Angular updates the view. This cycle is triggered automatically after an event like a user action, HTTP request, or model change, and it ensures that the view stays in sync with the model. It can also be manually triggered using $apply().

**23. What is dependency injection in Angular?

Dependency Injection (DI) in Angular is a design pattern where services or objects are provided to components or other services rather than being created within them. It allows for better modularity, testability, and management of dependencies. Angular’s DI framework automatically injects required services into components, making it easier to manage and maintain the application.

**24. How do you create a service in Angular?

A service can be created using Angular CLI or manually by creating a class decorated with @Injectable().

Creating a data fetching service.

JavaScript `

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' }) export class DataFetchingService { private apiUrl = 'https://api.example.com/data'; 

constructor(private http: HttpClient) { }

fetchData(): Observable<any> {
    return this.http.get < any > (this.apiUrl);
}

}

`

**25. What is an Angular router?

The Angular router is a library that enables navigation between different views or pages in a single-page application (SPA). It allows developers to define routes, handle URL changes, and load components dynamically based on the route, providing a smooth and efficient user experience without page reloads.

26. What is scope in Angular?

In Angular, scope refers to the environment or context in which variables, expressions, and functions are evaluated. It determines the visibility and accessibility of these variables within different parts of the application, particularly in relation to the component’s template and controller.

Note: In Angular 2+ (modern Angular), the term scope is no longer used. It is replaced by component state and data binding.

In this set we will be looking at intermediate Angular Interview Question for candidates with over 2 years of experience.

27. What type of DOM is used in Angular?

Angular uses the Real DOM (Document Object Model). The Change Detection mechanism is used to update only the affected parts of the DOM when data changes, improving performance. In addition, Angular uses a Shadow DOM for encapsulation, which helps isolate styles and behavior of components.

28. In How many ways Bootstrap is embedded in Angular?

In Angular, bootstarp can be implemented by the two ways:

npm install bootstrap

**29. How can you pass data between components in Angular?

Data can be passed between components using Input and Output decorators, services, or router state.

Passing data from a parent component to a child component using @Input decorator.

//child.component.ts

import { Component, Input } from '@angular/core';

@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent { @Input() childData: string; // Declare the input property }

//Child.component.html

Data from parent: {{ childData }}

//parent.component.ts import { Component } from '@angular/core';

@Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent { parentData: string = 'Hello from Parent Component!'; }

//parent.component.html

//App.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { ParentComponent } from './parent/parent.component'; import { ChildComponent } from './child/child.component';

@NgModule({ declarations: [ AppComponent, ParentComponent, ChildComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

**30. Explain lazy loading in Angular.

Lazy loading in Angular is a technique used to improve the performance of an application by loading feature modules only when they are needed, rather than loading all modules upfront. This reduces the initial load time of the application and speeds up the startup process.

31. What is MVVM architecture in Angular?

MVVM (Model-View-ViewModel) is a software architectural pattern that is commonly used in Angular applications, providing a clean separation of concerns between different components of an application. This ensures that changes in one part of the application (like in the logic or data) do not directly affect or interfere with the user interface.

**Here’s how MVVM works in Angular:

**Model:

**View:

**ViewModel:

**32. What are Angular lifecycle hooks?

Angular lifecycle hooks are methods that allow you to tap into key moments in a component’s lifecycle. Here are the main lifecycle hooks:

  1. **ngOnInit(): Called once after the component’s data-bound properties have been initialized.
  2. **ngOnChanges(changes: SimpleChanges): Called whenever one or more data-bound input properties change.
  3. **ngDoCheck(): Called during every change detection run, allowing you to implement your own change detection.
  4. **ngAfterContentInit(): Called once after Angular projects external content into the component’s view.
  5. **ngAfterContentChecked(): Called after every check of projected content.
  6. **ngAfterViewInit(): Called once after the component’s view (and child views) has been initialized.
  7. **ngAfterViewChecked(): Called after every check of the component’s view (and child views).
  8. **ngOnDestroy(): Called just before Angular destroys the component, allowing you to clean up resources.

**33. What is a pipe in Angular?

A pipe is a way to transform data in the template. It allows you to format or manipulate data before displaying it to the user. Angular provides several built-in pipes like DatePipe, UpperCasePipe, and CurrencyPipe, and you can also create custom pipes. Pipes are typically used to modify the display of data without altering the original data itself.

34. **What is Angular Universal?

**Angular Universal is a technology that enables **server-side rendering (SSR) for Angular applications, improving performance, initial load times, and **search engine optimization (SEO) by pre-rendering the application on the server before sending it to the client. This results in faster, more interactive user experiences and better indexing by search engines.

**35. How do you optimize Angular applications?

To optimize Angular applications, you can:

**36. What are Angular interceptors?

Angular interceptors are services that intercept and modify HTTP requests and responses. They allow you to perform actions such as adding headers (e.g., authentication tokens), logging, or handling errors globally. Interceptors are useful for managing HTTP communication centrally in Angular applications.

**37. Explain the purpose of NgZone in Angular.

NgZone in Angular is a service that helps Angular know when to update the view by tracking asynchronous operations. It runs change detection whenever an asynchronous operation, like a setTimeout or HTTP request, completes. NgZone ensures that Angular is aware of changes in the application state and triggers the necessary updates to the view.

**38. What is the difference between @Input() and @Output() in Angular?

Decorator Purpose Example
@Input() Pass data from parent to child component <child [childData]="parentData">
@Output() Emit events from child to parent component <child (childEvent)="parentMethod($event)">

**39. How do you implement authentication in Angular?

Authentication can be implemented using JWT tokens, Angular guards, and interceptors to manage login and secure routes.

Securing a route with an AuthGuard.

JavaScript `

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' }) export class AuthService {

constructor() { }

isLoggedIn(): boolean {
    return !!localStorage.getItem('userToken');
}

}

`

**40. What are Standalone Components in Angular 19?

In Angular 19, Standalone Components continue to offer significant advantages. They are components that do not rely on NgModules to function, simplifying Angular application architecture. This reduces the need for complex module dependencies and enhances tree-shaking for better optimization. Standalone components allow for more independent and modular development, making it easier to manage, test, and reuse components without requiring an entire NgModule setup. They contribute to cleaner code, better performance, and a more flexible development workflow, further streamlining Angular applications.

**41. How do you use Typed Forms?

Typed Forms continue to provide enhanced type safety for reactive forms. You can define strict types for form controls using FormGroup, FormControl, and FormArray, ensuring better type-checking and preventing runtime errors. This approach allows for more robust form handling, as you can specify the exact types for form values, leading to improved developer experience and better maintainability. The type-safe reactive forms in Angular 19 ensure consistency, making it easier to manage form controls and access their values with proper type support.

**42. What is the purpose of the Signal API ?

The Signal API is a key tool in simplifying state management, making Angular applications more responsive and efficient. Signal API has evolved to provide more efficient tracking of reactive state changes and dependencies. It helps in managing data flow by introducing reactive signals, which automatically detect changes in state and update the view without requiring manual change detection. This reduces the complexity of handling reactivity and optimizes performance by minimizing unnecessary updates.

**43. How does the inject() function work ?

The inject() function simplifies the process of dependency injection (DI). It allows developers to access and inject services or dependencies directly within the component’s constructor or lifecycle methods without the need for constructor injection.

**44. What improvements have been made to standalone testing?

Standalone components can now be tested directly, reducing boilerplate code and enhancing tree-shaking by avoiding unnecessary module dependencies. The testing framework has been optimized for better performance and developer experience. Angular 19 also improves integration with testing libraries like Jasmine and Karma, allowing for more straightforward configuration, faster tests, and a smoother testing process.

**45. Explain the use of Functional Components.

Functional components focus purely on rendering UI based on inputs and outputs, without requiring a class structure. This approach brings a more functional programming style to Angular, making it easier to write and test components with better performance, especially for simple and reusable components.

**46. What is Ahead-of-Time (AOT) compilation in Angular?

**Ahead-of-Time (AOT) compilation in Angular is the process of compiling **Angular templates and TypeScript code into efficient JavaScript code during the build process, before the application is run in the browser. This reduces the size of the application, improves startup performance, and allows for earlier detection of template errors, resulting in faster rendering and better overall performance in production.

**47. What is Ivy in Angular?

Ivy is Angular’s next-generation rendering engine, introduced to improve performance and reduce bundle sizes. It offers faster compilation, more efficient rendering, and enhanced debugging capabilities. Ivy’s advanced tree-shaking features eliminate unused code, leading to smaller and faster applications. Additionally, Ivy provides better backward compatibility, making it easier to update and maintain Angular applications.

**48. Explain the purpose of Angular Elements.

49. **What is a Resolver in Angular?

A Resolver in Angular is a service that pre-fetches data before a route is activated, ensuring that the necessary data is available when the route is accessed. This is particularly useful for loading important data that a component depends on, thereby enhancing user experience by avoiding loading indicators or incomplete views.

**Angular Interview Questions For Experienced

In this set we will be covering Angular interview question for experienced developers with over 5 years of experience.

**50. What is difference between Angular and React?

Feature Angular React
Type Full-fledged framework Library for building user interfaces
Developed by Google Facebook
Language TypeScript (JavaScript superset) JavaScript (JSX syntax)
Architecture MVC (Model-View-Controller) / MVVM (Model-View-ViewModel) Component-based architecture
Use Case Suitable for large-scale applications with complex requirements Best for building interactive UIs and SPAs (Single Page Applications)

51. How are Angular expressions are different from JavaScript expressions?

Angular Expressions are a simplified version of JavaScript expressions designed for use within templates and for data binding, while JavaScript Expressions are more flexible and can be used to perform various operations in the logic layer of an application.

52. What is the purpose of NgModule in Angular?

The purpose of NgModule in Angular is to organize an application into cohesive blocks of functionality by grouping related components, directives, pipes, and services. NgModule defines a compilation context for these elements, providing modularity and maintainability.

53. **What is the difference between Template-driven and Reactive Forms?

Feature Template-driven Forms Reactive Forms
Structure Based on directives Based on explicit creation
Validation Asynchronous Synchronous
Complexity Simple forms Complex forms
Data Model Two-way data binding Immutable data model

**54. What are Angular Guards?

Angular Guards are services that control access to routes in an Angular application. They are used to protect routes from unauthorized access or to prevent unwanted navigation. Common types of guards include:

**55. How do you create custom validators in Angular?

Custom validators can be created by implementing the ValidatorFn interface and using it in the form controls.

Creating a custom validator to check if a username is available.

JavaScript `

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' }) export class UsernameValidatorService { private takenUsernames = ['admin', 'user', 'guest'];

checkUsername(username: string): Observable<boolean> {
    return of(this.takenUsernames.includes(username)).pipe(
        map(isTaken => !isTaken)
    );
}

}

`

**56. What is the purpose of Angular animations?

The purpose of Angular animations is to add dynamic visual effects to applications, improving user experience by making transitions, **state changes, and movements more engaging. They enable smooth animations for elements such as **fading, sliding, or resizing, triggered by user interactions or state changes in the application.

**57. Explain dynamic components in Angular.

**Dynamic components in **Angular are components that are created and inserted into the application at runtime, rather than being statically declared in the template. This allows for greater flexibility and responsiveness in applications.

58. **What is Angular Material?

**Angular Material is a UI component library for **Angular applications that provides pre-built, reusable, and customizable user interface components, following Google’s Material Design principles. It offers components like buttons, dialogs, form controls, and navigation elements, helping developers create modern, responsive, and visually appealing applications quickly.

**59. What is Eager?

In AngularJS, eager loading refers to the process where modules, services, and controllers are loaded at the start of the application, even if they are not immediately needed. Eager loading is typically used when the developer expects all parts of the application to be used early on.

60. **What is the purpose of Angular’s Renderer2?

61. What is the difference between AOT and JIT?

Feature AOT (Ahead-of-Time) Compilation JIT (Just-in-Time) Compilation
**Compilation Time Compilation occurs at build time Compilation occurs at runtime
**Performance Faster startup time, as the code is already compiled Slower startup time, as the code is compiled in the browser
**Error Detection Errors are detected at build time, allowing for earlier fixes Errors are detected at runtime, which may affect the user experience
**Bundle Size Smaller bundle size, as the compiler is not included in the bundle Larger bundle size, as the compiler is included in the bundle
**Compatibility Better suited for production environments, including server-side rendering Often used in development environments for faster iteration and debugging

62. **What are the benefits of using Web Workers in Angular?

63. What is Data Binding in Angular?

Data binding in Angular is a mechanism that allows communication between the component and the view (HTML template). It synchronizes the data between the model (component) and the view, making it easy to reflect changes in the UI whenever data changes in the component.

There are the 4 types of the data binding in Agular:

64. What are impure pipes in angular?

Impure pipes in Angular are pipes that can change the output when input values change over time, even without the change detection running. Unlike pure pipes, impure pipes are evaluated every time change detection runs, which can lead to performance issues if not used carefully.

65. What are pure pipes in angular?

Pure pipes in Angular are pipes that only re-evaluate when their input data changes. This makes them more efficient compared to impure pipes, as they are only executed when the values of the inputs change.

66. What is Pipe transform Interface in Angular?

In Angular, the PipeTransform interface is used to define the structure of a custom pipe. It is part of the Pipe decorator, which helps in creating custom pipes to transform data within templates.

Angular Scenario Based Interview Questions

In this section, we will look at real-world scenarios and how to handle them in Angular.

67. **Scenario: Handling Data from Multiple APIs

**Question: We are developing an Angular application that needs to fetch data from multiple APIs and display them together on the same page. How would we handle asynchronous API calls and ensure the data is displayed after all responses are received?

**Answer: I would use the **RxJS forkJoin operator to handle multiple API calls concurrently. This ensures that all API responses are received before processing the data. Here’s how I would implement it:

JavaScript `

import { forkJoin } from 'rxjs'; import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

getData() { const api1$ = this.http.get('https://api1.example.com'); const api2$ = this.http.get('https://api2.example.com');

forkJoin([api1$, api2$]).subscribe(
    ([api1Response, api2Response]) => {
        // Process data from both APIs
        this.processData(api1Response, api2Response);
    },
    error => {
        console.error('Error fetching data', error);
    }
);

}

`

forkJoin waits until all observables complete and then emits the results in an array. This is perfect for scenarios where you want to fetch data from multiple sources simultaneously.

68. **Scenario: Optimizing Angular Performance with Lazy Loading

**Question: Your Angular application is getting slower due to a large number of modules and components. How would you optimize the application’s performance?

**Answer: One way to optimize an Angular application is by **implementing lazy loading to load modules only when needed. This reduces the initial bundle size, improving load times. Here’s an example of setting up lazy loading in Angular:

// app-routing.module.ts const routes: Routes = [ { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) } ];

69. **Scenario: Handling Form Validation in Reactive Forms

**Question: We have a form where the user enters their email, and we need to ensure that it is both valid and unique (not already in use). How would we implement this validation using Angular Reactive Forms?

**Answer: I would use **Reactive Forms with custom synchronous and asynchronous validators. Here’s how I would implement both email format validation and uniqueness check:

JavaScript `

import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { of } from 'rxjs'; import { map, delay } from 'rxjs/operators';

constructor(private fb: FormBuilder) { }

emailForm: FormGroup = this.fb.group({ email: ['', [Validators.required, Validators.email], [this.uniqueEmailValidator.bind(this)]] });

uniqueEmailValidator(control: AbstractControl) { const emailsInUse = ['test@example.com', 'user@example.com']; return of(emailsInUse.includes(control.value)).pipe( delay(500), map(isInUse => (isInUse ? { emailInUse: true } : null)) ); }

`

70. **Scenario: Debugging Change Detection Issues

**Question: We notice that a component is not updating as expected when data changes. How would you debug and resolve the issue related to Angular’s change detection mechanism?

**Answer: First, I would check if the component is using **OnPush change detection strategy:

@Component({ selector: 'app-sample', templateUrl: './sample.component.html', changeDetection: ChangeDetectionStrategy.OnPush })

If the OnPush strategy is being used, Angular only checks for changes when an input reference changes. If the data is updated by mutation, Angular will not detect the change. In this case, I would either:

constructor(private cd: ChangeDetectorRef) {}

updateData() { this.data = { ...this.data, newValue: 'updated' }; this.cd.markForCheck();
}

71. **Scenario: Implementing Route Guards for Authentication

**Question: How would you protect specific routes in your Angular application so that only authenticated users can access them?

**Answer: I would implement **Route Guards using Angular’s CanActivate interface to protect routes. Here’s an example of how to implement an authentication guard:

JavaScript `

import { Injectable } from '@angular/core'; import { CanActivate, Router } from '@angular/router'; import { AuthService } from './auth.service';

@Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate {

constructor(private authService: AuthService, private router: Router) { }

canActivate(): boolean {
    if (this.authService.isAuthenticated()) {
        return true;
    } else {
        this.router.navigate(['/login']);
        return false;
    }
}

}

`

Conclusion

To implement micro frontends in Angular in 2025, you can use Webpack 5 Module Federation to load and share independently developed Angular applications. Each micro frontend can be deployed separately, with a container app managing routing and communication. This allows for scalable and modular web applications where updates can be made to individual modules without affecting the entire system.