Understanding view children and content children

Elements present inside the tags of a component are called content children, and elements present inside the template of a component are called view children.

To display the content children of a component in the component's view, we need to use the <ng-content> tag. Let's look at an example of this.

Place this code above the App component's code:

var ListItem = ng.core.Component({
  selector: "item",
  inputs: ["title"],
  template: "<li>{{title}} | <ng-content></ng-content></li>",
  constructor: function(){}

var List = ng.core.Component({
  selector: "list",
  template: "<ul><ng-content select='item'></ng-content></ul>"
  constructor: function(){}

Now, change the App component's code ...

Get JavaScript: Moving to ES2015 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.