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>",
}).Class({
  constructor: function(){}
})

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

Now, change the App component's code to this:

var App = ng.core.Component({
  selector: "app",
  directives: [Cards, SampleComponent1, List, ListItem],
  templateUrl: "componentTemplates/app-template.html"
}).Class({...