JAVASCRIPT

how to use same component in multiple place with some logic in angularjs

angular.module('app').component('appForm', {
    controller: 'AppFormCtrl',
    templateUrl: 'app-form.html',
    bindings: {
        disableField: "<", // use '<' to generate input on the component
    }
});


<form>
    <input ng-if="$ctrl.disableField == true" type="text"/>
</form>

<div>
   <!-- displays the form input according to the passed property's value -->
   <app-form disable-field="isFieldEnabled"></app-form>
   <!-- displays the form input -->
   <app-form disable-field="true"></app-form>
   <!-- does NOT display the form input -->
   <app-form disable-field="false"></app-form>
   <!-- does NOT display the form input, as disableField is evaluated an NULL in the component instance -->
   <app-form></app-form> 
</div>