ng2-encrm-components/src/app/app.component.ts

angular 2 components

/*
 * Angular 2 decorators and services
 */
import { Component, ViewEncapsulation, ViewContainerRef } from '@angular/core';

import { AppState } from './app.service';

require('!style!css!bootstrap/dist/css/bootstrap.css');
require('!style!css!assets/vendor/highlight/vs.min.css');

require('!script!assets/vendor/highlight/highlight.min.js');
require('!script!assets/vendor/highlight/typescript.min.js');

/*
 * App Component
 * Top Level Component
 */
@Component({
  selector:      'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls:     [
    './app.style.css'
  ],
  template:      `
    <nav class="navbar navbar-light bg-faded" role="navigation" id="top-nav">
    <span class="navbar-brand">Eniro Style Guide</span>
    <ul class="nav navbar-nav">
        <li class="nav-item"><a class="nav-link" [routerLink]="'list'">element list</a></li>
        <li class="nav-item"><a class="nav-link" [routerLink]="'example-form'">example form</a></li>
        <li class="nav-item"><a class="nav-link" href="assets/styleguide.pdf">pdf</a></li>

    </ul>
</nav>
<router-outlet></router-outlet>

  `
})
export class App {
  angularclassLogo = 'assets/img/angularclass-avatar.png';
  name             = 'Angular 2 Webpack Starter';
  url              = 'https://twitter.com/AngularClass';

  constructor(public appState: AppState,
              private viewContainerRef: ViewContainerRef) {
    this.viewContainerRef = viewContainerRef;
  }

  ngOnInit() {
    console.log('Initial App State', this.appState.state);
  }

}

/*
 * Please review the https://github.com/AngularClass/angular2-examples/ repo for
 * more angular app examples that you may copy/paste
 * (The examples may not be updated as quickly. Please open an issue on github for us to update it)
 * For help or questions please contact us at @AngularClass on twitter
 * or our chat on Slack at https://AngularClass.com/slack-join
 */