Forem: Amin-Karimi

Goodbye @angular/animations: How to Migrate to Angular 20’s Modern Animation API

Amin-Karimi — Fri, 26 Sep 2025 05:42:46 +0000

If you’ve been working with Angular for a while, you’ve probably used the familiar @angular/animations API with trigger, state, style, transition, and animate. For years, this was the go-to way to build smooth animations inside Angular apps.

But with Angular 20, this API has been officially deprecated . The Angular team is pushing for a simpler, more modern, and more maintainable approach that leverages native CSS transitions and the new animate directives (animate.enter, animate.leave).

This article will walk you through what changed, why it matters, and how to migrate your animations to the new Angular 20 style.

The Old Way (Deprecated)

Traditionally, you might have written something like this:

animations: [
  trigger('detailExpand', [
    state('collapsed', style({ height: '0px', minHeight: '0' })),
    state('expanded', style({ height: '*' })),
    transition('expanded <=> collapsed', animate('350ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
  ]),
],

This worked fine, but it came at a cost: complexity, bundle size, and an extra dependency on Angular’s animation engine.

The New Way in Angular 20

Now, Angular encourages using DOM insertion/removal animations via animate.enter and animate.leave. Instead of describing states and transitions in TypeScript, you define them directly in your template and CSS.

Example: Expand/Collapse Animation
Template (component.html)

@if(isExpanded) {
<div >
  <div animate.enter="expand" animate.leave="collapse">
    <p>Expandable content goes here...</p>
  </div>
</div>
}


.expand {
  transition: height 350ms cubic-bezier(0.4, 0.0, 0.2, 1);
  height: auto;
}

.collapse {
  transition: height 350ms cubic-bezier(0.4, 0.0, 0.2, 1);
  height: 0px;
  min-height: 0;
}

/* Define the starting style for enter animations */
@starting-style .expand {
  height: 0px;
  min-height: 0;
}

Why This Is Better

Closer to the platform → Uses native CSS transitions.
Less boilerplate → No more TypeScript-heavy state/transition blocks.
Future-proof → This is the officially recommended way going forward.
Smaller bundles → Dropping the @angular/animations dependency reduces bundle size.

Migration Strategy

Replace old trigger/state/transition definitions with animate.enter and animate.leave.
Move animation logic into CSS classes.
Use @starting-style when needed for enter transitions.
Control rendering with @if or *ngIf so that elements truly enter/leave the DOM.

Conclusion

This change might feel a little uncomfortable at first if you’ve been using Angular animations for years. But once you adopt the new approach, you’ll realize how much cleaner and more maintainable your code becomes.

Angular 20’s modern animation API is a big step toward making Angular apps lighter, faster, and closer to web standards.

So yes — it’s time to say goodbye to @angular/animations and embrace the future. 🚀

Custom Form Components in Angular: Avoid These Common Mistakes

Amin-Karimi — Thu, 15 May 2025 18:18:17 +0000

In Angular development, creating custom form components is a powerful way to encapsulate logic and maintain reusable UI elements. However, when integrating these components into Angular’s form ecosystem, many developers ask:
Should I use ControlValueAccessor , or is *FormGroupDirective * more appropriate for this use case?
The answer depends on the structure of your component and how it interacts with the Angular forms API.

✅ Use ControlValueAccessor for Single Form Control Components

If your custom component represents a single form control — such as an input field, toggle switch, dropdown, or similar —the correct and most idiomatic approach is to implement the *ControlValueAccessor * interface.
This allows Angular to treat your custom component as if it were a native input element, meaning you can use it seamlessly with FormControl, FormGroup, ngModel, etc.

Example Use Case

You're building a custom input with a prefix and suffix icon:

<my-custom-input formControlName="username"></my-custom-input>

Since this component only handles a single value, ControlValueAccessor is the ideal solution. You implement writeValue, registerOnChange, and registerOnTouched to hook it into Angular’s change detection and form updates.

🧠 Use FormGroupDirective (or ControlContainer) for Multi-Control Components

If your custom component is a composite control that internally manages multiple form controls, then using ControlValueAccessor is not suitable.

This is common for components like:

A date range picker that has fromDate and toDate
A time range selector with startTime and endTime
An address form that collects street, city, and postal code

Why ControlValueAccessor Doesn’t Fit

ControlValueAccessor is designed to bind a single value to a form control. But in a date range picker, you're managing two values (from and to), each of which should be independently controllable, validated, and possibly bound to different parts of the parent form.

Solution: Accept Multiple FormControls via Inputs
You can structure your component like this:

<my-date-range 
  [fromControl]="startDate" 
  [toControl]="endDate">
</my-date-range>

In this pattern:

The parent FormGroup manages both controls.
The component accepts the FormControls as @Input() bindings.
Inside the component, you use FormControlDirective or NgControl for validation display, state handling, etc.

Bonus Tip: Avoid Mixing the Two

If you try to mix ControlValueAccessor and manually managed multiple controls inside the same component, you’ll run into conflicts and validation issues. Keep it clean: choose one approach based on your component’s intent.

Final Thoughts

Understanding when to use ControlValueAccessor vs FormGroupDirective is essential for writing clean, scalable Angular forms.

For simple, single-value inputs, implement ControlValueAccessor.
For composite components managing multiple fields, pass FormControls or FormGroup directly and manage them internally.

This mental model will save you from form headaches and help you build highly reusable and Angular-friendly form components.

Stop Ignoring This Key Angular Tool-Your App’s Security Depends on It

Amin-Karimi — Mon, 20 Jan 2025 08:14:37 +0000

As a senior frontend developer, security in web applications is not just a checklist item—it’s a non-negotiable priority. Angular, with its robust framework, offers built-in security features to protect your application from vulnerabilities. One powerful tool in this arsenal is DomSanitizer, often underutilized or misunderstood by developers. In this article, we’ll explore why you should always use DomSanitizer when dealing with dynamic content and how it can safeguard your application against XSS attacks.

Understanding the Threat: XSS and Dynamic Content

Dynamic content is the backbone of modern web applications. Whether you’re managing user-provided HTML content, binding URLs dynamically, or adding CSS properties programmatically, these operations can introduce risks like XSS (Cross-Site Scripting) attacks. An XSS attack is a serious vulnerability where attackers inject malicious scripts into your application, potentially exposing sensitive user data or compromising functionality.

Angular’s data binding and templating help mitigate many XSS risks, but when working with dynamic content, additional precautions are necessary. This is where DomSanitizer comes into play.

What Is DomSanitizer and Why Is It Important?

DomSanitizer is a service provided by Angular that helps clean and sanitize untrusted values before they are used in the DOM. It acts as a gatekeeper, ensuring that only safe content is rendered, thereby reducing the risk of XSS attacks. Let’s dive into how you can use DomSanitizer effectively in your Angular applications.

Key Features of DomSanitizer

Sanitize URLs: Prevents malicious links by ensuring that dynamically bound URLs are safe for navigation or embedding.
Sanitize HTML: Strips out potentially dangerous elements, such as script tags, from user-generated or dynamic HTML content.
Sanitize CSS: Cleans dynamically added styles to block potentially harmful CSS that could manipulate the layout or leak sensitive information.
Bypass Security with Caution: Provides explicit methods like bypassSecurityTrustHtml, bypassSecurityTrustStyle, and bypassSecurityTrustUrl for developers to override Angular’s strict security measures when absolutely necessary—but only for trusted inputs. These features make DomSanitizer an essential tool for any Angular developer handling untrusted content.

Example: Using DomSanitizer in Angular 19 with Standalone Components

Let’s see how to use DomSanitizer in a real-world example using Angular 19 and the new inject() method for dependency injection. Here’s a simple standalone component that displays sanitized HTML content:

import { Component, inject } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-safe-content',
  standalone: true,
  template: `
    <div [innerHTML]="sanitizedHtml"></div>
  `,
})
export class SafeContentComponent implements OnInit {
  private sanitizer = inject(DomSanitizer);
  sanitizedHtml: SafeHtml;

  ngOnInit(): void {
    const unsafeHtml = `<h1>Welcome!</h1><script>alert('XSS Attack');</script>`;
    this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(unsafeHtml);
  }
}

Explanation

Standalone Component: This example uses Angular 19’s standalone components for simplicity.
inject() Method: The new inject() function is used to retrieve the DomSanitizer service, eliminating the need for constructor injection.
Sanitizing Content: The bypassSecurityTrustHtml() method ensures that only safe HTML content is displayed.

Best Practices When Using DomSanitizer

Minimize Usage of Bypass Methods: While bypassSecurityTrustHtml and similar methods can be useful, use them sparingly and only when absolutely necessary. Always prefer Angular’s built-in security mechanisms.
Validate Input: Ensure that any user-provided data is validated and sanitized before using it in the DOM.
Keep Dependencies Updated: Regularly update Angular to benefit from the latest security patches and features.

Conclusion

DomSanitizer is an indispensable tool for protecting your Angular applications from XSS attacks. By incorporating it into your development workflow and following best practices, you can build secure and robust applications. Remember, security is a shared responsibility, and leveraging Angular’s powerful features is a great way to stay ahead of potential threats.

Start implementing DomSanitizer today and make your Angular applications safer for everyone!

Angular Sample project with interceptors,....

Amin-Karimi — Thu, 28 Nov 2024 06:53:18 +0000

Quick Start with the Angular 18.1 Sample Project - A Simple and Practical Solution for Developers!

Amin-Karimi ・ Sep 27 '24

#angular #frontend #tutorial #opensource

Boost Your Angular 19 App’s Speed with @defer: A Must-Have for Lightning-Fast UX

Amin-Karimi — Thu, 28 Nov 2024 06:34:42 +0000

In Angular 19, the @defer directive is a game-changing feature designed to optimize performance by deferring the loading of non-essential components. This approach improves initial load times, enhances the user experience, and conserves resources—perfect for building modern, fast, and efficient web applications.

Why `@defer` Matters

When you use @defer, Angular waits to load certain components until they're needed, leveraging the IntersectionObserver API to detect when an element is about to enter the viewport. Unlike traditional lazy loading, @defer provides more granular control with options like
@placeholder, @loading, and @error for smoother UX.

Example: Deferred Image Loading

Here's a simple example that demonstrates how to use @defer to delay the loading of images:

<h1>Optimized Image Loading with `@defer`</h1>
@defer () {
  <app-images></app-images>
} 
@placeholder (minimum 500ms) {
  <p>Loading Images...</p>
}
@loading (after 1s; minimum 500ms) {
  <p>Still loading...</p>
}

Key Features of `@defer`

@placeholder: Displays temporary content while waiting for the deferred component to load.
@loading: Shows feedback during the loading process, avoiding awkward visual "flickers."
Conditional Triggers: Load components based on various conditions like:
on hover: Load when the user hovers over an element.
on timer: Load after a specified delay (@defer (on timer(2s)) {}).
on interaction: Load after user interaction such as clicks or key presses.

Why It’s a Game-Changer

@defer significantly reduces the size of your initial application bundle, speeding up the first meaningful paint. It’s especially beneficial for large apps or resource-intensive components, enhancing performance on both fast and slow connections alike.

The Ultimate Guide to Cleaner and Smarter Route Data Binding For Angular Projects!

Amin-Karimi — Fri, 01 Nov 2024 08:19:40 +0000

In Angular applications, developers frequently need to pass data through routes to different components. Traditionally, we would subscribe to ActivatedRoute to retrieve this data, leading to boilerplate code and potential pitfalls with manual subscription management. Angular introduces a game-changer: withComponentInputBinding(), which enables automatic, declarative binding of route data to component inputs. This feature simplifies our code, reduces dependencies, and makes our routing setup far more readable.

In this guide, let’s dive deep into withComponentInputBinding(), understanding how it works and seeing it in action with sample code.

What is withComponentInputBinding()?

withComponentInputBinding() is a new method available in Angular’s router configuration that binds route data directly to component inputs. This removes the need to manually subscribe to ActivatedRoute to fetch route data, and instead, data is mapped to component properties automatically.

Key Benefits of Using withComponentInputBinding():

Reduces Boilerplate Code: No more manual subscriptions to ActivatedRoute.
Improves Readability and Maintainability: Routes clearly define the data they pass, enhancing code clarity.
Cleaner, Safer Components: Avoids the potential pitfalls of manual subscription management and promotes a declarative style.

How to Use withComponentInputBinding()

Step 1: Define the Route with Data
Set up your route with predefined data or parameters in app.config.ts Then, use withComponentInputBinding() to link this data directly to component properties.

Step 2: Bind Route Data to Component Inputs
Define inputs in your component that match the route data keys. Angular will automatically map the data to these inputs.

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding())
  ]
}

ProductComponent

import { Component, input } from '@angular/core';
@Component({
  selector: 'app-product',
  standalone: true,
  imports: [],
  templateUrl: './product.component.html',
  styleUrl: './product.component.scss'
})
export class ProductComponent {
   productId = input<string>('');
}

Product Route

     {
        path: 'product/:productId', component: ProductComponent
     }

Conclusion

withComponentInputBinding() is a fantastic enhancement for developers looking to create cleaner, more maintainable Angular applications. By removing the need for manual subscriptions, this feature streamlines data handling between routes and components, ultimately leading to more readable and reliable code.

Give withComponentInputBinding() a try in your Angular projects to experience the benefits of simpler, smarter route data management.

Quick Start with the Angular 18.1 Sample Project - A Simple and Practical Solution for Developers!

Amin-Karimi — Fri, 27 Sep 2024 07:55:30 +0000

Hey fellow developers!

Whether you're new to Angular 18.1 or just looking for a solid, well-structured foundation for your projects, this open-source repo is exactly what you need! Designed with a monolithic architecture, this project keeps things simple yet powerful, allowing for quick setup and easy organization.

Repo link

Check the GitHub repo here!

Why this project?
This template is perfect for kickstarting Angular applications. With its monolithic architecture, managing components and services becomes seamless, focusing on functionality without added complexity.

Plus, it’s a growing project, and your feedback is essential to its improvement. Please check out the repo, and feel free to share your thoughts. If you find it helpful, I’d love it if you could introduce it to your colleagues and friends!

Mastering Progressive Web Apps(PWA) with Angular 18: A Senior Developer's Deep Dive

Amin-Karimi — Mon, 09 Sep 2024 05:22:47 +0000

Progressive Web Apps (PWAs) have transformed the landscape of web development, enabling developers to merge the power of web technologies with the seamless user experience of native mobile apps. Now, with Angular 18, developers are equipped with cutting-edge tools to elevate PWA development to a whole new level. This version introduces powerful features that simplify the creation of high-performance, user-friendly applications, making the development process smoother than ever. In this comprehensive guide, we’ll explore the key updates in Angular 18, walk through a hands-on example of building a PWA, and discuss why PWAs are essential for modern web development.

Angular 18: Groundbreaking Updates for PWAs

Angular 18 introduces several pivotal improvements aimed at enhancing performance, simplifying the developer experience, and increasing user satisfaction. These enhancements break through traditional bottlenecks, giving developers more flexibility and control to build faster, more stable, and feature-rich PWAs.

Zoneless Change Detection with Signals
One of the standout updates in Angular 18 is the experimental introduction of zoneless change detection. In previous versions, zone.js handled change detection, which often introduced performance overhead in larger apps. Angular 18 reduces this by offering a signal-based reactivity model, eliminating the need for zone.js and significantly improving rendering times. This is a game-changer for PWA development, where performance is critical for delivering a smooth user experience.
Partial Hydration for Faster Load Times
Angular 18 also introduces partial hydration, a technique that prioritizes rendering essential components while deferring non-critical elements. This is particularly beneficial for PWAs, where the initial load time is crucial for user perception. With partial hydration, your app feels more responsive, even on slower network connections, improving both performance and user engagement.
Improved Service Workers
Service workers are the backbone of any PWA, enabling offline capabilities and caching critical resources. Angular 18 enhances service workers by offering finer control over caching strategies, allowing developers to better manage background synchronization and updates. These improvements result in a more reliable offline experience, faster load times, and smoother updates.
Full Support for TypeScript 5.4
With TypeScript 5.4 support, Angular 18 brings powerful features such as template literal types and enhanced readonly properties, helping developers write cleaner, safer code. For PWA development, this means stronger type safety and easier maintenance, which are crucial for building scalable, robust applications.

Building a PWA in Angular 18

Let’s now apply these updates by transforming a standard Angular project into a fully-functional PWA. PWAs offer fast loading times, offline functionality, and native-like experiences—all within the browser.

Step 1: Adding PWA Functionality
ng add @angular/pwa

This command automatically configures essential files, including the service worker (ngsw-config.json) and the manifest file (manifest.webmanifest), which define the app’s appearance and behavior when installed on a device.

Step 2: Configure the Manifest
The manifest.webmanifest file lets you customize how your PWA appears and functions when installed. You can adjust the app’s name, theme color, and icon settings:

{
  "name": "My Angular PWA",
  "short_name": "AngularPWA",
  "theme_color": "#1976d2",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

This configuration helps browsers render the app as a standalone, native-like application when added to the home screen.

Step 3: Optimizing the Service Worker
In ngsw-config.json, you can fine-tune how assets are cached. For example, you can prefetch core assets like HTML, CSS, and JavaScript for quick loading, while deferring other resources like images:

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "resources": {
        "files": ["/assets/**"]
      }
    }
  ]
}

This setup ensures essential assets are loaded immediately, while less critical resources are cached only when needed.

Step 4: Building and Deploying the Application
Finally, build the project for production:
ng build --configuration production

Once built, ensure the app is served over HTTPS, as service workers require a secure context. You can now test your PWA in both desktop and mobile browsers, where it will behave like a native app with full offline functionality, thanks to service workers.

Conclusion

As one of the most powerful web development frameworks available, Angular 18 solidifies its position with tools that make developing performant, user-friendly PWAs more accessible than ever. By leveraging Angular 18’s powerful features—improved load times, enhanced offline capabilities, and seamless multi-device experiences—you can build world-class Progressive Web Apps that meet and exceed user expectations.

Migration to the `inject` function in components,...

Amin-Karimi — Fri, 16 Aug 2024 07:01:14 +0000

Angular 18 has introduced a powerful and flexible feature: the inject() function. This function redefines how dependency injection (DI) works in Angular, making it more intuitive, especially in complex scenarios. Let's dive into how this function works, why it's a game-changer, and how you can use it with examples straight from the official Angular documentation.

Command for Migration(Angular 18.2)

ng generate @angular/core:inject

What is the inject() Function?

Traditionally, Angular's DI relied heavily on constructor injection. You'd typically declare dependencies in a class constructor, and Angular would resolve them for you:
Before:

typescript

import { HttpClient } from '@angular/common/http';
export class test {
constructor(private http: HttpClient) {}
}

While this works perfectly fine, it has limitations—especially when working with services that require conditional or dynamic instantiation.

The inject() function, however, allows you to inject dependencies directly within a function or method, bypassing the constructor. This is particularly useful in standalone functions or in scenarios where the dependency isn’t needed until later in the method logic.

How to Use inject()?

Here’s a simple example. Let's say you have a service MyService that you want to use in a function outside of a class:

typescript

import { inject } from '@angular/core';
import { MyService } from './my-service';

@Component()
export class MyComp {
  myService = inject(MyService);

test() {
  myService.doSomething();
}
}

In this example, inject(MyService) retrieves the instance of MyService just like it would if it were injected in a constructor. This makes the inject() function highly versatile for various scenarios, including utility functions or deeply nested services.

Advanced Example: Injecting with Custom Options

Angular’s inject() also supports advanced use cases where you might need to pass additional options. For instance, suppose you want to inject a service with a fallback value if the service isn't provided:

typescript

import { inject } from '@angular/core';
import { MyService } from './my-service';

@Component()
export class MyComp {
 private  myService = inject(MyService, { optional: true });
}

Why Should You Care?

Improved Flexibility: inject() provides more control over when and how dependencies are injected.
Better Readability: Dependencies are now more explicitly tied to their usage.
Enhanced Performance: Conditional and lazy loading of dependencies can reduce memory footprint and improve load times.

Angular 18's inject() function is not just a minor update—it's a fundamental shift in how you can write, manage, and optimize your Angular applications. By using this new approach, you can write cleaner, more efficient, and more maintainable code.

Angular Typed Forms: Precision and Power in Form Management

Amin-Karimi — Tue, 13 Aug 2024 06:32:32 +0000

In modern web development, ensuring type safety and consistency is crucial. Angular has introduced Typed Forms as a powerful enhancement over traditional forms. This article explores how Typed Forms elevate form management by providing strict type enforcement, reducing runtime errors, and enhancing developer productivity.

Why Typed Forms?

In previous versions of Angular, forms were flexible but lacked strong type safety, leading to potential bugs. Typed Forms address this by ensuring that each form control, group, or array is strictly typed, allowing for better code quality and safer refactoring.

Getting Started with Typed Forms:

Here's how you can start using Typed Forms:

import { FormGroup, FormControl } from '@angular/forms';

interface UserForm {
  name: FormControl<string>;
  age: FormControl<number>;
}

const userForm = new FormGroup<UserForm>({
  name: new FormControl(''),
  age: new FormControl(0),
});

In this example, the UserForm interface ensures that each form control is strongly typed, making it clear what types of values are expected and reducing the chances of runtime errors.

Advanced Validation with Typed Forms:

Typed Forms shine when it comes to custom validation. For instance, creating a custom validator for a FormControl is now straightforward:

import { AbstractControl, ValidationErrors } from '@angular/forms';

function ageValidator(control: AbstractControl<number>): ValidationErrors | null {
  return control.value >= 18 ? null : { ageInvalid: true };
}

userForm.controls.age.setValidators(ageValidator);

This type enforcement makes it easier to catch issues during development, ensuring that your validators and controls are always in sync.

Benefits of Typed Forms:

Type Safety: Reduces bugs and improves maintainability by catching type mismatches at compile time.
Enhanced Intellisense: Provides better auto-completion and suggestions in IDEs, speeding up development.
Safer Refactoring: Refactoring is less error-prone since types are enforced, making large codebases easier to manage.

Conclusion:

Typed Forms in Angular represent a significant leap forward in form management, offering both precision and power. As Angular continues to evolve, Typed Forms are set to become a standard practice for developers seeking to build robust, scalable applications. If you're not yet using Typed Forms, now is the time to start—embrace the future of form handling in Angular!

Simplifying Form Management in Angular with FormGroupDirective

Amin-Karimi — Wed, 07 Aug 2024 11:26:21 +0000

As an Angular developer, managing forms can sometimes be a daunting task, especially when using ngValueAccessor. While ngValueAccessor is powerful, it often requires implementing numerous functions to handle value retrieval and updates for our form elements. Recently, I transitioned to using FormGroupDirective, and it has significantly streamlined the process. Here’s why this switch was a game-changer for me and my team:

Why FormGroupDirective?

Simplicity in Implementation
With FormGroupDirective, much of the boilerplate code required by ngValueAccessor is eliminated. This means less time writing repetitive code and more time focusing on business logic.
Better Synchronization of Values
FormGroupDirective automatically synchronizes values, so there’s no need to write additional functions for value retrieval and setting. This makes the code cleaner and easier to maintain.
Improved Code Readability
Code written with FormGroupDirective is significantly more readable and understandable. This is especially beneficial for the entire development team, including newcomers.
Greater Flexibility
Using FormGroupDirective provides more flexibility in managing forms, allowing us to easily handle more complex forms.

Let's dive into a practical example to illustrate how FormGroupDirective can simplify form management.

Before: Using ngValueAccessor

import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'app-custom-input',
  template: `
    <input type="text" [value]="value" (input)="onInput($event.target.value)" />
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true,
    },
  ],
})
export class CustomInputComponent implements ControlValueAccessor {
  value: string;

  onChange: any = () => {};
  onTouched: any = () => {};

  writeValue(value: any): void {
    this.value = value;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  onInput(value: string) {
    this.value = value;
    this.onChange(value);
  }
}

After: Using FormGroupDirective

import { Component, Input } from '@angular/core';
import { FormGroup, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-custom-form',
  template: `
    <form [formGroup]="form">
      <input [formControlName]="controlName" />
    </form>
  `,
  standalone:true,
  imports:[ReactiveFormsModule]
})
export class CustomFormComponent {
  form!: FormGroup;
  @Input({ required: true }) controlName!: string

  constructor(private _rootFormGroup: FormGroupDirective,) {
    this.form = this._rootFormGroup.control as FormGroup;
  }

}

Forem: Amin-Karimi

Goodbye @angular/animations: How to Migrate to Angular 20’s Modern Animation API

The Old Way (Deprecated)

The New Way in Angular 20

Why This Is Better

Migration Strategy

Conclusion

Custom Form Components in Angular: Avoid These Common Mistakes

Example Use Case

Why ControlValueAccessor Doesn’t Fit

Bonus Tip: Avoid Mixing the Two

Final Thoughts

Stop Ignoring This Key Angular Tool-Your App’s Security Depends on It

Understanding the Threat: XSS and Dynamic Content

What Is DomSanitizer and Why Is It Important?

Example: Using DomSanitizer in Angular 19 with Standalone Components

Best Practices When Using DomSanitizer

Conclusion

Angular Sample project with interceptors,....

Quick Start with the Angular 18.1 Sample Project - A Simple and Practical Solution for Developers!

Amin-Karimi ・ Sep 27 '24

Boost Your Angular 19 App’s Speed with @defer: A Must-Have for Lightning-Fast UX

Why @defer Matters

Example: Deferred Image Loading

Key Features of @defer

Why It’s a Game-Changer

The Ultimate Guide to Cleaner and Smarter Route Data Binding For Angular Projects!

What is withComponentInputBinding()?

How to Use withComponentInputBinding()

Conclusion

Quick Start with the Angular 18.1 Sample Project - A Simple and Practical Solution for Developers!

Repo link

Mastering Progressive Web Apps(PWA) with Angular 18: A Senior Developer's Deep Dive

Angular 18: Groundbreaking Updates for PWAs

Building a PWA in Angular 18

Conclusion

Migration to the `inject` function in components,...

Command for Migration(Angular 18.2)

What is the inject() Function?

How to Use inject()?

Advanced Example: Injecting with Custom Options

Why Should You Care?

Angular Typed Forms: Precision and Power in Form Management

Why Typed Forms?

Getting Started with Typed Forms:

Advanced Validation with Typed Forms:

Benefits of Typed Forms:

Conclusion:

Simplifying Form Management in Angular with FormGroupDirective

Why FormGroupDirective?

Before: Using ngValueAccessor

After: Using FormGroupDirective

Why `@defer` Matters

Key Features of `@defer`