I am new to Angular.

I have an app with two variables that indicate the status of a financial transaction. 
The variables are: `tab1TrxMessage` that stores any **messages** and `tab1TrxStatus` that indicate a transactions status either being: **Failed**, **is successful** or **is pending**. When a transaction has failed, I would like the user to recieve a **swal** alert/notification similar to this:

```
swal({
       title:'Error!',
       text: 'Warning... Transaction failed!',
       type: 'error',
       confirmButtonText: 'Ok',
       confirmButtonColor: '#ff754f'
     });

```

Currently, my code looks like this:

**../component.html**

```
<div class="sign-btn text-center">
  <a class="btn btn-lg text-white">
    <span *ngIf="tab1TrxMessage">{{tab1TrxMessage}}</span>
    <span *ngIf="!tab1TrxMessage && tab1TrxStatus != 'Success'">Failed</span>
    <span *ngIf="transactionFailed()">Failed</span>
  </a>
</div>

```

With specific attention on the `transactionFailed()` function... 

**../component.ts**

```
public transactionFailed() {

    if(this.tab1TrxMessage == 'Failed: Cancelled by User' && this.tab1TrxStatus != 'Success') {

        console.log("You are in transactionFailed!")

        swal({
           title:'Error!',
           text: 'Warning... Transaction failed!',
           type: 'error',
           confirmButtonText: 'Ok',
           confirmButtonColor: '#ff754f'
         });

         return true;
    }

    return false;
}

```

The code above, when a transaction fails yields: `You are in transactionFailed!` multiples times in the browser console...

[![console print out](https://i.stack.imgur.com/Qs7Od.png)](https://i.stack.imgur.com/Qs7Od.png)

...and so does the **swal** alert with `Warning... Transaction failed!` repeatedly popping up. 

Is there a better way to resolve this so that the **swal** alert only displays **ONCE** per failed transaction?

Looking forward to your help.