reference component variable from ng-content

Question

I have the following piece of markup:

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

group-header's template looks like this:

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

isOpen is defined in my group-header component like this:

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

get isOpen() {
    return this._isOpen;
}

Apparently I cannot reference isOpen the way I want to (or at all for that matter) as my 'PRICE' resource never displays.

Is there a way to have my ng-content rendered content display conditionally based on a field on my component?

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

EDIT: Added setter as per @PierreDuc's comment :-)

Answer 1

You can use a template variable to reference the GroupHeader component:

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