How to take event from web-components in angularjs?

Question

I want to use web-components in agnularjs project.
How can I take events from web-components.
I was using ng-click for mwc-checkbox, for example. But I think better handle the event of change and I don`t know how to make it.
How does it receive events from web-components?
Where can I find out about it?

angular.module('app', [])
.directive('appDir', appDir);

angular.bootstrap(
  document.getElementById('root'),
  ['app']
);

function appDir() {
  return {
    templateUrl: 'app-dir.directive.html',
    link: function appDirLinkFn($scope) {
      $scope.checked = false;
      $scope.toggleHandler = function toggleHandler() {
        $scope.checked = !$scope.checked;
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">

<app-dir></app-dir>
<script
  type="text/ng-template"
  id="app-dir.directive.html"
>
  <mwc-checkbox
    ng-prop-checked="checked"
    ng-click="toggleHandler()"
  ></mwc-checkbox>
  <mwc-button
    ng-click="toggleHandler()"
  >Toggle</mwc-button>
  <span ng-bind="checked"></span>
</script>
</div>

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@material/mwc-button@^0.1.0/mwc-button.js?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-checkbox@^0.1.0/mwc-checkbox.js?module"></script>

Mohammad Reza Rahimi · Accepted Answer · 2019-06-12 20:26:27Z

2

web components are like pure Html element so they trigger pure DOM event. in order to handle pure DOM event in Agularjs you can use ngOn directive.

<button ng-on-pureEventName="f()" >click  here</button>

Update

angular.module('app', [])
.directive('appDir', appDir);

angular.bootstrap(
  document.getElementById('root'),
  ['app']
);

function appDir() {
  return {
    templateUrl: 'app-dir.directive.html',
    link: function appDirLinkFn($scope) {
      $scope.checked = false;
      $scope.toggleHandler = function toggleHandler($event) {
        $scope.checked = !$event.target.checked;
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="root">

<app-dir></app-dir>
<script
  type="text/ng-template"
  id="app-dir.directive.html"
>
  <mwc-checkbox
    ng-prop-checked="checked"
    ng-on-input="toggleHandler($event)"
  ></mwc-checkbox>
  <mwc-button
    ng-click="toggleHandler()"
  >Toggle</mwc-button>
  <span ng-bind="checked"></span>
</script>
</div>

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@material/mwc-button@^0.1.0/mwc-button.js?module"></script>
<script type="module" src="https://unpkg.com/@material/mwc-checkbox@^0.1.0/mwc-checkbox.js?module"></script>

It seems that material-components-web-components don't have suitable documentation. I could hardly realize in an issue that onChange event is triggered by onInput event name.

I hope this will help you

edited Jun 12, 2019 at 20:26

answered Jun 12, 2019 at 14:22

Mohammad Reza Rahimi

6721 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

eustatos Over a year ago

thank you for attention. I tried ng-on-change, but it was unsuccessful. Are you can tell me about where or how can be to know pure event name for specific web-components?

eustatos Over a year ago

In github.com/material-components/… I did not find, where this web-compoment dispatch event. To my regret ng-on-input not fired function too

Mohammad Reza Rahimi Over a year ago

what do you mean "ng-on-input not fired function" ?

Mohammad Reza Rahimi Over a year ago

I suggest you take a look at github.com/material-components/…

Collectives™ on Stack Overflow

How to take event from web-components in angularjs?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related