Ng-Content Switch Case - Angular

                                    _             _                     _ _       _                           
  _ __   __ _        ___ ___  _ __ | |_ ___ _ __ | |_      _____      _(_) |_ ___| |__      ___ __ _ ___  ___ 
 | '_ \ / _` |_____ / __/ _ \| '_ \| __/ _ \ '_ \| __|    / __\ \ /\ / / | __/ __| '_ \    / __/ _` / __|/ _ \
 | | | | (_| |_____| (_| (_) | | | | ||  __/ | | | |_     \__ \\ V  V /| | || (__| | | |  | (_| (_| \__ \  __/
 |_| |_|\__, |      \___\___/|_| |_|\__\___|_| |_|\__|    |___/ \_/\_/ |_|\__\___|_| |_|   \___\__,_|___/\___|
        |___/

• Directive NgxGaugeLabel

@Directive({
  selector: "ngx-gauge-label",
  exportAs: "ngxGaugeLabel"
})
export class NgxGaugeLabel {}

• Component NgxGauge

@Component({
  selector: 'ngx-gauge'
})
export class NgxGauge {
  @ContentChild(NgxGaugeLabel) _labelChild: NgxGaugeLabel;
}

• Component NgxGauge

<div [ngSwitch]="_labelChild != null">
  <ng-content select="ngx-gauge-label" *ngSwitchCase="true"></ng-content>
  <ng-container *ngSwitchCase="false">{{label}}</ng-container>
</div>

• NgModule NgxGaugeModule

@NgModule({
  imports: [CommonModule],
  declarations: [
    NgxGauge,// Component
    NgxGaugeLabel // Directive
  ],
  exports: [
    NgxGaugeLabel,
  ],
})
export class NgxGaugeModule {}

• TEST

<ngx-gauge>
    <ngx-gauge-label>
      <h1>123</h1>
    </ngx-gauge-label>
</ngx-gauge>

-- Angular 2+ --

view raw ng-content.md hosted with ❤ by GitHub