Material: input-container: input with icon and ng-if is broken

[tihomir-kit]

Hi,

This is related to #6913.

I have a directive called dt-input-password, and the template looks like this:

<md-input-container class="md-block">
  <md-icon class="mdi input-icon" ng-class="icon" ng-if="icon"></md-icon>
  <input ng-model="model[propertyName]"
         type="password"
         data-placeholder="{{label}}">
  <div ng-message="validationMessage" class="input-error-message">
    {{validationMessage}}
  </div>
</md-input-container>

which can be called like this

<dt-input-password model="RegisterVM.credentials" property-name="password" label="Password (required)" icon="mdi-key-variant"></dt-input-password>

What I want to accomplish with this among other things is to display the icon if it's passed into the directive, if not - I don't want to render it.

This is what happens:

I tried using ng-if on md-input-container together with label, icon, model and even model[propertyName] but I have the same issue no matter what.

If ng-show is used on md-icon instead of ng-if I get the same result but kind of in reverse - if there is an icon it renders normally, if the icon property is not passed to the directive, I get some empty space on the left side of the input element:

Using angular-material v1.0.9, and angular v1.5.7.

Thanks.

[clshortfuse]

This happens because md-input-container compiles the styling upon creation and does not expect the destruction or introduction of elements after creation.

I would suggest handling toggling md-icon-left manually since you'll be manipulating this. I've made a codepen to show you how this can be done here: http://codepen.io/shortfuse/pen/zBwavz

The internal fix would involve adding a MutationObserver to each md-input-container element, which I believe could be too expensive to force onto users.

[tihomir-kit]

Awesome, good enough. Thanks!

[JolissonVieira]

Same wrong behavior is back at first rendering.
Using angular-material v1.1.10, and angular v1.6.10 .

https://codepen.io/anon/pen/LBavjV

[valepu]

It's worth mentioning that the ng-class workaround doesn't work anymore

[Splaktar]

@JolissonVieira thank you for pointing that out. Please track/report any updates/issues related to this in https://github.com/angular/material/issues/9529.