Splitting Up the Components

By this point our component is getting unwieldy. Let's split it into two separate components.

The first component will be located in app/src/components/task-list/task-list-component.ts and will implement our simple task counter.

  export class TaskListComponent {

    private numberOfTasks;

    static selector = 'ngcTasks';

    static directiveFactory: ng.IDirectiveFactory = () => ({
      restrict: 'E',
      controllerAs: 'ctrl',
      scope: {},
      bindToController: true,
      controller: TaskListComponent,
      template: require('./task-list-component.html')

    constructor(private $log ) {
      this.numberOfTasks = 0;

    public addTask() {
      this.$log.debug('Current number of tasks:', this.numberOfTasks);
      this.numberOfTasks += 1;


We should also create a template file for this component with the familiar markup:

    Hello, {{ ctrl.username }}!
    You've got {{ ctrl.numberOfTasks }} tasks.
  <button ng-click="ctrl.addTask()">Add task</button>

The second component will be remain at components/main/main-component.ts and will be responsible for user authentication.

  export class MainComponent {

    private isAuthenticated;
    constructor(private $log) { 
      this.isAuthenticated = false;

    public login() {
      this.isAuthenticated = true;

    <div ng-hide="ctrl.isAuthenticated">
      Enter username: <input ng-model="ctrl.username"/><br/>
      Password: <input type="password" ng-model="ctrl.password"/><br/>
      <button ng-click="ctrl.login()">Login</button>
    <div ng-show="ctrl.isAuthenticated">

The last thing remaining is to wire up our components within Angular application context.

  import {MainComponent} from './components/main/main-component';
  import {TaskListComponent} from './components/task-list/task-list-component';

    () => angular.bootstrap(document, ['ngcourse'])