fix(modals): fixed modals fade in animation

fixes #687

components/modal/modal-backdrop.component.ts

@@ -1,5 +1,4 @@
-import {Component, ElementRef} from '@angular/core';
-import {NgClass} from '@angular/common';
+import {Component, ElementRef, Renderer} from '@angular/core';
 import {ClassName} from './modal-options.class';
 
 export class ModalBackdropOptions {
@@ -12,20 +11,37 @@ export class ModalBackdropOptions {
 
 @Component({
  selector: 'bs-modal-backdrop',
- directives: [NgClass],
- template: `
-<div class="${ClassName.BACKDROP}"
- [class.${ClassName.IN}]="isShown"
- [class.${ClassName.FADE}]="isAnimated"></div>`
+ template: '',
+ host: {'class': `${ClassName.BACKDROP}`}
 })
 export class ModalBackdropComponent {
- public isAnimated:boolean = true;
- public isShown:boolean = false;
+ public get isAnimated():boolean{
+ return this._isAnimated;
+ }
+
+ public set isAnimated(value:boolean) {
+ this._isAnimated = value;
+ this.renderer.setElementClass(this.element.nativeElement, `${ClassName.FADE}`, value);
+ }
+
+ public get isShown():boolean{
+ return this._isShown;
+ }
+
+ public set isShown(value:boolean) {
+ this._isShown = value;
+ this.renderer.setElementClass(this.element.nativeElement, `${ClassName.IN}`, value);
+ }
 
  public element:ElementRef;
+ public renderer: Renderer;
+
+ private _isAnimated:boolean;
+ private _isShown:boolean = false;
 
- public constructor(options:ModalBackdropOptions, element:ElementRef) {
- this.isAnimated = options.animate;
+ public constructor(options:ModalBackdropOptions, element:ElementRef, renderer: Renderer) {
  this.element = element;
+ this.renderer = renderer;
+ this.isAnimated = options.animate !== false;
  }
 }

tslint.json

@@ -2,6 +2,7 @@
  "extends": "tslint-config-valorsoft",
  "rulesDirectory": "./node_modules/codelyzer",
  "rules": {
+ "use-host-property-decorator": false,
  "component-selector-name": [false, ""],
  "no-constructor-vars": false,
  "ordered-imports": false,