Angular 1.5 component with ng-model

Question

Is it possible to use ng-model with a component? I would like to bind a scope variable to a component with ng-model. I have plunkered my issue. I would like the component my-inp

Answer 1

I've fixed the plunker for you.

Names of you parameters have to correspond to the names in your component. You should be using camelCased names in your component and kebab-cased in your templates. Example:

  bindings: {
      myPlaceholder: '@',
      myModel:'='
    }

 <my-input my-placeholder="Enter first name" my-model="userData.firstName">

Regarding your question about using ng-model - you can use any parameter as far you define it in your component. In this case the name of your parameter should be ngModel.

Answer 2

You can use this code:

function myInputController($scope) {
    var self = this;
    this.$onInit = () => {
        this.ngModel.$render = () => {
            self.model = self.ngModel.$viewValue;
        };
        $scope.$watch(function() { return self.model; }, function(value) {
            self.ngModel.$setViewValue(value);
        });
    };
}
module.component('myInput', {
    require: {
        ngModel: '^ngModel'
    },
    template: '<input ng-model="vm.model"/>',
    controller: myInputController,
    controllerAs: 'vm'
};