1

plnkr demo here

@Component({
  selector: 'my-demo',
  template: `This is <ng-content select=".content"></ng-content>`
})
export class DemoComponent { name = 'Angular'; }

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
    <my-demo><div class="content">In Content</div></my-demo>
  `
})
export class AppComponent { name = 'Angular'; }

I want to conditional ng-content, like 

<ng-template *ngIf='hasContent(".content"); else noContent'>
This is <ng-content select=".content"></ng-content>
</ng-template>
<ng-template #noContent>No content</ng-template>

Is there possible in angular2 ?

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
wener
  • 7,191
  • 6
  • 54
  • 78

3 Answers3

1

Günter Zöchbauer's solution is acceptable, doesn't affect the useage, let the component detect this, I also found a easier way to do this without any json by using the :empty

<!-- must no content: https://css-tricks.com/almanac/selectors/e/empty/ -->
<!--@formatter:off-->
<div class="title"><ng-content select=".nav-title"></ng-content></div>
<!--@formatter:on-->

.title:empty {
  display: none;
}

Works for any html+css.

wener
  • 7,191
  • 6
  • 54
  • 78
0
template: `This is <span #wrapper>
  <ng-content select=".content"></ng-content>
  </span>`

@ViewChild('wrapper') wrapper:ElementRef;

ngAfterContentInit() {
    console.log(this.wrapper.innerHTML); // or `wrapper.text`
}

See also

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
0

if you want to use conditional statement with *ngIf and else the yes it's possible 

@Component({
  selector: 'my-demo',
  template: `<div *ngIf='content; else noContent'>
This is <ng-content select=".content"></ng-content>
</div>

<ng-template #noContent>No content</ng-template>`
})
export class DemoComponent { name = 'Angular'; content = true}

Demo

Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80