title: Angular2: Component host property
body: <p>What does <code>@Component.host</code> property stand for?</p>
  
  <p>According to <a href="https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html" rel="noreferrer">Angular2 documentation</a> it stands for:</p>
  
  <blockquote>
    <p>host - map of class property to host element bindings for events, properties and attributes.</p>
  </blockquote>
  
  <p>I don't quite figure out what's it for?</p>
  
  <p>I'm posing this in order to understand a stuff code I've stuck last days.</p>
  
  <p>The code is:</p>
  
  <pre><code>@Component({
    selector: 'layout',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './layout.template.html',
    host: {
      '[class.nav-static]' : 'config.state["nav-static"]',
      '[class.chat-sidebar-opened]' : 'chatOpened',
      '[class.app]' : 'true',
      id: 'app'
    }
  })
  export class Layout {
  </code></pre>