Angular2 Components :: ViewChild / ContentChild

Question

I am trying to design an expandable component like so:

<collapsable [expanded]="myFlag">
  <div title>Summary</div>
  <div alternate-title>Heading</div>
  <div content>Details</div>
</collapsable>

The alternate-title portion is supposed to be optional. When myFlag = false , the component should render only:

<div title>Summary</div>

However, when myFlag = true , the component should render one of the following:

// If alternate-title exists..
<div alternate-title>Heading</div>
<div content>Details</div>

// If alternate-title does not exist..
<div title>Summary</div>
<div content>Details</div>

Right now, I have the template for this component defined as follows:

<ng-content *ngIf="!expanded" select="[title]"></ng-content>
<ng-content *ngIf="expanded"  select="[alternate-title]"></ng-content>
<ng-content *ngIf="expanded"  select="[content]"></ng-content>

This works fine for the first scenario (if alternate-title exists). However, in the second scenario, it doesn't work (obviously). To get it to work for the second scenario, I need to get a reference to alternate-title in my component. One way to do that is below:

// In page.html..
<div #alternateTitle alternate-title>...</div>

// In component.ts
@ContentChild('alternateTitle') alternateTitle: ElementRef;

However, I don't like this approach as it forces me to define a local variable for alternate-title which is redundant.

Is there a way I can get a reference to alternate-title in my component to check whether or not the user of my component defined it or not?

Answer 1

We need a wrapper element with a template variable:

<ng-content *ngIf="!expanded" select="[title]"></ng-content>
<span #titleWrapper><ng-content *ngIf="expanded"  select="[alternate-title]"></span></ng-content>
<ng-content *ngIf="expanded"  select="[content]"></ng-content>

Then we can query the element using @ViewChild() and then check if it contains the content we are interesed in:

@ViewChild('titleWrapper') titleWrapper:ElementRef;

ngAfterContentInit() {
  let title = this.titleWrapper.nativeElement.querySelector('[alternative-title]');
  ...
}