Angular2 not loading nested components

Question

This should be the simplest possible nested components, but when I load this (via systemjs) all that I see in the browser is "Counters", and the <counter></counter> has been added to the DOM. There is no sign of "Hello Counter" or of any processing of the counter component.

import angular from 'angular2/angular2';

var AppComponent = angular
  .Component({
    selector: 'my-app',
    template: '<h1>Counters</h1><counter></counter>'
  })
  .Class({
    constructor: function () { }
  });

angular
  .Component({
    selector: 'counter',
    template: '<h2>Hello counter</h2>'
  })
  .Class({
    constructor: function () {}
  });

angular.bootstrap(AppComponent);

alexpods · Accepted Answer · 2015-10-19 11:47:04Z

12

You must specify all directives which are used in your template in directives property of View (or Component). See this plunker. Correct code:

var Counter = angular
  .Component({
    selector: 'counter',
    template: '<h2>Hello counter</h2>'
  })
  .Class({
    constructor: function () {}
  });

var AppComponent = angular
  .Component({
    selector: 'my-app',
    directives: [Counter], // <-- Here we are!
    template: '<h1>Counters</h1><counter></counter>'
  })
  .Class({
    constructor: function () { }
  });

angular.bootstrap(AppComponent);

edited Oct 19, 2015 at 11:47

answered Oct 19, 2015 at 11:39

alexpods

48.7k10 gold badges104 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 not loading nested components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related