Component reference variable from ng content

Question

I have the following markup snippet:

<group-header [isOpen]="true">
    <div *ngIf="isOpen">{{'PRICE' | resource}}</div>
</group-header>

the group header template is as follows:

<div (click)="toggleGroups($event);">
    <ng-content></ng-content>
</div>

isOpen is defined in my group header component as follows:

@Input()
set isOpen(value: boolean) {
    this._isOpen = value;
}

get isOpen() {
    return this._isOpen;
}

Apparently, I cannot reference isOpen the way I want (or for that matter), since my "PRICE" resource is never displayed.

Is it possible to conditionally display the displayed content of ng content based on the field on my component?

Hope this all makes sense ... if not, ask

EDIT: Added setter according to @PierreDuc comment :-)

Answer 1

You can use the template variable to refer to the component GroupHeader:

<group-header [isOpen]="true" #gh>
    <div *ngIf="gh.isOpen">{{'PRICE' | resource}}</div>
</group-header>