Forem: Loukas Kotas

The power of forwardRef to fix circular dependencies 🔄 in Angular

Loukas Kotas — Mon, 01 Apr 2024 20:08:44 +0000

Introduction

Circular dependencies often pose a challenge in software development, including Angular projects. While standalone components have helped alleviate many issues, circular dependencies can still arise, presenting obstacles to efficient development.

Before delving into the solution, it's essential to acknowledge that refactoring code can often mitigate circular dependencies. However, refactoring may not always be straightforward or feasible in certain scenarios.

That's where the forwardRef comes to the rescue!

According to Angular's documentation on forwardRef:

[...] forwardRef is used when the token which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when the token which we use when creating a query is not yet defined.

forwardRef is also used to break circularities in standalone components imports.

For more detailed information, I strongly recommend to have a look at angular documentation and the angular codebase.

Under the Hood: The Mechanism of `forwardRef`

The concept of forwardRef is closely related to JavaScript closures. Both rely on Deferred Resolutions of values (such as services or components) until a later point in execution. While closures use captured variables as placeholders, forwardRef employs tokens for similar purposes.

Circular dependencies between components

Consider resolving circular dependencies between standalone components – a common scenario in Angular development. Suppose we have a Parent component injecting a Child component and vice versa.

@Component(
  selector: 'app-parent',
  templateUrl: 'parent.component.html',
  standalone: true,
  imports: [ChildComponent],
)
class ParentComponent {
  @Input() fromChild!: boolean;
}

<div class="parent-container">
  <h2>Parent Component</h2>
  @if (!fromChild) {
    <app-child/>
  }
</div>

To prevent infinite loop rendering, the Parent component includes an @Input called fromChild, indicating whether it's called from a child component. If so, it avoids re-rendering the child component to prevent further recursion.

@Component({
  selector: 'app-child',
  templateUrl: 'child.component.html',
  standalone: true,
  imports: [
    //👇 Here is where the magic happens
    forwardRef(() => ParentComponent)], 
})
export class ChildComponent {}

<div class="child-container">
  <h2>Child component</h2>
   <app-parent [fromChild]="true"/>
</div>

Without utilizing the forwardRef mechanism, an undefined error would occur:

ERROR TypeError: Cannot read properties of undefined

Using forwardRef ensures the reference of the component instantiation is fetched during runtime, resolving any undefined errors that would otherwise occur without it.

I hope this explanation provides clarity on the usage of forwardRef, but it's crucial to exercise caution to avoid overuse or misuse, which can potentially deteriorate the codebase.

Explore a live demonstration on StackBlitz for a hands-on experience: Working Example

Thank you for exploring this topic with me. Feel free to connect with me on LinkedIn or GitHub and share your thoughts.

Happy Coding! 🍻

Part 3: Maximizing Angular Forms with Dynamic Custom Form Controls and Styling

Loukas Kotas — Tue, 31 Oct 2023 07:50:06 +0000

Introduction

In the third part of our ongoing series on dynamic forms in Angular, we'll finalize our exploration, building on the foundation laid in Part 2: Custom Validation, Enhanced Interface, Error Handling, and Dynamic Data Binding
. In this article, we'll delve into how to isolate input and dropdown components into separate custom form controls, implement the ControlValueAccessor interface, and dynamically manage styles and classes for these custom form controls.

Code Example

Find a live code example on StackBlitz here. Feel free to explore the code and experiment with dynamic forms yourself!

Let's dive in! 🚀

Isolating Input and Dropdown Components

In our pursuit of enhancing modularity and reusability in dynamic forms, we will establish two distinct components:

app-form-input: A component designed to encapsulate input form field.
app-form-dropdown: A component intended for encapsulating dropdown form field.

Our primary objective is to convert the input element into a custom form control by leveraging the ControlValueAccessor interface. Here's an example of how to implement the app-custom-input component:

<!-- custom-input.component.html -->
<input
  type="text"
  [value]="value"
  (keyup)="onValueChange($event)"
  (blur)="onTouched()"
/>

// custom-input.component.ts
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

@Component({
  selector: "app-custom-input",
  templateUrl: "./custom-input.component.html",
  styleUrls: ["./custom-input.component.scss"],
  standalone: true,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: CustomInputComponent,
      multi: true,
    },
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomInputComponent implements ControlValueAccessor {
    value: any = ""; // This is the value of the custom input
    onChange: any = (value: any) => {};
    onTouched: any = () => {};

// This method is called when you want to update the custom input's value
// from an external source. It synchronizes the internal state with the
// provided 'value'.
    writeValue(value: any): void {
      this.value = value;
    }

    // This method is called when the value of the custom input changes
    registerOnChange(fn: any): void {
      this.onChange = fn;
    }

    // This method is called when the custom input is touched
    registerOnTouched(fn: any): void {
      this.onTouched = fn;
    }

    // These methods are required by the ControlValueAccessor interface
    markAsTouched(): void {
      this.onTouched();
    }

    // This method is called when the value of the custom input changes
    onValueChange(event: any) {
      this.value = event.target.value; // Update the value of the custom input
      this.onChange(this.value); // This method call will bind the value of the custom input to the form control
      this.markAsTouched(); // This method call will mark the custom input as touched
    }
}

These custom form controls need to implement the writeValue, registerOnChange, and registerOnTouched methods as mandated by the ControlValueAccessor interface. These methods ensure seamless integration with the Angular Reactive Form, supporting value updates, validations, and state changes.

Moving Input and Dropdown Components

With our custom form control components in place, we can now migrate the input and dropdown components from the app-form to these new custom components:

<!-- dynamic-form-field.component.html -->
<ng-container [formGroup]="formControlValueAccessor">
  <app-custom-input formControlName="customInputValue" />
</ng-container>

Using Custom Form Controls in Dynamic Forms

Having encapsulated each component within its own form control component, they are now ready for use in the dynamic form. These custom form controls can be effortlessly incorporated into the dynamic-form-field template:

<!-- dynamic-form-field.component.html -->
<div class="form-item-container">
  <ng-container *ngSwitchCase="'text'">
    <app-custom-input
      type="text"
      class="form-control"
      [formItem]="formItem"
      formControlName="{{ formItem.id }}"
    />
    <mat-error>
      <app-error-message [formItem]="formItem" />
    </mat-error>
  </ng-container>

  <ng-container *ngSwitchCase="'select'">
    <app-custom-dropdown
      class="form-control"
      [formItem]="formItem"
      [formControl]="getFormControl(formItem)"
      formControlName="{{ formItem.id }}"
    />
    <mat-error>
      <app-error-message [formItem]="formItem" />
    </mat-error>
  </ng-container>
</div>

Managing Styles and Classes for Dynamic Custom Form Controls

One of the challenges we encounter after integrating custom form fields is dynamically handling styles and classes for these components. Since the components are dynamic and defined in the configuration, their styling cannot be pre-defined. Instead, we can pass styles and classes through the configuration, ensuring that class names align between the configuration and CSS files.

For instance, to apply a custom style to the "email" field, you can define these styles:

// movies.config.ts
{
  id: 'email',
  label: 'Email',
  type: 'text',
  validators: [
    // Validation rules here
  ],
  classes: ['email-field-style'], // Pass dynamic classes here
}

The 'email-field-style' will be applied to the email form field at runtime.

In the HTML template, you can apply dynamic styles like this:

<!-- custom-input.component.html -->
<input
  [ngClass]="formItem.styles" <!-- Pass dynamic styles here -->
  matInput
  type="text"
  class="form-control"
  [value]="value"
  (keyup)="onValueChange($event)"
  (blur)="onTouched()"
/>

By passing all the dynamic styles through the configuration then the dynamic styles will be applied to the dynamic form control.

In the SCSS file, define the styling for the "email-field-style" class. This approach allows you to attach custom classes and styles to the dynamic form controls without causing unintended side effects.

By following these steps, you can isolate input and dropdown components, create custom form controls, and manage dynamic styles and classes effectively, enhancing the flexibility and reusability of your dynamic forms in Angular.

// global_styles.scss
.email-field-style.ng-touched.ng-invalid {
  #email {
    .mdc-text-field {
      border: 2px solid orange;
    }
  }
}

Summary

In this third part of our Angular dynamic forms series, 🚀 we focus on maximizing modularity, reusability, and dynamic styling. We demonstrate how to isolate input and dropdown components into separate custom form controls, implement the ControlValueAccessor interface for seamless integration, and manage 🎨 dynamic styles and classes. This approach enhances form flexibility and reusability, allowing you to create more dynamic and user-friendly Angular forms. 🛠️

Part 2: Custom Validation, Enhanced Interface, Error Handling, and Dynamic Data Binding

Loukas Kotas — Sun, 13 Aug 2023 17:57:00 +0000

Introduction

Continuing from Part 1: Create Configuration Based Dynamic Forms in Angular, where we explored dynamic forms in Angular via a configuration-driven approach, this article advances further. Angular's versatility for building forms is undeniable, yet default validation messages sometimes lack. Here, we delve into custom validation errors, in order to provide more meaningful and user-centric feedback in Angular forms, enhancing the clarity and relevance of error messages, leading to a better user experience. By the end of this article, you'll be able to:

Implement a dedicated error component for streamlined error handling in dynamic forms.
Extend the capabilities of the DynamicFormFieldModel interface with custom validators.
Achieve dynamic data binding using template references and the @ViewChildren decorator.
Enhance the user experience of your Angular forms with more meaningful error messages and improved interactivity.

Code Example

Find a live code example on StackBlitz here. Feel free to explore the code and experiment with dynamic forms yourself!

Let's dive in! 🚀

Adding Custom Validation Errors

To begin, we'll empower the DynamicFormFieldModel by introducing the ValidatorError interface. This interface allows us to define custom validation errors, providing more meaningful feedback to users. We use the ErrorAssosiation enum to associate each custom error with a specific validation scenario, making it easy to identify the error type triggered by each validation. The errorMessage field within the ValidatorError interface serves as the custom error message for each validation error. Furthermore, the errorAssosiation field within this interface serves as a critical linkage between the error object and a specific reactive form error identifier. This linkage ensures precise error identification, facilitating a sophisticated error handling mechanism, and fostering effective communication with users.

// ValidatorError interface and ErrorAssosiation enum
export interface ValidatorError {
  validator: ValidatorFn;
  errorMessage?: string;
  errorAssosiation: ErrorAssosiation;
}

export enum ErrorAssosiation {
  // Native Validation Error Identifiers
  REQUIRED = 'required',
  MINLENGTH = 'minlength',
  MAXLENGTH = 'maxlength',
  EMAIL = 'email',
  MIN = 'min',
  MAX = 'max',
  PATTERN = 'pattern',
  REQUIREDTRUE = 'requiredtrue',
  NULLVALIDATOR = 'nullvalidator',
  // Custom Validation Error Identifier
  UPPERCASE = 'uppercaseLetter',
}

Enhancing the Interface for Custom Validators

With the ValidatorError interface in place, we upgrade the DynamicFormFieldModel interface by replacing the traditional validators field with this new interface. This enhancement enables us to attach custom validation errors to form fields, resulting in more relevant and user-focused error messages. Now, each validator in the configuration can have a corresponding error message, greatly improving the overall user experience.

// Enhanced DynamicFormFieldModel with ValidatorError interface
export interface DynamicFormFieldModel {
  id: string;
  label: string;
  type: DynamicFormFieldModelType;
  selectMenuOptions?: SelectMenuOption[];
  value?: string | SelectMenuOption[]; // default value of the dynamic field
  validators?: ValidatorError[];
}

// Example configuration with custom validation errors
...
{
      id: 'favoriteMovies',
      label: 'Favorite Movies',
      type: 'select',
      selectMenuOptions: [],
      validators: [
        {
          validator: Validators.required,
          errorMessage: 'Field is required',
          errorAssosiation: ErrorAssosiation.REQUIRED,
        },
        {
          validator: Validators.minLength(3),
          errorMessage: 'You need to select at least 3 movies',
          errorAssosiation: ErrorAssosiation.MINLENGTH,
        },
      ],
    },
...

Creating a Separate Error Component

While our enhancements have significantly improved the form's flexibility, we encounter an issue with code repetition in the template when displaying error messages. To address this, we introduce a dedicated component: ErrorMessageComponent. This component handles the display of error messages below each dynamic form field, ensuring a cleaner and more organized user interface. By utilizing the ValidatorError associations, we can present the correct custom error message for each validation error.

<!-- error-message.component.html -->
<span *ngIf="form.get(formItem.id)!.dirty">{{ getValidationErrorMessage(formItem) }}</span>

// error-message.component.ts
  @Input() formItem!: DynamicFormFieldModel;
  form!: FormGroup;

  constructor(private rootFormGroup: FormGroupDirective) {
    this.form = this.rootFormGroup.control;
  }

  getValidationErrorMessage(field: DynamicFormFieldModel): string {
    const control = this.form.get(field.id);
    const errorKey = Object.keys(control!.errors || {})[0];

    // Here we assosiate the form control error with the custom error
    const customError = field.validators?.find(
      (validatorError) => validatorError.errorAssosiation === errorKey
    );

    return customError?.errorMessage || '';
  }

Achieving Dynamic Data Binding

In the final section, we explore the dynamic data binding capabilities of our enhanced dynamic forms. To accomplish this, we use template references (#) to identify each dynamic form field. We leverage the @ViewChildren decorator to access these fields, and in the ngAfterViewInit lifecycle hook, we fetch data from a service. We demonstrate this with an example of asynchronously fetching a user's favorite movies and passing the data to the relevant dynamic form field. This dynamic data binding technique enhances the form's adaptability and user interaction.

// ngAfterViewInit in the component
@ViewChildren('dynamicFormField')
dynamicFormFieldContainers!: QueryList<ElementRef>;

ngAfterViewInit() {
  const favoriteMoviesId = 'favoriteMovies';
  const favoriteMovies = this.getFieldContainer(favoriteMoviesId) as any;
  this.mainService.getFavoriteMovies().subscribe((movies) => {
    favoriteMovies['formItem']['selectMenuOptions'] = movies;
  });
}

getFieldContainer(id: string): ElementRef {
  return this.dynamicFormFieldContainers.filter((d: any) => d['formItem']['id'] === id)[0];
}

// Service for fetching movie data
@Injectable({ providedIn: 'root' })
export class MainService {
  constructor() {}

  getFavoriteMovies(): Observable<SelectMenuOption[]> {
    return of([
      {
        label: 'Star Wars',
        value: 'e7a9c049-1a85-4c5a-b755-1b0a5c4394a3',
      },
      {
        label: 'Lord of The Rings',
        value: 'd624c916-d6f7-487f-8b16-87a034de3e34',
      },
      {
        label: 'Shutter Island',
        value: 'cf7cb566-6d2b-4b6b-96a3-ae9fba2a47af',
      },
      {
        label: 'The Godfather',
        value: 'b19b3edc-32da-4684-a10f-6e019df00d9e',
      },
    ]);
  }
}

Summary and Next Steps

In this article, we've covered essential aspects of creating powerful dynamic forms in Angular. We added custom validation errors, enhanced the DynamicFormFieldModel interface, introduced a separate error component for improved error handling, and achieved dynamic data binding. These enhancements significantly enhance the user experience and form flexibility.

Stay tuned for the next article, where we'll take our dynamic forms to the next level. We'll delve deeper into advanced form handling techniques and the tools to create even more dynamic and interactive Angular forms. Exciting developments are on the horizon, so keep an eye out for the upcoming part! 🚀

Part 1: Create Configuration Based Dynamic Forms in Angular

Loukas Kotas — Sun, 06 Aug 2023 09:55:20 +0000

Introduction

Hey there, fellow developers! Welcome to the first part of our series on creating dynamic forms in Angular based on configuration files. In this article, I'll guide you through the process of building a flexible and interactive form using Angular's reactive forms approach. We'll leverage a configuration model to control form fields, validators, and error messages dynamically. By the end of this article, you'll be able to:

Create dynamic form fields based on the configuration provided.
Control the form fields by adjusting the model interface to suit your needs.
Display separate error messages for each validation case.
Pass separate validators for each field in the configuration.

Code Example

Find a live code example on StackBlitz here. Feel free to explore the code and experiment with dynamic forms yourself!

Let's dive in! 🚀

Understanding the Goal

Our main objective is to develop a robust form component capable of generating dynamic form fields based on a configuration file. The cornerstone of this system is the DynamicFormFieldModel, enabling us to define essential properties for each form field:

id: A unique key serving to identify the dynamic form field.
label: Presented as a placeholder or title for the field.
type: Determines the type of form field component to be rendered, such as a text input or a dropdown/select.
selectMenuOptions (optional): Defines an array of options for the dropdown if the field is of type 'select'.
value (optional): Provides a default value for the form field, with an empty string used as the default if unspecified.
validators (optional): Empowers us to apply specific validation rules to the field using an array of Angular Validators.

With the versatile DynamicFormFieldModel, we can easily customize and extend our form fields based on the configuration, making it a potent solution for creating dynamic forms with diverse input types and validation requirements.

Feel free to add as many fields as needed; the system accommodates future scenarios, such as incorporating new components (e.g calendar). There is no limit to the fields we can add, providing flexibility and adaptability to our form-building capabilities.

Now, let's delve into the implementation details! 💻

export interface DynamicFormFieldModel {
  id: string;
  label: string;
  type: DynamicFormFieldModelType;
  selectMenuOptions?: SelectMenuOption[];
  value?: string | SelectMenuOption[];
  validators?: ValidatorFn[];
}

Building the Dynamic Form Field Component

In this section, we will explore the dynamic-form-field.component.ts file, which serves as the cornerstone of our dynamic form fields implementation. By leveraging Angular's powerful FormGroupDirective, we gain access to the root form of the parent component that hosts our dynamic form fields. This connection allows us to seamlessly render different types of form fields based on the type property derived from the DynamicFormFieldModel provided in the configuration.

...
export class DynamicFormFieldComponent {
  @Input() formItem!: DynamicFormFieldModel;
  form!: FormGroup;

  constructor(private rootFormGroup: FormGroupDirective) {
   this.form = this.rootFormGroup.control;
  }
}

Defining the Model

The dynamic-form-field.model.ts file houses our configuration model. Here, we define the types and interfaces for our dynamic form fields. The DynamicFormFieldModelType allows us to restrict the available field types to 'text' or 'select'.

It is important to note that if we plan to add more input elements to the dynamic-form-field.component, we must proactively update the DynamicFormFieldModelType as well. This proactive approach ensures that the model remains accurate and reflects the latest available field types, enabling seamless integration of new input elements without any compatibility issues. By maintaining consistency between the component and the model, we guarantee smooth expansion and optimization of our dynamic form-building capabilities.

export type DynamicFormFieldModelType = 'text' | 'select';

export interface SelectMenuOption {
  label: string;
  value: string;
}

export interface DynamicFormFieldModel {
  id: string;
  label: string;
  type: DynamicFormFieldModelType;
  selectMenuOptions?: SelectMenuOption[];
  value?: string | SelectMenuOption[];
  validators?: ValidatorFn[];
}

Rendering the Dynamic Form Fields

In dynamic-form-field.component.html, we leverage Angular's ngSwitch to dynamically render the appropriate form field based on its type. We efficiently control the dynamic generation of form fields while ensuring separate error messages for each validation case. The form property, represented by a FormGroup, is initialized with the root form control of the parent component. This design enables smooth synchronization of values and validation between the parent form and the DynamicFormFieldComponent.

<div class="dynamic-form-field-container">
  <ng-container [formGroup]="form">
    <ng-container [ngSwitch]="formItem.type">
      <mat-form-field *ngSwitchCase="'text'">
        <!-- ... -->
      </mat-form-field>
      <mat-form-field *ngSwitchCase="'select'">
        <!-- ... -->
      </mat-form-field>
    </ng-container>
  </ng-container>
</div>

Assembling the Main Application Component

In this approach, we leverage the setupFormFields function to dynamically generate form fields based on the configuration specified in the dynamicFormFields variable.

By calling this function, we iterate through each item in the configuration and create the corresponding form control using Angular's FormBuilder service. This allows us to define the initial value for each form field, which is derived from the value property in the configuration. If no default value is provided, we simply set an empty string as the default.

Additionally, we have the flexibility to apply custom validation rules to each field by utilizing the validators property in the configuration. This ensures that the form fields adhere to specific requirements and constraints, providing a reliable and interactive user experience.

The true beauty of this approach lies in its adaptability. By making changes to the configuration, such as adding new fields or altering their order, the form dynamically adjusts to reflect these modifications. As a result, we have a highly flexible and efficient way to create complex and interactive forms that can cater to various scenarios.

//...
export class App {
  myForm!: FormGroup;
  dynamicFormFields: DynamicFormFieldModel[] = [
    // ...
  ];

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({});
    this.setupFormFields();
  }

  setupFormFields() {
    this.dynamicFormFields.forEach((formItem: DynamicFormFieldModel) => {
      let formControl;
      formControl = this.fb.control(formItem.value || '', formItem.validators);
      this.myForm.addControl(formItem.id, formControl);
    });
  }}

Displaying the Dynamic Form in the App Component

Finally, in app.component.html, we render the dynamic form fields by iterating through the dynamicFormFields array. Each form field is displayed using the dynamic-form-field component.

<ng-container [formGroup]="myForm">
  <!-- Generator -->
  <ng-container *ngFor="let formItem of dynamicFormFields">
    <dynamic-form-field [formItem]="formItem"></dynamic-form-field>
  </ng-container>
</ng-container>
<section>
  <button mat-raised-button color="primary" [disabled]="!myForm.valid">
    Click me
  </button>
</section>

Conclusion

Congratulations! In this article, we've successfully created dynamic and interactive forms in Angular by utilizing a configuration-driven approach. By leveraging the DynamicFormFieldModel, customizing form properties, and using ngSwitch, we've built a powerful form component that can handle various form fields with ease.

Stay tuned for the next article, where we'll dive deeper into the magic of dynamic forms. We'll explore how to break down each form field into separate components, further enhancing the reusability and maintainability of our dynamic forms. Until then, happy coding! 🚀

Destructuring using 'this' keyword at Typescript

Loukas Kotas — Mon, 09 Aug 2021 22:23:15 +0000

Object Destructuring

Object Destructuring introduced at ES6 and it's useful for object assignment value-by-value.

Example

const {a1: string, a2: string} = {greeting: 'Hello!', who: 'dev.to Community'};
// a1: 'Hello1',
// a2: 'Dev To Community',

The Problem

class DevToClass {
  a1: string;
  a2: string;
  a3: string;

setVal(): void {
  // error: 'this' is not recognized inside the scope. 
  const {this.a1, this.a2, this.a3} = {a1: 'Hello!', a2: 'dev.to', a3: 'community'};
}
}

The Case

Imagine the scenario we have a class, and we want to assign some object's values, that can also be undefined to a class's variables.
Typescript will complain that this is not recognized. So we have to assign those variables to some constants and then assign them to class's variables.

class DevToClass {
  a1: string;
  a2: string;
  a3: string;

setVal(): void {
  const {a1, a2, a3} = {a1: 'Hello!', a2: 'dev.to', a3: 'community'};
  this.a1 = a1;
  this.a2 = a2;
  this.a3 = a3; 
}
}

You can see it, right? What if we have more than three variables to assign?

Aliases to the rescue!

A destructured variable can have a different name than the property value. If that variable name does not exist, it will automatically be constructed and assigned with the value. If it exists, then JS will just assign the destructured value to the existed variable. In that way this can be used referring to any class's variable, like a normal variable.

class DevToClass {
  a1: string;
  a2: string;
  a3: string;

setVal(): void {
  ({a1: this.a1, a2: this.a2, a3: this.a3} = {a1: 'Hello!', a2: 'dev.to', a3: 'community'});
// this.a1: 'Hello!', this.a2: 'dev.to', this.a3: 'community'
}
}

The redundant code for assignments is gone! Now all assignments will take place in one line.

I hope you found this article useful!

Check & Contact me on:

Forem: Loukas Kotas

The power of forwardRef to fix circular dependencies 🔄 in Angular

Introduction

Under the Hood: The Mechanism of forwardRef

Circular dependencies between components

Part 3: Maximizing Angular Forms with Dynamic Custom Form Controls and Styling

Introduction

Code Example

Isolating Input and Dropdown Components

Moving Input and Dropdown Components

Using Custom Form Controls in Dynamic Forms

Managing Styles and Classes for Dynamic Custom Form Controls

Summary

Part 2: Custom Validation, Enhanced Interface, Error Handling, and Dynamic Data Binding

Introduction

Code Example

Adding Custom Validation Errors

Enhancing the Interface for Custom Validators

Creating a Separate Error Component

Achieving Dynamic Data Binding

Summary and Next Steps

Part 1: Create Configuration Based Dynamic Forms in Angular

Introduction

Code Example

Understanding the Goal

Building the Dynamic Form Field Component

Defining the Model

Rendering the Dynamic Form Fields

Assembling the Main Application Component

Displaying the Dynamic Form in the App Component

Conclusion

Destructuring using 'this' keyword at Typescript

Object Destructuring

Example

The Problem

The Case

Under the Hood: The Mechanism of `forwardRef`