Reputation: 714
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
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