Might be a silly question but am new to angular and still learning.

Am showing a success message on button click which I need to fade out after few seconds.

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

Now, am using alert-success and box-msg classes. I tried to add fadeOut class as well but that didn't worked.

hideSharedLinkCopyMessage is set to true when the button in clicked. Initially it is set to false How can I fade this message out after few seconds?

Might be a silly question but am new to angular and still learning.

Am showing a success message on button click which I need to fade out after few seconds.

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

Now, am using alert-success and box-msg classes. I tried to add fadeOut class as well but that didn't worked.

hideSharedLinkCopyMessage is set to true when the button in clicked. Initially it is set to false How can I fade this message out after few seconds?

• javascript
• angular
• fadeout

Share Improve this question Follow edited May 10, 2018 at 8:07 Manish Balodia 1,87722 gold badges2424 silver badges3838 bronze badges asked May 10, 2018 at 6:53 roger_thatroger_that 9,8011919 gold badges7070 silver badges110110 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Add a timeout function after setting true hideSharedLinkCopyMessage. In the next example the link will fade out after 2 seconds;

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

An other option and politer is to use Angular Materials and import the Snackbar ponent. Is really easy to use and you can customize it as you want.

Normal Fade out will not work with *ngif because with *ngif, the element is directly removed from the DOM.

You need to use ngClass to add/remove a class(fadeout) which will have the fade out effect and then use a timeout to turn your variable hideSharedLinkCopyMessage to true and element will be removed from DOM.

Controller:

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

---

Success Message will disappear after 4 sec in angular7

  export class UnsubscribeComponent implements OnInit {
  hideSuccessMessage = false;

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

   ponent.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>