How to show/hide buttons in Angular

Question

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>

Debug your code. You loop multiple times and execute both parts of the if/else on different iterations of the loop. Use break points to see what actually happens. — Igor
– Igor, Commented Sep 23, 2019 at 17:43
what is the object returned from GET call? For some of the properties of the response object the approve_show is set to true and for others disapprove_show is set to true. — Nithin Kumar Biliya
– Nithin Kumar Biliya, Commented Sep 23, 2019 at 17:44

JackyShows · Accepted Answer · 2019-09-23 18:46:03Z

3

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.

answered Sep 23, 2019 at 18:46

JackyShows

1912 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

C Ekanayake · Accepted Answer · 2019-09-24 04:40:13Z

2

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.

answered Sep 24, 2019 at 4:40

C Ekanayake

855 bronze badges

Comments

vijay sahu · Accepted Answer · 2019-09-23 19:17:01Z

1

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

answered Sep 23, 2019 at 19:17

vijay sahu

8431 gold badge8 silver badges32 bronze badges

1 Comment

Sachin Muthumala Over a year ago

I have use this code also. But this is not working. Thank you anyway.

Collectives™ on Stack Overflow

How to show/hide buttons in Angular

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related