how to hide Html table in angular4

Question

Actually I'm new in angular 4.I have created a table in angular 4 web api .I want like this - when I press the button(more details) show tables headings.but here the tables heading are not hidden .always show the elements like this

i want to show the table heading and details only cliking the more details button

here is my html

     <div class="col-md-6 col-sm-6 col-xs-12">
         <div class="table-responsive">
             <table class="table table-bordered count-Table table-responsive">
                 <thead style="background-color: #859391;color: white;">
                     <tr>
                         <th> Godowns</th>
                         <th> Quantity</th>
                     </tr>
                 </thead>
                 <tbody>
                     <ng-container *ngFor="let godown of godowns;">
                         <ng-container *ngIf="'Godown'==godown.Location">
                             <tr>                                                                    
                                 <td style="padding:0px;"><div class="col-md-12 custom-td">{{godown.LocationName}}</div>  </td>
                                 <td style="padding:0px;"><div class="col-md-12 custom-td">{{godown.Stock}} </span></div>  </td>
                             </tr>
                         </ng-container>
                     </ng-container>
                 </tbody>
             </table>
         </div>
     </div>

this is my ts file

 moredetails() {
        this._enqService.FetchGodowndetails(this.itemID, this.userid)
            .subscribe(itemData =>
                this.godowns = itemData,
                error => {
                    console.error(error);

                });
    }

Answer 1

you can achieve by using *ngIf on main div.

 <div class="col-md-6 col-sm-6 col-xs-12">
     <div class="table-responsive">
         <table class="table table-bordered count-Table table-responsive" *ngIf="godowns?.length">
             <thead style="background-color: #859391;color: white;">
                 <tr>
                     <th> Godowns</th>
                     <th> Quantity</th>
                 </tr>
             </thead>
             <tbody>

                         <tr *ngFor="let godown of godowns;">                                                                    
                             <td style="padding:0px;"><div class="col-md-12 custom-td">{{godown.LocationName}}</div>  </td>
                             <td style="padding:0px;"><div class="col-md-12 custom-td">{{godown.Stock}}</div>  </td>
                         </tr>
             </tbody>
         </table>
     </div>
 </div>

or you can set a boolean variable and use in *ngIf which will be set as true when your api fetch data from server successfully.

Answer 2

*ngIf injects or removed dom elements based on what it evaluates to which is high on resource.

Instead, try to use class to either show or hide the table.

For example, the table by default is hidden and define a class as “active” which shows the table if added. Control the class with the help of a property isActive

[class.active]=“isActive”

On click of the button, you can toggle the property as

(click)=“isActive = !isActive”