CODEWITHSUNDEEP
angularjsweb-component
eustatos
eustatos

Reputation: 714

How to take event from web-components in angularjs?

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>

Upvotes: 1

Views: 1508

Answers (1)

Mohammad Reza Rahimi
Mohammad Reza Rahimi

Reputation: 662

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

Upvotes: 2

Related Questions