AngularJs md-grid-tile behind another md-grid-tile

user_4751522 0
Viewed 61

I want to do a ng-show/hide of a <md-grid-tile> with another. Because the <md-grid-list> height is calculated before, during a 'hide' of a grid-tile I'm left with empty gaps. How can I put the grid-tile underneath the other grid-tile so that I'll have no gaps in my grid-list ? Example:

<md-grid-list>
  <md-grid-tile>
    //content
  </md-grid-tile>
  <md-grid-tile>
    //content to hide if condition
  </md-grid-tle>
  <md-grid-tile>
    //content to show if condition
 </md-grid-tile>
  <md-grid-tile>
    //content
  </md-grid-tile>
</md-grid-list>
angular-material angularjs
1 Answers

You can make use of ng-if instead of using ng-show/hide.

https://docs.angularjs.org/api/ng/directive/ngIf

A false value of ng-if will remove completely the md-grid-tile from the DOM. ng-show makes use of the display css property instead of being removed from the DOM.

Some examples of use where falsyExpresion represent a custom expression to be defined:

<md-grid-tile ng-if="falsyExpression">
//content
</md-grid-tile>

<md-grid-tile ng-if="false">
//content
</md-grid-tile>
user_50980810
Related