I have a specific CLASS called section that I want to apply to a DIV for rendering. Surprisingly, it functions as expected.
<div *ngIf="decoded; then coordinates"></div>
<ng-template #coordinates>
<div class="section">...</div>
</ng-template>
Attempting to move the class assignment to the DIV containing the directive did not yield the desired result.
<div *ngIf="decoded; then coordinates" class="section"></div>
<ng-template #coordinates>
<div>...</div>
</ng-template>
The entire outer DIV disappears and gets replaced by the contents of the template. This issue is bothersome because it forces me to include an extra DIV around everything in my template when multiple components are involved. (Additionally, it strikes me as strange that we can't preserve any properties of the tag used with *ngIf, and instead, we can use any random one, while it works differently for *ngFor.)
<div *ngIf="decoded; then coordinates"></div>
<ng-template #coordinates>
<div class="section">
<div>...</div>
<span>...</span>
<bzz>...</bzz>
</div>
</ng-template>
My attempt to trick the browser by setting the class on the template failed since the template isn't actually rendered in the DOM as intended.
<div *ngIf="decoded; then coordinates"></div>
<ng-template #coordinates class="section">
<div...</div>
</ng-template>
Is there a way to ensure that the DIV with the conditional directive maintains its class when rendered based on the template's contents?