CODEWITHSUNDEEP
htmlangular
user15365664
user15365664

Reputation:

How to subscribe unsubscribe in angular from one button click?

I have a button for subscribe/unsubscribe. In case of subscribtion it calls userSubscribtions() function but what i want is when the user clicks on unsubscibe after that. It should run the delSubscription function defined in my component. And selected tab is the tab which I am viewing on my front-end. Is there any way to do so? Below is my html code and I have those two functions in the component.

<button matRipple type="button" class="btn btn-outline-success my-sm-0 mx-2 d-flex shadow-none"
        (click)="userSubscribtions(selectedTab)" [disabled]="this.loading">
        <ng-container *ngIf="User.subscriptions.indexOf(selectedTab) == -1">
          <span class="material-icons">notifications</span>
          Subscribe
        </ng-container>
        <ng-container *ngIf="User.subscriptions.indexOf(selectedTab) != -1">
          <span class="material-icons">notifications_off</span>
          Unsubscribe
        </ng-container>
      </button>

Upvotes: 0

Views: 420

Answers (1)

Ritesh Waghela
Ritesh Waghela

Reputation: 3727

You need to have a container function that should decide what to call. Modify you html like this:

<button matRipple type="button" class="btn btn-outline-success my-sm-0 mx-2 d-flex shadow-none"
        (click)="handleSubscriptions(selectedTab, User.subscriptions.indexOf(selectedTab) == -1)" [disabled]="this.loading">
        <ng-container *ngIf="User.subscriptions.indexOf(selectedTab) == -1">
          <span class="material-icons">notifications</span>
          Subscribe
        </ng-container>
        <ng-container *ngIf="User.subscriptions.indexOf(selectedTab) != -1">
          <span class="material-icons">notifications_off</span>
          Unsubscribe
        </ng-container>
      </button>

And then in your component file:

handleSubscriptions(selectedTab: number, isSubscribe: boolean) {
    if(isSubscribe) {
      // Call userSubscribtions method
    } else {
      // call delSubscription method
    }
  }

Upvotes: 2

Related Questions