style: Renamed events

BREAKING CHANGE: Renamed events according to Angular style guide: `onClose` to `closemodal`, `onOpen` to `openmodal` (https://angular.io/guide/styleguide#dont-prefix-output-properties)

README.md

@@ -49,7 +49,7 @@ export class GreetingsModalComponent {
 <modal-confirm #confirm 
     title="Confirmation" 
     content="Are you are sure?"
-    (onClose)="onCloseConfirm()"
+    (closemodal)="onCloseConfirm()"
 ></modal-confirm>
 <a (click)="openConfirm()">Confirm</a>
 ```
@@ -142,8 +142,8 @@ Inputs:
   supported settings: routeOnClose, routeOutlets, backOnClose, isOpenClass, isNotificationClass, popupOpenedClass
 
 Outputs:
-* `onClose: EventEmitter<any>`
-* `onOpen: EventEmitter<any>`
+* `closemodal: EventEmitter<any>`
+* `openmodal: EventEmitter<any>`
 
 Methods:
 * `open: void` Open modal
@@ -162,7 +162,7 @@ Inputs:
 * `cancelLabel: string = 'Cancel'`
 
 Outputs:
-* `onClose: EventEmitter<void>` 
+* `closemodal: EventEmitter<void>` 
 
 Properties:
 * `result`: readonly Subject<boolean>` Result of confirm

example/app.component.ts

@@ -27,7 +27,7 @@ require('../src/ngx-modal.css');
         cancelLabel="CANCEL"
         [isNotification]="true"
         [settings]="{bodyClass:'ngx-modal-body ngx-modal-body2'}"
-        (onClose)="confirmClose()"
+        (closemodal)="confirmClose()"
         content="Are you are sure?"></modal-confirm> <br/>
     modal-confirm2:
     <modal-confirm2 #confirm2
@@ -36,7 +36,7 @@ require('../src/ngx-modal.css');
         cancelLabel="CANCEL"
         [isNotification]="true"
         [settings]="{confirmOkayButtonClass: 'x-right', confirmCancelButtonClass: 'x-right'}"
-        (onClose)="confirm2Close()"
+        (closemodal)="confirm2Close()"
         content="Second confirm: Are you are sure?"></modal-confirm2> <br/>
 router-outlet name=modal: <router-outlet name="modal"></router-outlet> <br/>
 router-outlet name=lazy_modal: <router-outlet name="lazy_modal"></router-outlet>

src/modal-confirm.component.ts

@@ -9,7 +9,7 @@ import { Observable } from 'rxjs/Observable';
 
 @Component({
     selector: 'modal-confirm',
-    template: `<modal (onClose)="onCloseModal()" [routed]="false" [isNotification]="isNotification" [settings]="settings">
+    template: `<modal (closemodal)="onCloseModal()" [routed]="false" [isNotification]="isNotification" [settings]="settings">
     <modal-header [title]="title" [hasCloseButton]="false">
         <ng-content select="[header]"></ng-content>
     </modal-header>
@@ -34,11 +34,10 @@ export class ModalConfirmComponent implements OnInit {
     @Input() okayLabel = 'Okay';
     @Input() cancelLabel = 'Cancel';
     @Input() settings: Partial<ModalOptions> = {};
-    @Output() onClose = new EventEmitter<void>();
+    @Output() closemodal = new EventEmitter<void>();
     options: ModalOptions;
     readonly result: Subject<boolean> = new Subject<boolean>();
     @ViewChild(ModalComponent) private readonly modal: ModalComponent;
-    @ViewChild('confirmCancel') private readonly confirmCancel: ElementRef;
 
     constructor(
         @Inject(OPTIONS) private readonly modalOptions: ModalOptions,
@@ -82,6 +81,6 @@ export class ModalConfirmComponent implements OnInit {
     }
 
     onCloseModal() {
-        this.onClose.emit();
+        this.closemodal.emit();
     }
 }

src/modal-confirm2.component.ts

@@ -3,7 +3,7 @@ import { ModalConfirmComponent } from './modal-confirm.component';
 
 @Component({
     selector: 'modal-confirm2',
-    template: `<modal (onClose)="onCloseModal()" [routed]="false" [isNotification]="isNotification" [settings]="settings">
+    template: `<modal (closemodal)="onCloseModal()" [routed]="false" [isNotification]="isNotification" [settings]="settings">
     <modal-header [title]="title" [hasCloseButton]="false">
         <ng-content select="[header]"></ng-content>
     </modal-header>

src/modal-confirm3.component.ts

@@ -3,7 +3,7 @@ import { ModalConfirmComponent } from './modal-confirm.component';
 
 @Component({
     selector: 'modal-confirm3',
-    template: `<modal (onClose)="onCloseModal()" [routed]="false" [isNotification]="isNotification" [settings]="settings">
+    template: `<modal (closemodal)="onCloseModal()" [routed]="false" [isNotification]="isNotification" [settings]="settings">
     <modal-header>
         <h2>{{ title }}</h2>
     </modal-header>

src/modal.component.spec.ts

@@ -39,7 +39,7 @@ describe('ModalComponent:', () => {
 
     it('open event should be emitted', (done) => {
         fixture.detectChanges();
-        component.onOpen.subscribe(() => done());
+        component.openmodal.subscribe(() => done());
         component.open();
     });
 

src/modal.component.ts

@@ -22,8 +22,8 @@ export class ModalComponent implements OnDestroy, OnInit {
     @Input() isOpen: boolean;
     @Input() isNotification: boolean;
     @Input() settings: Partial<ModalOptions>;
-    @Output() onClose: EventEmitter<Event | undefined> = new EventEmitter();
-    @Output() onOpen: EventEmitter<Event | undefined> = new EventEmitter();
+    @Output() closemodal: EventEmitter<Event | undefined> = new EventEmitter();
+    @Output() openmodal: EventEmitter<Event | undefined> = new EventEmitter();
     options: ModalOptions;
     @ViewChild('body') private readonly body: ElementRef;
     @ContentChild(ModalHeaderComponent) private readonly header: ModalHeaderComponent;
@@ -47,7 +47,7 @@ export class ModalComponent implements OnDestroy, OnInit {
 
     close(event?: Event) {
         this.cleanUp();
-        this.onClose.emit(event);
+        this.closemodal.emit(event);
         this.isOpen = false;
         if (this.isRouteModal()) {
             if (this.options.routeOnClose) {
@@ -68,7 +68,7 @@ export class ModalComponent implements OnDestroy, OnInit {
     }
 
     open(event?: Event) {
-        this.onOpen.emit(event);
+        this.openmodal.emit(event);
         this.isOpen = true;
         this.doOnOpen();
     }

tsconfig.json

@@ -22,6 +22,7 @@
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "example/**/*.ts"
   ]
 }