How to add ng-model functionality to a component

Question

Angular ng-change on ng-model passed into child directive

Basically, I want to be able to pass in ng-model from a parent directive to a child directive. I could ju

Answer 1

How to add ng-model functionality to a component

Use one-way < input for input and use the ngModelController API for output:

app.component("checkboxComponent", {
    bindings: { ngModel: '<' },
    require: { ngModelCtrl: 'ngModel' },
    template: `
          
    `,
    controller: function() {
      this.ngModelChange = () => {
        this.ngModelCtrl.$setViewValue(this.ngModel);
      };
    }
})

The component uses one-way binding for input, and $setViewValue for output. With this method, the ng-change works, and the component can be used as a form element:

For more information, see

• AngularJS ngModelController API Reference
• AngularJS Developer Guide -Implementing custom form controls (using ngModel)

The DEMO

angular.module("app",[])

.component("checkboxComponent", {
    bindings: { ngModel: '<' },
    require: { ngModelCtrl: 'ngModel' },
    template: `
        

          
Checkbox Component
          
                 Checkbox
        
    `,
    controller: function() {
      this.ngModelChange = () => {
        this.ngModelCtrl.$setViewValue(this.ngModel);
      };
    }
})

  
     
    
    

      
value = {{value}}
      
value2 = {{value2}}