Timer for hidden Alerts of clarity

Question

I am trying hidde the alerts of clarity in 2-3 seconds but with this code t doesn't show , and I don't understand.

 import { Observable} from 'rxjs/Rx';

 public timerAlert: boolean = false;

 ngOnInit() {
   let timer =  Observable.timer(2000, 3000);
        timer.subscribe( () => {
           this.timerAlert = true; --> with this line My alert doesn't show.
        });

    }

Html

   <clr-alert  [(clrAlertClosed)]="timerAlert"  [clrAlertClosable]="false" [clrAlertType]="'alert-danger'" *ngIf="errorServer">
       <clr-alert-item>
           <span class="alert-text">
                 {{ this.myMessage.message }}
            </span>
        </clr-alert-item>
    </clr-alert>

[clrAlertClosable]="false" for hidde 'x' in Alert.
[(clrAlertClosed)]="timerAlert" with this, I should show or not the alert.

So you have an alert and when the page is loaded you dismiss them withing 5 seconds ? Is this what you are trying to do ? — madjaoue, Jul 09 '18 at 12:02
Show my alert, then 2-3seconds , hidde alert. but with that code, my alert doesn't show. — EduBw, Jul 09 '18 at 12:03
`Observable.timer(2000, 3000)` will wait 2seconds, then assign `true` to `timerAlert` each 3 seconds. Not sure I understand what this variable does `[clrAlertClosable]="false"`, but is it possible that a non closable alert won't be closed ? — madjaoue, Jul 09 '18 at 12:07
Is it possible that you try to interact with the document but you don't wait till it's loaded ? What happens if you replace `ngOnInit` with `ngAfterViewInit` ? — madjaoue, Jul 09 '18 at 12:53

score 0 · Answer 1 · answered Jul 09 '18 at 12:38

I can resolve this... 50%

 import { Observable } from 'rxjs/Rx';
  public timerAlert: boolean = false;

 ngOnInit() {
        let timer = Observable.timer(10, 8000);
        this.timerAlerts(timer);

    }

 private timerAlerts(timer) {
        timer.subscribe(() => {

            if (this.errorServer || this.confirmedServer) {
                this.timerAlert = true; // firstTrue
                this.timerAlert = false;
                this.errorServer = false;
                this.confirmedServer = false;
            }
        });
    }

The unique problem is ... If you do insert o modify quickly the time does not start, that is to say , if you modify something in 7 seconds the message confirmation only is 1second ...

html

 <clr-alert  [(clrAlertClosed)]="timerAlert"  [clrAlertClosable]="false" [clrAlertType]="'alert-danger'" *ngIf="errorServer">
       <clr-alert-item>
           <span class="alert-text">
                 {{ this.myMessage.message }}
            </span>
        </clr-alert-item>
    </clr-alert>

     <clr-alert  [(clrAlertClosed)]="timerAlert"  [clrAlertClosable]="false" [clrAlertType]="'alert-success'" *ngIf="confirmedServer">
         <clr-alert-item>
             <span class="alert-success">
                 {{ this.myMessage.message }}
             </span>
         </clr-alert-item>
    </clr-alert>

How Can I resolve this ?

Timer for hidden Alerts of clarity

1 Answers1