md-grid-tile with ng-if occupy twinkle - angular-material

Question

i want use md-gid-tile with ng-if or ng-show
but ng-show use occupy the space. #6597
So i used the ng-if but it occupied twinkle
here simple pan.
when several times click twinkle button, you can see the twinkle Word bunch on the button below
I would like to remove the twinkle Word bunch
:( help me...

Answer 1

There does appear to be a problem with ng-if. When clicking rapidly the words sometime appear bunched up under the button. This doesn't seem to be the case with ng-show. I have removed the ng-if from each md-grid-tile and placed a ng-show in the md-grid-list and moved the button out of the md-grid-list. The bunched up words no longer appear under the button and the md-grid-list only occupies space when val is true as can be seen by the position of the blue square.
CodePen
Markup
<div>
<md-button class="md-primary md-raised" ng-click="toggle()">twinkle</md-button>
</div>
<md-grid-list style="margin=10px;"md-cols="4" md-row-height="16:3" ng-show=val>
<md-grid-tile>
<p>TwinkleAppTwinkleAppTwinkleApp111</p>
</md-grid-tile>
<md-grid-tile>
<p>TwinkleAppTwinkleAppTwinkleApp2</p>
</md-grid-tile>
<md-grid-tile>
<p>TwinkleAppTwinkleAppTwinkleApp3</p>
</md-grid-tile>
<md-grid-tile>
<p>TwinkleAppTwinkleAppTwinkleApp4</p>
</md-grid-tile>
<md-grid-tile>
<p>TwinkleAppTwinkleAppTwinkleApp5</p>
</md-grid-tile>
<md-grid-tile>
<p>TwinkleAppTwinkleAppTwinkleApp6</p>
</md-grid-tile>
</md-grid-list>
<div style="background:blue; width:100px; height:100px; margin-top:20px;">