Geek Answers Handbook

Angular4 ng-content is created when ngIf is false

I have a problem with a new conclusion ng-content.

Let's say I have a component my-componentthat in its function ngOnInit()performs some heavy operation at boot (currently just a console.log()).

I have a wrapper that displays content through a transition ( my-wrapper.component.html).

<ng-content></ng-content>

If I set the environment this way, the log statement does not show:

<my-wrapper *ngIf="false">
    <my-component></my-component>
</my-wrapper>

I assume that the component is my-wrappernot created, so the content is ignored.

But if I try to move the logic to a component my-wrapperlike this ( my-wrapper.component.html):

<ng-container *ngIf="false">
    <ng-content></ng-content>
</ng-container>

console.log(). , my-component , , *ngIf true my-wrapper.

" + ". , N (my-wrapper), *ngFor. (my-component), , .

overview.html:

<ng-container *ngFor="let item of items">
    <my-wrapper>
        <my-component id="item.id"></my-component>
    </my-wrapper>
</ng-container>

-wrapper.component.html:

<div (click)="toggleDetail()">Click for more</div>
<div *ngIf="showDetail">
    <ng-content></ng-content>
</div>

Angular, , ? , AngularJS.

+6
2

@nsinreal, . , , :

ng-template *ngTemplateOutlet.

my-wrapper (my-wrapper.component.html):

<div (click)="toggleDetail()">Click for more</div>
<div *ngIf="showDetail" [hidden]="!isInitialized">
    <ng-container *ngTemplateOutlet="detailRef"></ng-container>
</div>

, [hidden] , "" , , . , *ngIf, *ngTemplateOutlet , .

detailRef, (my-wrapper.component.ts):

import { ContentChild, TemplateRef } from '@angular/core';

@Component({ ... })
export class MyWrapperComponent {
    @ContentChild(TemplateRef) detailRef;

    ...
}

:

<my-wrapper>
    <ng-template>
        <my-component></my-component>
    </ng-template>
</my-wrapper>

, " ", AngularJS.

+1

:

<my-wrapper *ngIf="false">
    <my-component></my-component>
</my-wrapper>

MyComponent , *ngIf - false. , , , , , ngOnInit. .

:

<ng-container *ngIf="false">
    <ng-content></ng-content>
</ng-container>

, , , , ngOnInit, .

- ( ng-content <<28 > ) , , :

datasLoaded: Promise<boolean>;

this.getData().subscribe(
       (data) => {
            this.datasLoaded = Promise.resolve(true); // Setting the Promise as resolved after I have the needed data
       }
);

:

<ng-container *ngIf="datasLoaded | async">
   // stuff here
</ng-container>

:

<my-component *ngIf="datasLoaded | async">
   // Didn't test this one, but should follow the same logic. If it doesn't, wrap it and add the ngIf to the wrapper
</my-component>
0

More articles:


All Articles