title: matdialog appears empty when trying to pop it up at a certain time
body: <p>thanks in advance for your response. I am implementing an inactivity log out with three steps depending on the time of inactivity in my home component:</p>
  <p>1- time starts at 15 seconds. (this works fine)
  2- after 10 seconds of inactivity, the modal pops up--&gt; isItTimeToShowPopUp() method (this is the only step where I have trouble)
  3 - when the countdown is on one second, the session expires. (this works fine)</p>
  <p>I'm having trouble when popping up a matdialog modal as it has a random behavior. The dialog component injected, appears empty, first, and then it appears with the correct message, after one second. Sometimes even it doesn't show the complete message, it appears empty. This is the only part that doesn't work correctly, and I have no idea why. Also, I'd appreciate any ideas on how could I make this work without having to write the same code in all the components of my app.</p>
  <p>Here's my code:</p>
  <p>dialogcomponent.html:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;h1 matDialogTitle&gt;Confirm&lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
      &lt;!-- {{confirmMessage}} --&gt;
  
      &lt;p [innerHTML]=&quot;confirmMessage&quot;&gt;&lt;/p&gt;
  
  &lt;/div&gt;
  &lt;div mat-dialog-actions class=&quot;pt-24&quot;&gt;
      &lt;button mat-raised-button class=&quot;mat-accent mr-16&quot; (click)=&quot;dialogRef.close(true)&quot;&gt;Confirm&lt;/button&gt;
      &lt;button mat-button (click)=&quot;dialogRef.close(false)&quot;&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>dialogcomponent.ts:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { MatDialogRef } from '@angular/material';
  
  @Component({
      selector: 'fuse-confirm-dialog',
      templateUrl: './confirm-dialog.component.html',
      styleUrls: ['./confirm-dialog.component.scss']
  })
  export class FuseConfirmDialogComponent {
      public confirmMessage: string;
  
      /**
       * Constructor
       *
       * @param {MatDialogRef&lt;FuseConfirmDialogComponent&gt;} dialogRef
       */
      constructor(
          public dialogRef: MatDialogRef&lt;FuseConfirmDialogComponent&gt;
      ) {
  
      }
  
  }
  </code></pre>
  <p>This component is injected in my home.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, NgZone, ChangeDetectorRef } from '@angular/core';
  import { ProvisionedService } from '../../devices/provisioned-list/provisioned.service';
  import { UsersService } from '../../users/users.service';
  import { fromEvent, merge, interval, Observable, of, Subscription } from 'rxjs';
  import { switchMap, take, skipWhile, takeLast, skipUntil, tap } from 'rxjs/operators';
  import { FuseConfirmDialogComponent } from &quot;@fuse/components/confirm-dialog/confirm-dialog.component&quot;;
  import { MatDialogRef, MatDialog } from &quot;@angular/material&quot;;
  import { StorageService } from '../../common/services/storage.service';
  import { AuthService } from '../../common/services/auth.service';
  import { Router } from '@angular/router';
  
  
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  export class HomeComponent implements OnInit {
  
    deviceList: DeviceModel[];
    devicesAlive: any;
    vanillaDevices: DeviceModel[];
    getDevicesInfoLoop: any;
    isAlive: any;
    invitationList: InvitationModel[];
    deviceId: any
  
    inactivityTime: number = 15;
  
    timeLapsedSinceInactivity: number = 0;
    seconds: number = this.padZero(0);
    subscription: Subscription;
    observeable$: Observable&lt;any&gt;;
    mergedObservable$: Observable&lt;any&gt;;
    event: Event;
    confirmDialogRef: MatDialogRef&lt;FuseConfirmDialogComponent&gt;;
  
    public inactivityTimerEvent: Array&lt;any&gt;[] = [[document, 'click'], [document, 'wheel'], [document, 'scroll'], [document, 'mousemove'],
     [document, 'keyup'], [window, 'resize'], [window, 'scroll'], [window, 'mousemove']];
  
  
  
    constructor(private provisionedService: ProvisionedService, private VanillaService: VanillaService, 
      private UsersService: UsersService, public _ngZone: NgZone,
      public _cd: ChangeDetectorRef,
      public matDialog: MatDialog,
      public storageService: StorageService,
      private authService: AuthService,
      private router: Router) {
    }
  
    ngOnInit() {
    
      let observableArray$: Observable&lt;any&gt;[] = [];
      
      this.inactivityTimerEvent.forEach(x =&gt; {
        observableArray$.push(fromEvent(x[0], x[1]))
      })
      this.mergedObservable$ = merge(...observableArray$);
  
      this.startTimer(event);
     
  
    }
  
    public createObserable(): void {
      this._ngZone.runOutsideAngular(() =&gt; {
  
        this.observeable$ = this.mergedObservable$
        .pipe(
          switchMap(ev =&gt; interval(1000).pipe(take      (this.inactivityTime))),
  
          tap(value =&gt; this.isItTimeToShowPopUp(value)),
  
          skipWhile((x) =&gt; {
            this.timeLapsedSinceInactivity = x;
            return x != this.inactivityTime - 1
          })
        );
  
        this.subscribeObservable();
      })
  
    }
  
    public isItTimeToShowPopUp(val: number) {
      let timeLeftForInactive = this.inactivityTime - val;
      if (timeLeftForInactive &lt;= 15) {
  
        this.timeLapsedSinceInactivity = timeLeftForInactive;
        this.seconds = this.padZero(timeLeftForInactive % 15);
        this._cd.detectChanges();
        console.log(timeLeftForInactive);
      }
  
      if(timeLeftForInactive === 10) {
        this.confirmDialogRef = this.matDialog.open(FuseConfirmDialogComponent, {
          disableClose: false
        });
    
        this.confirmDialogRef.componentInstance.confirmMessage = &quot;Your session is about to expire, please, press confirm to continue &quot;;
    
        this.confirmDialogRef.afterClosed()
          .subscribe(result =&gt; {
            if (result === true) {
             
              this.startTimer(event)
              this.unsubscribeObservable();
            }
  
            if (result === false) {
              this.authService.removeUserData();
              this.storageService.removelocalStorageData();
              this.router.navigate(['/login']);
            }
          });
      }
      
      if(timeLeftForInactive === 1) {
        this.authService.removeUserData();
        this.storageService.removelocalStorageData();
        this.router.navigate(['/login']);
  
      }
      }
  
  
  
    public subscribeObservable() {
      this.subscription = this.observeable$.subscribe((x) =&gt; {
        console.log(`subscribed for ${x + 1} sec`);
        this.unsubscribeObservable()
      })
    }
    public padZero(digit: any) {
      return digit &lt;= 9 ? '0' + digit : digit;
    }
  
    public unsubscribeObservable() {
      console.log('  unsubscriebd')
      this.subscription.unsubscribe();
    }
  
    public startTimer($event) {
      this.createObserable();
      console.log('subscription started');
    }
    public stopTimer(event) {
      if (this.subscription &amp;&amp; !this.subscription.closed) {
        this.seconds = this.padZero(0);
        this.unsubscribeObservable();
      }
    }
  }
  </code></pre>