Anil Singh | Code-sample.com

 Angular 19.0+ introduces three new ways to load data efficiently using signals: 1. resource (Promise-based Loader) The resource API provides a straightforward approach for fetching and updating data asynchronously using Promises . It is ideal for scenarios where you need a simple data-loading mechanism without reactive programming. Since it is promise-based, it follows a request-response pattern, making it suitable for one-time data fetches. Example usage: import { resource } from '@angular/core' ; const userResource = resource ( async () => { const response = await fetch ( 'https://api.example.com/user' ); return response. json (); }); Here, userResource() triggers the function, fetches data from the API, and resolves it using a promise. 2. rxResource (Observable-based Loader) The rxResource API is designed for Observable-based data fetching, making it ideal for reactive applications where data needs to be streamed or continuously updated....

  Angular 19 New Feature – linkedSignal,  LinkedSignal API In Angular 19, linkedSignal allows you to manage and synchronize dependent states efficiently. This feature is especially useful when you have multiple states that rely on each other or need to stay in sync.   Here’s a step-by-step guide with an example of dependent state with linkedSignal in Angular: Scenario Example: You have two signals: selectedCountry - A signal for the selected country. statesForCountry - A signal that depends on the selected country and updates automatically. 1. Import Required Utilities First, ensure you import Angular's reactivity utilities:   import { signal, computed, linkedSignal } from '@angular/core'; 2. Define Signals and Dependent State Use signal for the independent state and linkedSignal to define the dependent state.   Example (location-state.service.ts): import { Injectable, signal, linkedSignal } from '...

Garbage Collection (GC) in C# Garbage Collection (GC) in C# is an automated memory management mechanism provided by the Common Language Runtime (CLR) in the .NET framework. It eliminates the need for developers to manually allocate and free memory, which helps reduce errors such as memory leaks or improper resource cleanup, dangling pointers, or double deletion.   Purpose of Garbage Collection Automatic Memory Management : GC relieves developers from manually deallocating memory, reducing common errors like dangling pointers, memory leaks, or double-free errors. Efficient Resource Utilization : It ensures memory is available for the application by reclaiming unused objects. Key Features of GC Automatic Memory Management : GC automatically deallocates objects no longer in use. Developers only focus on memory allocation, while GC handles deallocation. Managed Heap : All memory allocated fo...

The error ReferenceError: localStorage is not defined occurs in Angular projects when localStorage is accessed in an environment where it is not available, such as on the server side during server-side rendering (SSR) using Angular Universal. The localStorage API is part of the browser's window object, and it is unavailable in non-browser environments. To fix this error in your Angular 18 project, you can use the following approaches: 1. Check if localStorage Exists Ensure localStorage is accessed only in the browser. Modify your service or component code to check for its availability before using it. if ( typeof window !== 'undefined' && window . localStorage ) { // Access localStorage here localStorage . setItem ( 'key' , 'value' ); } else { console . warn ( 'localStorage is not available.' ); } 2. Use Angular's Dependency Injection for Platform Check Use Angular's PLATFORM_ID to check whether the code is running ...

Call child component method from parent class - Angular In Angular, to share data from a child component to a parent component, the most common approach is using EventEmitter with @Output() . Here's how it works step by step: Steps for Child-to-Parent Data Sharing In the Child Component : You define an EventEmitter using the @Output() decorator to emit the data. In the Parent Component : The parent component listens for the event emitted by the child and handles the data that is sent. Example: 1. Child Component ( child.component.ts ) Here, we want to send data (e.g., a message) from the child component to the parent. typescript import { Component , Output , EventEmitter } from '@angular/core' ; @Component ({ selector : 'app-child' , template : ` <button (click)="sendData()">Send Data to Parent</button> ` , styleUrls : [ './child.component.css' ] }) export class ChildComponent { // Step 1: Declare an EventEmitt...