title: Angular 2 component not working
body: <p>I'm just staring Angular and have a simple angular component (the glyphicon glyphicon-star you see on the left in stack over flow questions) which i want to display but I can only get a non clickable star .</p>
  
  <p>here is my code:
  favorite.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  @Component({
      selector: 'favorite',
      template: `    
   &lt;i 
          class="glyphicon"
          [class.glyphicon-star-empty] ="!isFavorite"
          [class.glyphicon-star]="isFavorite"
          (click)="onClick()"&gt;
      &lt;/i&gt;
      `
  })
  export class FavoriteComponent { 
      isFavorite = false;
  
      onclick() {
          this.isFavorite = !this.isFavorite;
      }
  }
  </code></pre>
  
  <p>In app.component I'm trying to render this 'favorite' component:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {CoursesComponent} from './courses.component'
  import {AuthorsComponent} from './authors.component'
  import {FavoriteComponent} from './favorite.component'
  
  
  
  @Component({
      selector: 'my-app',
      template: '&lt;h1&gt;My First Angular 2 App&lt;/h1&gt;&lt;courses&gt;&lt;/courses&gt;&lt;authors&gt;&lt;/authors&gt;&lt;button class ="btn btn-primary"&gt;Submit&lt;/button&gt;&lt;br&gt;&lt;favorite&gt;&lt;/favorite&gt;',
      directives: [CoursesComponent, AuthorsComponent] 
  })
  export class AppComponent { }
  </code></pre>
  
  <p>How do I render the component in my app.component ?</p>
  
  <p>Full code here : <a href="https://github.com/aindriu80/Angular2withTypeScript" rel="nofollow noreferrer">https://github.com/aindriu80/Angular2withTypeScript</a></p>
  
  <p>The code doesn't load up the component - i only get the favorite favorite
  <a href="https://i.stack.imgur.com/QZHOo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QZHOo.png" alt="F12 View Source Chrome"></a></p>