CODEWITHSUNDEEP
angulartypescript
Ranch Dubois
Ranch Dubois

Reputation: 55

Show element on button click

I want to simply hide show an element on button click which loads as hidden. I am trying to use [hidden] attribute with Angular. 

<div class="table-responsive" [hidden]="isHidden">
<table class="table">
<thead class="thead-light">
  <tr>
    <th style="text-align:center">{{blueFighter}}</th>
    <th style="text-align:center">Round</th>
    <th style="text-align:center">{{redFighter}}</th>
  </tr>
</thead>
<tbody class="tablerows">
..Div continues down here

</div>
<button (click)="createCardClick(hide)" class="btn btn-success">Create Scorecard</button>

Typescript: 

createCardClick(hide) {
hide.hidden = !hide.hidden;

}

Nothing is really happening so far, not really sure how the hidden attirbute works.

Upvotes: 0

Views: 87

Answers (1)

Ranch Dubois
Ranch Dubois

Reputation: 55

I have figured it out on my own. I used *ngIf instead.

TS:

 showHide: boolean;

 createCardClick() {
this.showHide = !this.showHide;
this.rounds = Array(this.selectedRounds).fill(0).map((x, i) => i);
}

HTML

<div class="table-responsive" *ngIf="showHide">

  <button (click)="createCardClick()" class="btn btn-success">Create Scorecard</button>

Upvotes: 1

Related Questions