0

I am working on the AngularJS project and I have a page that injects a component with 3 different buttons. I need to display a hint to this button only when one of them is clicked/active/chosen (no need to display anything for another 2). I bet this should be solved with binding but I am not sure how to do it properly.

Can you advise, please?

Here is my code.

Main page HTML:

<ch-form-group
  title="Which notification should be sent?"
  header="Define the notification that you want to send out to the qualifying customers.">

  <ch-toggle-blocks
    toggle-blocks="$ctrl.event_action_params"
    on-block-clicked="$ctrl.toggleEventAction(toggleBlock.key)">
  </ch-toggle-blocks>

// I want to display block here. So when inside the ch-toggle-blocks user // chose only specific button

  <notification-form
    channel-type="$ctrl.getChannelType()"
    channel="$ctrl.getChannel()">
  </notification-form>
</ch-form-group>

ch-toggle-block HTML

<div class="ch-toggle-blocks">
  <div
    data-hook="toggle-block-selector"
    class="toggle-block"
    ng-click="$ctrl.clickBlock(toggleBlock)"
    ng-class="{'current-toggle-block': toggleBlock.is_current}"
    ng-repeat="toggleBlock in $ctrl.toggleBlocks">

    <span
      data-hook="current-toggle-block-label"
      class="label label-cityhive"
      ng-if="toggleBlock.is_current">
      Current
    </span>

    <div class="toggle-block-icon">
      <i class="{{toggleBlock.icon}}"></i>
    </div>

    <div class="toggle-block-name">
      <span>{{toggleBlock.friendly_name}}</span>
    </div>
  </div>
</div>

chToggleBlocksComponent.js

'use strict';
angular.module('MyModule')
.component('chToggleBlocks',  {
  bindings: {
    toggleBlocks: '<',
    onBlockClicked: '&'
  },
  templateUrl: 'ch_toggle_blocks/chToggleBlocks.html',
  controller: function() {
    var ctrl = this;
    ctrl.clickBlock = function(toggleBlock) {
      this.onBlockClicked({toggleBlock: toggleBlock})
    }
  }
});

So, basically, when {{toggleBlock.friendly_name}} with the text "SMS" is active, I need to display another div on the main page.

NBash
  • 455
  • 3
  • 10
  • 1
    Can't you put in a new div and use a `ng-if` to check `toggleBlock.friendly_name == 'SMS'` ? – Display Name is missing Nov 18 '20 at 19:22
  • @DisplayNameismissing I wanted to it this way but I was asked to add it to the parent container. So I need to pass the data from the child container – NBash Nov 19 '20 at 09:01
  • I feel like an easy solution to your problem is to use `$scope.emit` and `$scope.on` to send a message from the child to the parent: https://stackoverflow.com/questions/14502006/working-with-scope-emit-and-scope-on When the child is set to `SMS`, `emit` an event, in the parent catch it with `on` and then set a value that will activate your div with an `ng-if` – Display Name is missing Nov 19 '20 at 16:25

0 Answers0