Is it possible to bind the Polymer paper-dropdown-menu with ngControl in Angular?

Question

Is it possible to bind the Polymer paper-dropdown-menu with ngControl in Angular?

I'm currently working on building a form in Angular2 using the Polymer paper-dropdown-menu element. I've been struggling to figure out how to bind the selected value of the dropdown to my component's control. Despite numerous attempts, I haven't had any success. Has anyone managed to overcome this challenge?

Here is an example of a functional paper-input:

template:

<paper-input type="password"
             ngControl="password"
             ngDefaultControl>
</paper-input>

component:

constructor(private fb:FormBuilder) {

    this.loginForm = fb.group({
        password: new Control("")
    });
}

Is there a similar approach for paper-dropdown-menu? I would be satisfied with either binding to the value or the text itself. Thank you!

forms data-binding typescript angular polymer

Answer 1

Answer №1

To achieve the desired functionality, a custom ControlValueAccessor is necessary. While using a ControlValueAccessor directly for the paper-dropdown-menu may not work as expected, implementing it for the paper-menu or paper-listbox inside the paper-dropdown-menu can be successful.

const PAPER_MENU_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PaperMenuControlValueAccessor), multi: true});


@Directive({
  selector: 'paper-listbox',
  host: {'(iron-activate)': 'onChange($event.detail.selected)'},
  providers: [PAPER_MENU_VALUE_ACCESSOR]

})  
export class PaperMenuControlValueAccessor implements ControlValueAccessor {
  onChange = (_:any) => {
  };
  onTouched = () => {
  };

  constructor(private _renderer:Renderer, private _elementRef:ElementRef) {
    console.log('PaperMenuControlValueAccessor');
  }

  writeValue(value:any):void {
    //console.log('writeValue', value);
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'selected', value);
  }

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

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

For more information, refer to:

ngModel Binding on Polymer dropdown (Angular2)
Bind angular 2 model to polymer dropdown

Answer 2

To achieve the desired functionality, a custom ControlValueAccessor is necessary. While using a ControlValueAccessor directly for the paper-dropdown-menu may not work as expected, implementing it for the paper-menu or paper-listbox inside the paper-dropdown-menu can be successful.

const PAPER_MENU_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PaperMenuControlValueAccessor), multi: true});


@Directive({
  selector: 'paper-listbox',
  host: {'(iron-activate)': 'onChange($event.detail.selected)'},
  providers: [PAPER_MENU_VALUE_ACCESSOR]

})  
export class PaperMenuControlValueAccessor implements ControlValueAccessor {
  onChange = (_:any) => {
  };
  onTouched = () => {
  };

  constructor(private _renderer:Renderer, private _elementRef:ElementRef) {
    console.log('PaperMenuControlValueAccessor');
  }

  writeValue(value:any):void {
    //console.log('writeValue', value);
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'selected', value);
  }

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

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

For more information, refer to:

ngModel Binding on Polymer dropdown (Angular2)
Bind angular 2 model to polymer dropdown

Is it possible to bind the Polymer paper-dropdown-menu with ngControl in Angular?

Answer №1

Similar questions

When deciding where to subscribe - in the service or the component - in Angular, it is important to consider the

What is the process for publishing TypeScript interface definitions via npm?

The 'Element[]' type is lacking certain properties when dealing with react children

Maintaining the order of the returned values type is crucial when working with mapped objects in Typescript

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

The close button in Angular 4 is unresponsive until the data finishes loading in the pop-up or table

Creating a numeric sequence based on the date of a corresponding transaction - a step-by-step guide

Step-by-step guide for installing @ng-select when upgrading to Angular 10

Challenge encountered with asynchronous angular queries

Hide the tab in React Native's bottom tab navigation when on the current screen within the navigator

I've noticed that the list item vanishes unexpectedly when utilizing Primeng drag-and-drop feature

Tips for preventing automatic login when a new user is added in firebase

The best method for obtaining a reference to the Angular/Google Maps component in your code

Having trouble getting the NextJS custom 404 page to display?

Exploring the concept of object inheritance in Angular 5 with Typescript

Unable to submit a post on Ionic 3 platform

Implementing Autocomplete feature in Reactjs with Ant Design Library

Why did my compilation process fail to include the style files despite compiling all other files successfully?

How come accessing the superclass's property with a getter in TypeScript is not working as expected?

Angular: Utilizing httpClient to retrieve an object map and passing it as a return value in a function