Queries

In addition, to access its host element, a component can interact with its children. There are two types of children a component can have: content children and view children. To understand the difference between them, let's look at the following example:

@Component({
  selector: 'tab',
  template: `...`
})
class TabCmp {}

@Component({
  selector: 'tabs',
  template: `
    Tabs:
    <div>
      <ng-content></ng-content>
    </div>
    <div>
      <button (click)="selectPrev()">Prev</button>
      <button (click)="selectNext()">Next</button>
    </div>
  `
})
class TabsCmp {}

@Component({
  template: `
    <tabs>
      <tab ></tab>
      <tab title="Two"></tab>
      <tab ></tab>
    </tabs>
  `
})
class CmpUsingTabs {
}

The content children of the tabs component are the three tab components. The user of the tabs component provided those. The previous and next buttons are the...