CODEWITHSUNDEEP
angularfunctionangular-ng-if
Rajeswari
Rajeswari

Reputation: 71

Call different functions based on *ngIf in angular 4

I am new to Angular 4. Am trying to delete a group created in DB with webservice. If the group holds any users, then I have to give a warning message to user. If the group is empty, I can delete it. For warning message , I have used bootstrap modal and for deleting am having Angular function(deleteGroup(group)) which will call web service in turn to delete the group.

Based on the usercount in that group, I tried to use *ngIf, but failed. Can someone help me to sort it out?

Function flow: 

1) Groups are listed in drop-down and the user chooses the one
2)Clicking on delete button, calls the getUsers() funtion to check
the availability of users in that group (group members count is
assidgned to usersCount variable )
3) Based on the usersCount, next step has to be done
   a) usersCount == 0 , => delete the group   
   b) usersCount !=0 , => pop-up warning message

HTML code

<button type="button" class="btn btn-primary" 
     (click)="getUsers(optionSelected)" >Delete</button> //getuser function gets  the number of users in that group
     <div *ngIf="usersCount ==0 ">deleteGroup(optionSelected)</div> //usercount -> number of users
</button>

Typescript code:

getUsers(value): void {
    this.output = [];
    this.textValue.getUsers(value)
        .subscribe(res => {
                this.output = res;
                this.usersCount = this.output.length;
                console.log ("Number of users:", this.usersCount);
         })
}

Upvotes: 0

Views: 628

Answers (1)

user4676340
user4676340

Reputation:

That's usually a bad idea.

HTML templates are being parsed & checked several times during the application lifecycle.

If you write what you did, your function will be called 2, 3, 4, 5, 10 times and will result in erratic behaviors.

Instead, you should delete the group on request : if the user clicks, navigate ... The best would to be to post all of you code and explain your end goal. I'll make an edit to my answer once you've done it.

EDIT

From your comment, you should have a dropdown with a delete button, and this button should be like this :

<button *ngIf="!usercount" (click)="deleteGroup(optionSelected)">Delete group</button>

(Based on the code of your own button)

Now, the user only has to click on this button, and the function will be called, deleting the user group. The button will not be shown if the user count is falsy (meaning "equal to zero" in your case), meaning the user can't click on it.

Upvotes: 1

Related Questions