CODEWITHSUNDEEP
angular
user13976004
user13976004

Reputation:

How to use improve ng-container condition in Angular?

I have a BlockComponent:

<div class="document-block" *ngIf="block.type === fielType.Block">
    <ng-container *ngIf="block.tag === 'ADRESATS'">
            <app-adresat-list [parent]="block" [adresats]="block.children">
                <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
            </app-adresat-list>
        </ng-container>

        <ng-container *ngIf="block.tag === 'ADRESAT'">
            <app-adresat [block]="block">
                <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
            </app-adresat>
        </ng-container>

        <!-- ATTENTION Below I use else ng-container -->

         <ng-container
         <ng-container
        *ngIf="
            block.tag != 'ADRESATS' &&
            block.tag != 'ADRESAT' &&
        ">
        <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
    </ng-container>
</div>

Inside this block I check type and apply the specific component. Each components contains the nested blocks. To render children blocks in current I recall BlockComponent template using template #children:

<ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>.

Reference is:

<ng-template #children let-block="block">
    <ng-container *ngIf="block?.children">
        <ng-container *ngFor="let child of block.children">
            <ng-container *ngIf="child.type === fielType.Field && isFieldVisible(child)">
                <app-field
                    [ismultisignator]="properties?.ismultisignator"
                    [fieldDefinition]="child"
                    (onSelected)="onFieldSelected($event)"
                ></app-field>
            </ng-container>
            <ng-container *ngIf="child.type === fielType.Table">
                <app-postaddress *ngIf="child.tag === 'TAG_ADDR'" [element]="child"></app-postaddress>
            </ng-container>
            <app-block [block]="child" [parent]="block" [show]="true"></app-block>
        </ng-container>
    </ng-container>
</ng-template>

Problem is that I forced to do another ng-container like as ngif\else to render items which has not specific type:

*ngIf="
 block.tag != 'ADRESATS' &&
 block.tag != 'ADRESAT' &&
"

This part of code you can see above under comment: <!-- ATTENTION Below I use else ng-container -->.

How to improve rendering of nested components?

Upvotes: 1

Views: 1019

Answers (1)

bryan60
bryan60

Reputation: 29325

looks like a case for ngSwitch, and you can apply structural directives straight to the elements, you don't need the ng-container...

<div class="document-block" 
    *ngIf="block.type === fielType.Block" 
    [ngSwitch]="block.tag">
        <app-adresat-list *ngSwitchCase="'ADRESATS'" [parent]="block" [adresats]="block.children">
            <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
        </app-adresat-list>

        <app-adresat *ngSwitchCase="'ADRESAT'" [block]="block">
            <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
        </app-adresat>


       <ng-container *ngSwitchDefault>
         <ng-container *ngTemplateOutlet="children; context: { block: block }"> </ng-container>
      </ng-container>
</div>

Upvotes: 1

Related Questions