fix(angular): strict template event bindings

angular/src/directives/angular-component-lib/utils.ts

@@ -1,7 +1,5 @@
 /* eslint-disable */
 /* tslint:disable */
-import { fromEvent } from 'rxjs';
-
 export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype;
   inputs.forEach(item => {
@@ -28,17 +26,28 @@ export const proxyMethods = (Cmp: any, methods: string[]) => {
   });
 };
 
-export const proxyOutputs = (instance: any, el: any, events: string[]) => {
-  events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (
+    customElement !== undefined &&
+    typeof customElements !== 'undefined' &&
+    !customElements.get(tagName)
+  ) {
+    customElements.define(tagName, customElement);
+  }
 }
 
-export function ProxyCmp(opts: { inputs?: any; methods?: any }) {
-  const decorator = function(cls: any) {
-    if (opts.inputs) {
-      proxyInputs(cls, opts.inputs);
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { tagName: string, customElement?: any, inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { tagName, customElement, inputs, methods } = opts;
+
+    defineCustomElement(tagName, customElement);
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
     }
-    if (opts.methods) {
-      proxyMethods(cls, opts.methods);
+    if (methods) {
+      proxyMethods(cls, methods);
     }
     return cls;
   };

angular/src/directives/navigation/nav-delegate.ts

@@ -1,9 +1,18 @@
-import { ComponentFactoryResolver, ElementRef, Injector, ViewContainerRef, Directive } from '@angular/core';
+import {
+  ComponentFactoryResolver,
+  ElementRef,
+  Injector,
+  ViewContainerRef,
+  Directive,
+  Output,
+  EventEmitter,
+} from '@angular/core';
 
 import { AngularDelegate } from '../../providers/angular-delegate';
-import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
+import { ProxyCmp } from '../angular-component-lib/utils';
 
 @ProxyCmp({
+  tagName: 'ion-nav',
   inputs: ['animated', 'animation', 'root', 'rootParams', 'swipeGesture'],
   methods: [
     'push',
@@ -26,6 +35,9 @@ import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
 })
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 export class NavDelegate {
+  @Output() ionNavDidChange = new EventEmitter<CustomEvent>();
+  @Output() ionNavWillChange = new EventEmitter<CustomEvent>();
+
   protected el: HTMLElement;
   constructor(
     ref: ElementRef,
@@ -36,6 +48,5 @@ export class NavDelegate {
   ) {
     this.el = ref.nativeElement;
     ref.nativeElement.delegate = angularDelegate.create(resolver, injector, location);
-    proxyOutputs(this, this.el, ['ionNavDidChange', 'ionNavWillChange']);
   }
 }

angular/src/directives/overlays/modal.ts

@@ -8,46 +8,15 @@ import {
   ElementRef,
   EventEmitter,
   NgZone,
+  Output,
   TemplateRef,
 } from '@angular/core';
-import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
+import { ProxyCmp } from '../angular-component-lib/utils';
 import { Components } from '@ionic/core';
 
-export declare interface IonModal extends Components.IonModal {
-  /**
-   * Emitted after the modal has presented.
-   **/
-  ionModalDidPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted before the modal has presented.
-   */
-  ionModalWillPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted before the modal has dismissed.
-   */
-  ionModalWillDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the modal has dismissed.
-   */
-  ionModalDidDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
-   */
-  didPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted before the modal has presented. Shorthand for ionModalWillPresent.
-   */
-  willPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
-   */
-  willDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
-   */
-  didDismiss: EventEmitter<CustomEvent>;
-}
+export declare interface IonModal extends Components.IonModal {}
 @ProxyCmp({
+  tagName: 'ion-modal',
   inputs: [
     'animated',
     'backdropBreakpoint',
@@ -96,6 +65,39 @@ export declare interface IonModal extends Components.IonModal {
   ],
 })
 export class IonModal {
+  /**
+   * Emitted after the modal has presented.
+   **/
+  @Output() ionModalDidPresent = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted before the modal has presented.
+   */
+  @Output() ionModalWillPresent = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted before the modal has dismissed.
+   */
+  @Output() ionModalWillDismiss = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted after the modal has dismissed.
+   */
+  @Output() ionModalDidDismiss = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted after the modal has presented. Shorthand for ionModalWillDismiss.
+   */
+  @Output() didPresent = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted before the modal has presented. Shorthand for ionModalWillPresent.
+   */
+  @Output() willPresent = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
+   */
+  @Output() willDismiss = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
+   */
+  @Output() didDismiss = new EventEmitter<CustomEvent>();
+
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
 
   isCmpOpen: boolean = false;
@@ -114,16 +116,5 @@ export class IonModal {
       this.isCmpOpen = false;
       c.detectChanges();
     });
-
-    proxyOutputs(this, this.el, [
-      'ionModalDidPresent',
-      'ionModalWillPresent',
-      'ionModalWillDismiss',
-      'ionModalDidDismiss',
-      'didPresent',
-      'willPresent',
-      'willDismiss',
-      'didDismiss',
-    ]);
   }
 }

angular/src/directives/overlays/popover.ts

@@ -8,45 +8,14 @@ import {
   ElementRef,
   EventEmitter,
   NgZone,
+  Output,
   TemplateRef,
 } from '@angular/core';
-import { ProxyCmp, proxyOutputs } from '../angular-component-lib/utils';
+import { ProxyCmp } from '../angular-component-lib/utils';
 import { Components } from '@ionic/core';
-export declare interface IonPopover extends Components.IonPopover {
-  /**
-   * Emitted after the popover has presented.
-   */
-  ionPopoverDidPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted before the popover has presented.
-   */
-  ionPopoverWillPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has dismissed.
-   */
-  ionPopoverWillDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has dismissed.
-   */
-  ionPopoverDidDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
-   */
-  didPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
-   */
-  willPresent: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
-   */
-  willDismiss: EventEmitter<CustomEvent>;
-  /**
-   * Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
-   */
-  didDismiss: EventEmitter<CustomEvent>;
-}
+export declare interface IonPopover extends Components.IonPopover {}
 @ProxyCmp({
+  tagName: 'ion-popover',
   inputs: [
     'alignment',
     'animated',
@@ -95,6 +64,39 @@ export declare interface IonPopover extends Components.IonPopover {
   ],
 })
 export class IonPopover {
+  /**
+   * Emitted after the popover has presented.
+   */
+  @Output() ionPopoverDidPresent = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted before the popover has presented.
+   */
+  @Output() ionPopoverWillPresent = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted after the popover has dismissed.
+   */
+  @Output() ionPopoverWillDismiss = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted after the popover has dismissed.
+   */
+  @Output() onPopoverDidDismiss = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
+   */
+  @Output() didPresent = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
+   */
+  @Output() willPresent = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
+   */
+  @Output() willDismiss = new EventEmitter<CustomEvent>();
+  /**
+   * Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
+   */
+  @Output() didDismiss = new EventEmitter<CustomEvent>();
+
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
 
   isCmpOpen: boolean = false;
@@ -113,15 +115,5 @@ export class IonPopover {
       this.isCmpOpen = false;
       c.detectChanges();
     });
-    proxyOutputs(this, this.el, [
-      'ionPopoverDidPresent',
-      'ionPopoverWillPresent',
-      'ionPopoverWillDismiss',
-      'ionPopoverDidDismiss',
-      'didPresent',
-      'willPresent',
-      'willDismiss',
-      'didDismiss',
-    ]);
   }
 }