Setting Angular @Input dynamically for external components

Question

Setting Angular @Input dynamically for external components

Utilizing PrimeNG components, I am implementing the disabled attribute on different input controls using a directive. Among them are the p-dropdown, p-listbox, and p-calendar PrimeNG controls. While the standard input, textarea, and select controls work smoothly, the PrimeNG controls have disable defined as @Input in the following manner:

private _disabled: boolean;

@Input() get disabled(): boolean {
    return this._disabled;
};

Here is a snippet of the directive:

/*
** Find all inputs and disable them.
*/
disableElements(el: ElementRef): void {
    const controls = el.nativeElement.querySelectorAll('input, select, textarea, p-dropdown, p-listbox, p-checkbox');
    controls.forEach((elmt: any) => {
        this.disableElement(elmt);
    });
}
/*
** Disable an input element.
*/
disableElement(elmt: any): void {
    if (elmt.localName.substr(0, 2) === 'p-') {
        this._renderer.setProperty(elmt, 'disabled', 'true');
    } else {
        if (!elmt.hasAttribute('disabled')) {
            this._renderer.setAttribute(elmt, 'disabled', 'true');
        }
    }
}

Hence, the question arises: how can I disable the PrimeNG third-party controls with an ElementRef.nativeElement? I am contemplating on a method to satisfy the disabled @Input property with respect to an element reference.

angular typescript dom primeng

Answer 1

Answer №1

Instead of using a directive to disable controls programmatically, I recommend handling it with regular inputs. However, I can offer a solution for your specific situation: https://stackblitz.com/edit/angular-disable-prime-ng-elements

The solution may not be perfect, but it's a workaround if you prefer not to work with disabled inputs.

To start, create a directive named
```
PrimeNgComponentsChangeDetectorRefDirective
```
to access a public version of primeng components' change detector and update their views. Manually include all the primeng components you want to manage, using the same selector to automatically match them.

@Directive({
  selector: 'p-checkbox, p-dropdown, p-listbox'
})
export class PrimeNgComponentsChangeDetectorRefDirective {
  public hostComponent: Checkbox | Dropdown | Listbox;

  constructor(
    public cdr: ChangeDetectorRef,
    @Optional() private checkbox: Checkbox,
    @Optional() private dropdown: Dropdown,
    @Optional() private listbox: Listbox
  ) {}

  ngAfterViewInit() {
    this.hostComponent = this.getHostComponent();
  }

  private getHostComponent() {
    return [this.checkbox, this.dropdown, this.listbox].find(
      component => !!component
    );
  }
}

In your disabling directive, include the following properties and methods:

  @ContentChildren(PrimeNgComponentsChangeDetectorRefDirective)
  private componentsQuery: QueryList<
    PrimeNgComponentsChangeDetectorRefDirective
  >;

  disablePrimeNgComponents() {
    const components = this.componentsQuery.toArray();

    components.forEach(component => {
      component.hostComponent.disabled = true;
      component.cdr.detectChanges();
    });
  }

We manually trigger detectChanges because we programmatically changed the disabled property and Angular is unaware of this change.

Answer 2

Instead of using a directive to disable controls programmatically, I recommend handling it with regular inputs. However, I can offer a solution for your specific situation: https://stackblitz.com/edit/angular-disable-prime-ng-elements

The solution may not be perfect, but it's a workaround if you prefer not to work with disabled inputs.

To start, create a directive named
```
PrimeNgComponentsChangeDetectorRefDirective
```
to access a public version of primeng components' change detector and update their views. Manually include all the primeng components you want to manage, using the same selector to automatically match them.

@Directive({
  selector: 'p-checkbox, p-dropdown, p-listbox'
})
export class PrimeNgComponentsChangeDetectorRefDirective {
  public hostComponent: Checkbox | Dropdown | Listbox;

  constructor(
    public cdr: ChangeDetectorRef,
    @Optional() private checkbox: Checkbox,
    @Optional() private dropdown: Dropdown,
    @Optional() private listbox: Listbox
  ) {}

  ngAfterViewInit() {
    this.hostComponent = this.getHostComponent();
  }

  private getHostComponent() {
    return [this.checkbox, this.dropdown, this.listbox].find(
      component => !!component
    );
  }
}

In your disabling directive, include the following properties and methods:

  @ContentChildren(PrimeNgComponentsChangeDetectorRefDirective)
  private componentsQuery: QueryList<
    PrimeNgComponentsChangeDetectorRefDirective
  >;

  disablePrimeNgComponents() {
    const components = this.componentsQuery.toArray();

    components.forEach(component => {
      component.hostComponent.disabled = true;
      component.cdr.detectChanges();
    });
  }

We manually trigger detectChanges because we programmatically changed the disabled property and Angular is unaware of this change.

Setting Angular @Input dynamically for external components

Answer №1

Similar questions

What is the recommended way to handle data upon retrieval from a Trino database?

How can you add a Git submodule without specifying a URL?

Angular application experiencing issues with opening snackbar notifications

Angular Material Dropdown with Option to Add New Item

What is the best way to invoke a method in a child component from its parent, before the child component has been rendered?

Ways to determine the types of props received by a function when the arguments vary for each scenario?

Setting up ng-bootstrap for your project

Incorporating New Relic into an Angular Universal application running on Node.js

Tips for binding data to numerous dynamic controls

The error message "Type 'null' cannot be assigned to type 'Element | DocumentFragment'" occurs when using Nextjs/React createPortal

Exploring ways to display all filtered chips in Angular

Creating a conditional interface based on props in TypeScript: A step-by-step guide

The element of type 'OverridableComponent<LinkTypeMap<{}, "a">>' cannot be assigned to a 'ReactNode'

Comparing numbers in Angular using Typescript

Showing the child component as undefined in the view

Guide to showcasing associated information in HTML using Angular 7

Converting a Promise to an Observable in Angular using Typescript

Enforce numerical input in input field by implementing a custom validator in Angular 2

The issue of resolving NestJs ParseEnumPipe

Tips for inserting a row component into a table using Angular 7