⚡
Frontend Framework

Angular

47 questions across 2 experience levels

Answer

A Pipe is used to transform data in Angular templates before displaying it to the user. Pipes only change how data is displayed and do not modify the original value stored in the component.

Code Example
{{ name | uppercase }}
{{ amount | currency:'INR' }}
{{ today | date:'dd/MM/yyyy' }}
💡 Simple Analogy

Think of a pipe as a display filter. The original data stays the same, but Angular shows it in a different format.

Answer

Angular provides several built-in pipes such as uppercase, lowercase, date, currency, percent, number, and slice.

Code Example
{{ name | uppercase }}
{{ amount | currency:'INR' }}
{{ 0.75 | percent }}
{{ today | date:'dd/MM/yyyy' }}
💡 Simple Analogy

Instead of manually formatting data in TypeScript, Angular pipes format it directly in the template.

Answer

A Custom Pipe is a pipe created by developers when Angular's built-in pipes do not satisfy a business requirement. It helps keep formatting logic reusable and centralized.

Code Example
@Pipe({name:'capitalize'})
export class CapitalizePipe implements PipeTransform {
  transform(value:string){
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}
💡 Simple Analogy

If you need to format user names in many places, create one custom pipe and reuse it everywhere.

Answer

Custom Pipes improve reusability, keep templates cleaner, and separate formatting logic from business logic. Updating the pipe updates behavior everywhere it is used.

Code Example
{{ product.price | customCurrency }}
💡 Simple Analogy

If currency formatting changes from Rupees to Dollars, update the pipe once instead of changing every component.

Answer

A Directive is a class that changes the behavior, structure, or appearance of DOM elements.

Code Example
<div *ngIf='isLoggedIn'>Welcome</div>
💡 Simple Analogy

Directives tell Angular what to do with HTML elements.

Answer

Angular has three main types of directives: Component Directives, Structural Directives, and Attribute Directives.

Code Example
Component -> @Component
Structural -> *ngIf, *ngFor
Attribute -> ngClass, ngStyle
💡 Simple Analogy

Structural directives change the DOM, while attribute directives modify existing elements.

Answer

Structural Directives add, remove, or manipulate DOM elements. Common examples are *ngIf, *ngFor, and *ngSwitch.

Code Example
<div *ngIf='isAdmin'>Admin Panel</div>
<li *ngFor='let product of products'>{{product}}</li>
💡 Simple Analogy

Structural directives decide what appears on the page.

Answer

Attribute Directives modify the appearance or behavior of existing DOM elements without adding or removing them.

Code Example
<div [ngClass]="{'active': isSelected}">Product</div>
<div [ngStyle]="{'color':'red'}">Error</div>
💡 Simple Analogy

Attribute directives change how an element looks or behaves.

Answer

ngIf removes or adds elements to the DOM, while hidden only hides the element but keeps it in the DOM.

Code Example
<div *ngIf='showContent'>Content</div>
<div [hidden]='!showContent'>Content</div>
💡 Simple Analogy

ngIf removes the chair from the room. hidden covers the chair with a cloth.

Answer

Pipes transform data for display. Directives change the DOM's structure, appearance, or behavior.

Code Example
{{ name | uppercase }}
<div *ngIf='isLoggedIn'>Welcome</div>
💡 Simple Analogy

Pipe changes the data. Directive changes the HTML.

Answer

A Service is a reusable class that contains business logic, API calls, shared state, or utility methods. Services help keep components clean and promote code reusability.

Code Example
@Injectable({providedIn:'root'})
export class UserService {
 getUsers() {
  return this.http.get('/api/users');
 }
}
💡 Simple Analogy

Instead of writing API calls in every component, create them once in a service and reuse them everywhere.

Answer

Services help centralize business logic, improve code reusability, reduce duplicate code, and keep components focused on UI logic.

Code Example
constructor(private userService: UserService) {}
💡 Simple Analogy

Think of a service as a common helper that multiple components can use.

Answer

Dependency Injection is a design pattern where Angular automatically creates and provides required dependencies to a class instead of the class creating them manually.

Code Example
constructor(private productService: ProductService) {}
💡 Simple Analogy

Instead of cooking your own food, a waiter brings it to your table. Angular provides the service instead of the component creating it.

Answer

A dependency is any service or object that a class needs to function.

Code Example
constructor(private userService: UserService) {}
💡 Simple Analogy

If ProductComponent needs ProductService, then ProductService is its dependency.

Answer

Angular creates a single shared instance of the service for the entire application. This is known as a Singleton Service.

Code Example
@Injectable({providedIn:'root'})
💡 Simple Analogy

One service instance shared across all components.

Answer

HttpClient is Angular's built-in service used to communicate with backend APIs. It supports GET, POST, PUT, PATCH, and DELETE requests.

Code Example
this.http.get('/api/users')
💡 Simple Analogy

HttpClient is Angular's way of talking to backend APIs.

Answer

GET is used to retrieve data, while POST is used to create or submit data to the server.

Code Example
this.http.get('/api/products')
this.http.post('/api/users', payload)
💡 Simple Analogy

GET = Fetch Data, POST = Save Data.

Answer

PUT replaces the entire resource, while PATCH updates only specific fields.

Code Example
this.http.put('/api/user/1', fullUser)
this.http.patch('/api/user/1', {name:'Manav'})
💡 Simple Analogy

PUT updates everything. PATCH updates only what changed.

Answer

Lifecycle Hooks are methods that Angular calls during different stages of a component's life, from creation to destruction.

Code Example
ngOnInit() {}
ngOnDestroy() {}
💡 Simple Analogy

Angular notifies you when a component starts, updates, and ends.

Answer

ngOnInit runs after Angular initializes the component. It is commonly used for API calls and initialization logic.

Code Example
ngOnInit() {
 this.loadProducts();
}
💡 Simple Analogy

Component is ready, now load data.

Answer

ngOnDestroy runs before a component is removed from the DOM. It is commonly used to clean up subscriptions, intervals, and event listeners.

Code Example
ngOnDestroy() {
 this.subscription.unsubscribe();
}
💡 Simple Analogy

Clean up before leaving the component.

Answer

ngAfterViewInit runs after Angular has fully initialized the component view and child views.

Code Example
@ViewChild('input') input!: ElementRef;
ngAfterViewInit() {
 this.input.nativeElement.focus();
}
💡 Simple Analogy

The HTML is ready, now safely access DOM elements.

Answer

Unsubscribing prevents memory leaks and unnecessary processing when a component is destroyed.

Code Example
ngOnDestroy() {
 this.subscription.unsubscribe();
}
💡 Simple Analogy

Stop listening when you no longer need updates.

Answer

Angular Routing allows navigation between different components without reloading the entire page. It enables Single Page Application (SPA) behavior.

Code Example
💡 Simple Analogy

Like switching pages inside the same app without full page reload.

Answer

routerLink is used to navigate between routes from HTML templates without reloading the page.

Code Example
<a routerLink='/products'>Products</a>
💡 Simple Analogy

It is Angular's way of navigating like an anchor tag.

Answer

Angular updates the URL, matches it with route configuration, and loads the corresponding component inside router-outlet without reloading the page.

Code Example
💡 Simple Analogy

Click link → URL changes → Angular loads matching component.

Answer

router-outlet is a placeholder where Angular renders the matched component based on the current route.

Code Example
💡 Simple Analogy

It acts as a container where routed components are displayed.

Answer

Angular router checks the current URL on app startup, matches it with route configuration, and loads the corresponding component.

Code Example
💡 Simple Analogy

Direct URL like /products still loads correct component without clicking anything.

Answer

Route parameters are dynamic values in the URL used to pass data like IDs.

Code Example
/product/:id → /product/101
💡 Simple Analogy

Used when value is required in route.

Answer

Route params are part of URL path and required, while query params are optional values passed after ? used for filters or pagination.

Code Example
💡 Simple Analogy

Route param: /product/1 | Query param: /product?page=1

Answer

Child routes allow nesting routes inside a parent route and render them inside a child router-outlet.

Code Example
💡 Simple Analogy

Used for layouts like Admin → Users, Settings, Reports.

Answer

Child components will not render because Angular has no placeholder to display them.

Code Example
💡 Simple Analogy

Route matches but nothing is displayed.

Answer

Lazy Loading loads modules only when required instead of loading everything at application startup, improving performance.

Code Example
💡 Simple Analogy

Modules load only when user navigates to that section.

Answer

A lazy-loaded module is loaded only when the user navigates to its route.

Code Example
💡 Simple Analogy

Module downloads only when route is visited.

Answer

CanActivate is a route guard used to allow or block access to a route based on conditions like authentication.

Code Example
💡 Simple Analogy

Prevents unauthorized users from accessing routes.

Answer

Navigation is cancelled and the component is not created. User stays on current page unless manually redirected.

Code Example
💡 Simple Analogy

Route access is blocked.