Angular 2 - Automatisches Schließen Modal nach 5 Sekunden

Question

Ich habe ein Formular Modal, das bei der Einreichung, dann ändert sich das Formular zu einigen Erfolg Wortlaut.

Was ich nachher bin, ist, wenn der Erfolg Wortlaut für das Modal angezeigt wird, automatisch zu schließen (auch für Fanciness ausblenden), aber ich weiß nicht, wie es geht.

-Code ist unter

Modal HTML (Skeleton)

<form> 
    <md-toolbar> 
     <div>Section Header</div> 
     <span style="flex: auto;"></span> 
     <button *ngIf="initial" md-icon-button (click)="functionCall()"> 
      <md-icon>save</md-icon> 
     </button> 
     <button md-icon-button md-dialog-close> 
      <md-icon>close</md-icon> 
     </button> 
    </md-toolbar> 
    <md-dialog-content> 
     <md-input-container [hidden]="!initial"> 
      <input mdInput placeholder="Enter text" [(ngModel)]="fieldModel"> 
     </md-input-container> 
     <p [hidden]="initial">Success.</p> 
    </md-dialog-content> 
</form> 

Modal Komponente (Skeleton)

export class TestComponent implements OnInit { 
    fieldModel: string; 
    initial = true; 

    constructor() {} 
    functionCall() { 
     this.serviceCall.serviceName(this.fieldModel) 
      .subscribe(data => { 
       //On Success 
       this.initial = false; 
      } 
    } 
} 

Answer 1

Eine Möglichkeit, es zu tun ist, um die RxJS Methoden nutzen:

012 Dies wird die initial Flagge false, nachdem der Dienst Aufruf abgeschlossen ist, wait five seconds, setzen Sie ihn dann wieder auf true gesetzt

.

Wenn Sie ein Fade-In haben möchten, wäre eine einfache Option, CSS-Klassen zu verwenden, um die Deckkraft mit einem Übergang festzulegen. Sehen Sie sich alternativ die integrierte Animal-Unterstützung von Angular an.