Angular2 Custom Directive two way binding

Question

I am trying to write a custom directive that if the user selects the "All" option on a drop down it automatically selects all the options I have been able to get my custom directive selecting all the options but this does not update the model on the consuming component.

Custom Directive

@Directive({ selector: '[selectAll]' })
export class SelectAllDirective {
    private selectElement: any;
    private selectedItemsd:number[];

constructor(private el: ElementRef) {
    this.selectElement = el.nativeElement;
}

@HostListener('change')
onChange() {

    if (this.selectElement.options[0].selected) {
        for (let i = 0; i < this.selectElement.options.length; i++) {
            this.selectElement.options[i].selected = true;
        }
    }
}
}

And the template

  <select selectAll multiple
                                ngControl="shoreLocation"
                                #shoreLocation="ngModel"
                                id="shoreLocation"
                                [(ngModel)]="customTask.shoreLocations"
                                name="shoreLocation"
                                class="form-control multi-select"
                                required
                                style="height:150px">

I have tried creating an @Input and using the banana in a box syntax to try and update the model, I wasn't succesful with that.

I was able to use @Output and emit an event that the consuming component could handle similar to https://toddmotto.com/component-events-event-emitter-output-angular-2 but I would prefer if I could simply update the model automatically.

I am wondering if its possible? Or if creating a custom component similar to http://plnkr.co/edit/ORBXA59mNeaidQCLa5x2?p=preview is the better option.

Thanks in advance

Steven Luke · Accepted Answer · 2016-08-23 14:52:34Z

1

Setting the selected state in Javascript doesn't send the "changed" event on the select component (probably because it is direct access to the child option, but not sure). Try triggering the changed event yourself by doing this:

if (this.selectElement.options[0].selected) {
    for (let i = 0; i < this.selectElement.options.length; i++) {
        this.selectElement.options[i].selected = true;
    }
    //These are the two new lines
    let changeEvent = new Event("change", {"bubbles":true, "cancelable": false});
    this.selectElement.dispatchEvent(changeEvent);
}

And see if that triggers the ngModel to get updated.

answered Aug 23, 2016 at 14:52

Steven Luke

5212 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Custom Directive two way binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related