Angular template, remove div and white space (div is removed, but not white space)

Question

Edit: After more thoughts, i am removing the unnecessary element within the TS file and making my template file do less work.

I've looked at a few stack o/f threads about removing a div and the white space that it takes. Such as this one

The div is hidden, however the white space is still there on my template.

code

<div *ngIf="array[i] !== null; else hideDivAndRemoveWhiteSpace">
  //business logic
</div>
<ng-template #hideDivAndRemoveWhiteSpace>
  //this template should be hidden
  <div class="hide-div"></div>
</ng-template>

css

.hide-div {
  display: none;
}

Are you sure the values you want to exclude are actually `null` specifically (and not, for instance, `undefined`)? `*ngIf` should be sufficient on its own for this, you shouldn't need to substitute a blank template. — John Montgomery, Mar 28 '19 at 20:43
they are null, like i said the values are hidden (meaning the else portion of my if logic runs) but white space remains. — Generaldeep, Mar 28 '19 at 20:55
`*ngIf` removes the element entirely if it's false, so if that's failing and you're sure the data is correct the problem might be higher up in the DOM hierarchy. Can you add more of the surrounding HTML? — John Montgomery, Mar 28 '19 at 22:29
@john, yes the data is correct. I think the issue is ng-template, it still puts the removed element on the DOM. As someone mentioned below, use ng-container instread. However, for now, I've resolved my issue by removing the element in my TS file and make my template do less work. — Generaldeep, Apr 01 '19 at 18:24

score 1 · Answer 1 · answered Mar 28 '19 at 20:46

you can use <ng-container> </ng-container>

See Angular's documentation about ng-container how Angular doesn't add it to the DOM

https://angular.io/guide/structural-directives#ng-container-to-the-rescue

Also, see this answer:

<ng-container> vs <template>

score 0 · Answer 2 · answered Mar 28 '19 at 20:36

0

Which whitespace are tlaking about ?

In your code, why wouldn't you just do:

<div *ngIf="array['data']">
    //business logic
</div>

without the "ele" and the "ng-template"

answered Mar 28 '19 at 20:36

David ROSEY

1,414
1
7
20

the array has question/answers. right now I am rendering all the question even if they have no answer. The goal is to render only questions with answers and hide the questions w/o answer. What you've suggested is how my template is rendering right now. – Generaldeep Mar 28 '19 at 20:39
Then this is what you have to check in your ngIf:
– David ROSEY Mar 28 '19 at 20:50

Muhammed Albarmavi · Answer 3 · 2019-03-28T21:03:27.463

you may add this option to the component decorator preserveWhitespaces: false

this will remove the elemnt from the dom

<div *ngIf="false" >
..
</div>

false mean any falsy value

add class base on condtions

style.css

.d-none {
 display:none
}

template

<div [ngClass]="{'d-none': true}">
...
</div>

or you can use ng-container so you don't need to wrap you business logic with any div elemnt

<ng-container *ngIf="condition">
 //business logic
</ng-container>

if conditiontrue the container business logic elements will be visible if it false nothing will render to the dom

Angular template, remove div and white space (div is removed, but not white space)

3 Answers3