Angular Practicals (Angular 21)

Understand how higher order operators flatten observables to fetch a user's blog without callback hell, using map and flat map techniques.

Refactor the code to solve callback hell by using higher-order operators to flatten observables, map values, set variables, and subscribe to user, blog, and group data.

Discover how to unsubscribe observables in angular to prevent memory leaks using manual unsubscribe in on destroy, takeUntil with a notifier, and the async pipe.

Learn to prevent memory leaks by unsubscribing observables with takeUntil and subjects, then adopt takeUntilDestroyed and signals to replace async pipe for clean Angular cleanup.

Explore the difference between subject and behavior subject in Angular. The subject has no default value and late subscribers miss prior emissions, while behavior subject replays the latest value.

Explores the practical use of subject and behavior subject in Angular, showing how subject omits late values while behavior subject provides up-to-date values across parent and child components.

Explore the debounce time operator in Angular practicals, delaying API calls until the user stops typing for 1 second to minimize multiple requests and improve performance.

Learn how to fetch multiple API data in parallel using forkJoin in Angular, updating form controls and UI only after all responses arrive.

Implement auto refresh in an angular component using polling with RxJS interval and switchMap, with tap and takeUntil for clean unsubscribe, calling the API every 10 seconds.

Demonstrates using exhaust map in RxJS to prevent multiple API calls by ignoring subsequent clicks until the first call completes, converting rapid save clicks into a single request.

Refactor if statements by replacing branching with filter and map, turning conditions into pre-filtering steps. Use ternary operators to simplify logic, improving readability and maintainability in Angular code.

Refactor if statements by ensuring the API always returns a non-null value or a default object, avoiding null references and unnecessary branching.

Implement the routing best practice by creating a feature module, declaring required components there, and registering routes with the forward method to enable lazy loading and maintainability.

Compare promises and observables, and learn how cancellation happens with unsubscribe. Use the async pipe to manage observable data$ from api calls in Angular 19.

Learn best practices for using a subject or behavior subject on an Angular service to communicate between components, encapsulating the subject and exposing a safe observable via a public API.

Demonstrate how HttpInterceptor centralizes API headers and tokens in an Angular 19 app, protecting requests with a token and reducing repeated header code in line with the DRY principle.

Learn how the can deactivate route guard prompts before leaving a dirty form. Compare class-based (deprecated) and function-based guards in Angular 14+, using an interface and inject.

demonstrates avoiding bad component design by building a form with four APIs, a loader until data loads, and a can deactivate guard, using segregation, reactive programming, and onpush for performance.

learn how to design modular Angular components by segregating forms into customer, vehicle, and other info, use reactive forms and RxJS operators like forkJoin, concatMap, and share, with on-push detection.

Develop robust Angular component design with three form components (customer, vehicle, other info) using form arrays, outputs, and observables to manage save/discard states, rights checks, and canDeactivate navigation.

Learn how to replace the setTimeout hack with a ViewChild setter to attach sorting to an Angular Material table once asynchronous data arrives.

Apply the strategy design pattern in Angular to switch image upload processing between compression on and off, guided by open-closed and single-responsibility principles with runtime injected strategies.

Explore the bridge design pattern by modeling a switch that composes devices like a fan and a refrigerator via a common device interface, enabling on and off actions.

Explore implementing the bridge design pattern in Angular by a reusable footer and an ifooter abstraction with an injection token, eliminating code duplication and prop drilling.

In Angular Practicals (Angular 19), this lecture exposes tight coupling in a reusable image upload component as requirements change, contrasts compression with normal processing, and previews dependency injection for refactoring.

learn how to solve tight coupling by splitting responsibilities into separate classes, applying the single responsibility principle, and using Angular dependency injection to inject a processor interface with concrete implementations.

Understand dependency injection in Angular by injecting a locker service via the constructor and swapping console locker with event locker through providers, keeping the consumer code unchanged.

Learn to implement control value accessor to make a component act as a form control, integrate with a form group, and manage text and signature validation.

Learn how lazy loading speeds up Angular apps by dividing the app into eagerly loaded and lazy modules, reducing initial bundle size and loading on demand.

Learn how to implement lazy loading in Angular by creating a feature module and a lazy component, configuring a separate routing module, and loading on demand to reduce bundle size.

Learn how dependency injection works across lazy modules in Angular, including singletons via the root injector, and how a shared user service is provided and consumed by lazy-loaded components.

Diagnoses a performance issue from nested loops on a checkbox feature, and shows how replacing the inner 203x203 loop with an object built using reduce lowers change detection repaint time.

Convert a normal angular component to a signals based component to boost performance, using input and output APIs with mat table sorting, row highlighting, and emitting data to the parent.

Explore how angular change detection works, comparing default and onpush strategies, with signals enabling efficient updates by marking dirty components and refreshing views.

Discover how to fix the setTimeout hack in angular using the view child signals API to attach the sort data source when match sort is available, ensuring sorting works.

Migrate your Angular app from 20 to 21 using the official update guide, handle dependencies with the force option, and verify components like control value accessor with esbuild.