Angular, ngContent


Simple example of ngContent and ng-container directives that is part of Angular core. Everything what you need will be generated after executing this command ng g c panel. After that, what you have to do, is adjust few files. Of course more you can find in Angular documentation, here is only my note. One more thing, if you don’t like to install node mess on your local computer you can use my or similar docker image
https://hub.docker.com/r/szalek/angular-cli/

Create new component

ng g c panel

Outoput

  create src/app/panel/panel.component.css (0 bytes)
  create src/app/panel/panel.component.html (24 bytes)
  create src/app/panel/panel.component.spec.ts (621 bytes)
  create src/app/panel/panel.component.ts (325 bytes)
  update src/app/app.module.ts (1191 bytes)

panel.component.html

<div class="panel panel-default">
  <div class="panel-heading">
    <ng-content select=".heading"></ng-content>
  </div>
  <div class="panel-body">
    <ng-content select=".body"></ng-content>
  </div>
</div>

panel.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-panel',
  templateUrl: './panel.component.html',
  styleUrls: ['./panel.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class PanelComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Usage

<app-panel>
  <div class="heading">Something</div>
  <div class="body">
    <h2>Text 1</h2>
    <p>Lorem Ipsum</p>
  </div>
</app-panel>

Usage (better)

<app-panel>
  <ng-container class="heading">Something</ng-container>
  <ng-container class="body">
    <h2>Text 1</h2>
    <p>Lorem Ipsum</p>
  </ng-container>
</app-panel>