Angular2: Как постепенно исчезнуть окно сообщения, которое отображается на клике

Question

Может быть глупый вопрос, но я новичок в angular и все еще учусь.

Я показываю сообщение об успешном нажатии кнопки, которое мне нужно исчезнуть через несколько секунд.

<div *ngIf="hideSharedLinkCopyMessage" class="alert alert-success box-msg " role="alert">
    <strong>Link Generated!</strong> Your sharable link is copied to clipboard.
</div>

Теперь я использую классы alert-success и box-msg. Я также пытался добавить класс fadeOut, но это не сработало.

hideSharedLinkCopyMessage устанавливается на true при нажатии кнопки. Первоначально он установлен на false Как я могу исчезнуть это сообщение через несколько секунд?

Answer 1

Добавить функцию тайм-аута после установки true hideSharedLinkCopyMessage. В следующем примере ссылка исчезнет через 2 секунды;

FadeOutLink() {
    setTimeout( () => {
          this.hideSharedLinkCopyMessage = false;
        }, 2000);
   }

Другой вариант и политик - использовать Angular Materials и импортировать компонент Snackbar . Это действительно простой в использовании, и вы можете настроить его, как вы хотите.

Answer 2

---

Успешное сообщение исчезнет через 4 секунды в angular7

  export class UnsubscribeComponent implements OnInit {
  hideSuccessMessage = false;

  FadeOutSuccessMsg() {
    setTimeout( () => {
           this.hideSuccessMessage = true;
        }, 4000);
   }

   component.html -
   ------------------
          <div  *ngIf="!hideSuccessMessage">
            <div class="col-12">
              <p class="alert alert-success">
                  <strong [ngClass] ="FadeOutSuccessMsg()" >You are successfully 
                  unsubscribe from this email service.</strong>                 
              </p>
            </div>
          </div>

Answer 3

Обычное затухание не будет работать с * ngif, потому что с *ngif элемент напрямую удаляется из DOM.

Вам нужно использовать ngClass до add/remove класс (fadeout), который будет иметь эффект fade out, а затем использовать тайм-аут, чтобы установить переменную hideSharedLinkCopyMessage в true, и элемент будет удален из DOM .

Контроллер:

<your method to remove alert> () {
    // add class fadeOut here
    setTimeout( () => {
      this.hideSharedLinkCopyMessage = false;
    }, 3000);      
}