Skip to content

Angular, ngContent

2017-11-13 01:00:44

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

Create new component

ng g c panel


  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)


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


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

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


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

Usage (better)

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