CODEWITHSUNDEEP
javascriptangulartypescript
Sachin Muthumala
Sachin Muthumala

Reputation: 765

How to show/hide buttons in Angular

I want to show "Disapprove" button when button state is "approve" and "Approve" button to "pending" state. I have pass the values correctly but both buttons shows always.

This is my .ts file

    export class NotificationComponent implements OnInit {

      notices: notification[] = [];
      public approve_show: boolean = false;
      public disapprove_show: boolean = false;

      constructor(
        private http: HttpClient,
        private router: Router,
      ) { }

      ngOnInit() {

    var url = "http://localhost:3000/notification/view";

    this.http.get<any>(url).subscribe(res => {
      this.notices = res;
      var i = 0;

      for (var prop in res) {
        if (res.hasOwnProperty(prop)) {
          // console.log(res[i].state)          
          if (res[i].state == 'Approved') {
            console.log("approved")
            this.disapprove_show = true
          }
          else {
            this.approve_show = true
          }
          i++;
        }
      }

    }, (err) => {
      console.log(err);
    });
  }
}

This is my html code

<button *ngIf="approve_show" mat-raised-button class="approve_btn">Approve</button>
<button *ngIf="disapprove_show"  mat-raised-button color="warn" style="width:100px;">Disapprove</button>

Upvotes: 4

Views: 799

Answers (3)

C Ekanayake
C Ekanayake

Reputation: 85

since your using this for a list use the following. <button *ngIf="res.state=='Approved'" mat-raised-button color="warn" style="width:100px;">

The issue is that your using a global variable for the buttons.

Upvotes: 2

vijay sahu
vijay sahu

Reputation: 815

    if (res[i].state == 'Approved') { 
console.log("approved") 
this.disapprove_show = true 
this.approve_show = false
} else {
this.approve_show = true 
this.disapprove_show = false
}

As per the requirement it seems like only one button will be visible at a time...

Please let me know if I am wrong here...

Upvotes: 1

JackyShows
JackyShows

Reputation: 191

Ehy, your code is fine. You should fix the problem adding this.approve_show = false after this.disapprove_show = true and this.disapprove_show = false after this.approve_show = true.

The problem was that both the variables were true at the same time.

Upvotes: 3

Related Questions