CODEWITHSUNDEEP
javascriptangularjscomponents
jcgesto
jcgesto

Reputation: 21

Component applying ng-disabled to child component

I'm learning Angular js v1.5 and I'm doing some experiments with components. I have designed 2 components:

Template code for the circular button:

<button
    class="circular-button {{ $ctrl.config.color }}"
    ng-click="$ctrl.onClick()">
    {{ $ctrl.config.text }}
</button>

Circular button component definition code:

components.component('circularButton', {
    bindings: {
        onClick: '&',
        config: '<'
    },
    templateUrl: '/views/components/photos-circular-button.html'
});

Template code for the "counter button" component:

<span>
    <circular-button
        config="$ctrl.buttonConfig"
        on-click="$ctrl.action()"></circular-button>
</span>
<span>{{ $ctrl.counter }}</span>

And the component definition code for it:

components.component('counterButton', {
    bindings: {
        onButtonClick: '&',
        counter: '<',
        buttonConfig: '<'
    },
    templateUrl: '/views/components/photos-counter-button.html',
    controller: function () {
        var ctrl = this;
        ctrl.disabled = false;
        ctrl.action = function () {
            ctrl.counter++;
            ctrl.onButtonClick();
        }
    }
});

So the basic behaviour for all of this would be that when you click on the button, the counter increments in 1. Right now, the parent component, "counter-button" passes a function to be executed when the user clicks the circular button, using the bindings property like this:

onClick: '&'

This way the parent component injects the function to be called. I did this following the Angular Component documentation here:

https://docs.angularjs.org/guide/component

On the section "Example of a component tree".

So far no problems, everything works great. But now I want to add more functionality to the component, and I would like the circular button to disable when the user clicks on it, so one user is only able to increment the counter once. Once again, like the 'like' button on a youtube video for example.

For this I've tried to add the ng-disabled directive to the counter-button template like this:

<span>
    <circular-button
        config="$ctrl.buttonConfig"
        on-click="$ctrl.action()" ng-disabled="$ctrl.disabled"></circular-button>
</span>
<span>{{ $ctrl.counter }}</span>

And in the component controller:

controller: function () {
    var ctrl = this;
    ctrl.disabled = false;
    ctrl.action = function () {
        ctrl.counter++;
        ctrl.disabled = true; //NEW LINE OF CODE.
        ctrl.onButtonClick();
    }
}

But this does not work because the ng-directive is applied to the <circular-button></circular-button> element, and not to the button inside of it, logically.

So let's say, if I don´t want to add another binding to the circular button with the variable who will disable the button, because I want to keep the circular button as generic as possible, how could I do to disable the button from the parent component (or whatever client of the circular button) who uses it?

Maybe I'm not having the right approach to the situation, if you think that this could be done better any other way I would be more than happy to try it. Thanks in advance guys!

Upvotes: 2

Views: 2371

Answers (1)

madannes
madannes

Reputation: 563

This doesn't exactly cascade the ng-disabled down, but I ran across your question while trying to solve a similar problem I had. I essentially created bindable properties in each component for the "isDisabled" flag.

Component like

app.component('outerComponent', {
  controller: (function() {
    function OuterController() { this.myOuterDisabledProperty = false }
    return OuterController;
  })(),
  templateUrl: 'outerComponent.html',
  bindings: { myOuterDisabledProperty: '=' }
});

app.component('innerComponent', {
  controller:(function() {
    function InnerController() { this.myInnerDisabledProperty = false }
    return InnerController;
  })(),
  templateUrl: 'innerComponent.html',
  bindings: { myInnerDisabledProperty: '=' }
});

...and template like

<div style="background-color: #eee; padding: 10px">
 <h2>Outer Component - disabled: {{$ctrl.myOuterDisabledProperty}}</h2>
 <inner-component my-inner-disabled-property="$ctrl.myOuterDisabledProperty"></inner-component>
</div>

Here's a live example: https://embed.plnkr.co/2gbAGd1PM9Gx5rslXChB/

Upvotes: 0

Related Questions