0

I am not able to hide the div row in angular flex layout in angular material 7. Please find my below code.

<div fxLayout="column" class="dashboard-fx">
  <div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="5px" 
  class="dashboard-pie">
  some code here 
  </div>
    <div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="5px" 
  [ngStyle]="{display: (subsectionData.length == 0) ? 'none' : 'block'}">
  some code here
  </div>
    <div fxLayout="row" class="list-section" fxLayoutAlign="start start" 
  fxLayoutGap="5px" [ngStyle]="{display: (vsectionData.length == 0)? 'none':'block'}">
  some code here
  </div>
</div>

In my case *ngIf is not suggestible because if i use ngIf element will be removed from the

Santhosh
  • 33
  • 3

1 Answers1

0

fxShow or fxHide ?

<div fxLayout="column" class="dashboard-fx">
  <div
    fxLayout="row"
    fxLayoutAlign="start start"
    fxLayoutGap="5px"
    class="dashboard-pie"
  >
    some code here
  </div>
  <div
    fxLayout="row"
    fxLayoutAlign="start start"
    fxLayoutGap="5px"
    [fxShow]="subsectionData.length"
  >
    some code here
  </div>
  <div
    fxLayout="row"
    class="list-section"
    fxLayoutAlign="start start"
    fxLayoutGap="5px"
    [fxShow]="vsectionData.length"
  >
    some code here
  </div>
</div>
Lashan Fernando
  • 1,187
  • 1
  • 7
  • 21