Search code examples
javascriptangularangular-ng-if

ngIf only for _this_ element, show childs anyway

I know the phrasing of my question might be a little weird, but here is what I want:

I have a div, that I want to wrap around an input, but only when divIsNeeded. I always want to show the input field.

going through the documentation, I couldn't find anything. Is there any way to do it?

<!-- this should only be there if I actually need it, otherwise I don't want this div -->
<div *ngIf="needsInputGroup" class="input-group">
  <!-- this should always be visible -->
  <input type="text" placeholder="bla" />
</div>
Solution 
  • <div *ngIf="needsInputGroup" class="input-group">
  <input type="text" placeholder="bla" />
</div>
<input *ngIf="!needsInputGroup" type="text" placeholder="bla" />

    You can create a custom component that does that for you and reuse it everywhere. I don't think there is another way. But a custom component adds another element around the content