demo-page.html

<div class="container">

    <div class="jumbotron">
        <h1>Angular 2.0 sample components</h1>
        <p>
            More documentation about each specific component can be found
            <a href="http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples">here</a>.
        </p>
        <p>Current version: Angular 2.0 Beta 15</p>
    </div>

    <div>
        <div class="list-group col-md-3">
            <a [class.active]="getLinkStyle('/demo/spreadsheet')" [routerLink]="['/Demo/Spreadsheet']" class="list-group-item">Virtualized Spreadsheet</a>
            <a [class.active]="getLinkStyle('/demo/countries')" [routerLink]="['/Demo/CountryDemo']" class="list-group-item">Lazy Loaded Tree View</a>
            <a [class.active]="getLinkStyle('/demo/rxjs')" [routerLink]="['/Demo/RxJsStreams']" class="list-group-item">RxJs Streams</a>
            <a [class.active]="getLinkStyle('/demo/react')" [routerLink]="['/Demo/React']" class="list-group-item">React Integration</a>
            <a [class.active]="getLinkStyle('/demo/graph')" [routerLink]="['/Demo/Graph']" class="list-group-item">Graph</a>
            <a [class.active]="getLinkStyle('/demo/algorithms')" [routerLink]="['/Demo/Algorithms']" class="list-group-item">Insertion Sort</a>
            <a [class.active]="getLinkStyle('/demo/redux')" [routerLink]="['/Demo/Redux']" class="list-group-item">Redux</a>
            <a [class.active]="getLinkStyle('/demo/survey')" [routerLink]="['/Demo/Survey']" class="list-group-item">Dynamic Form</a>
            <a [class.active]="getLinkStyle('/demo/pub-sub')" [routerLink]="['/Demo/PubSub']" class="list-group-item">Pub Sub</a>
            <a [class.active]="getLinkStyle('/demo/text-editor')" [routerLink]="['/Demo/TextEditor']" class="list-group-item">Text Editor</a>
            <a [class.active]="getLinkStyle('/demo/form')" [routerLink]="['/Demo/AddressForm']" class="list-group-item">Form</a>
            <a [class.active]="getLinkStyle('/demo/change')" [routerLink]="['/Demo/Change']" class="list-group-item">Change Detection</a>
            <a [class.active]="getLinkStyle('/demo/http')" [routerLink]="['/Demo/Http']" class="list-group-item">Http</a>
            <a [class.active]="getLinkStyle('/demo/input')" [routerLink]="['/Demo/Input']" class="list-group-item">Input Controls</a>
            <a [class.active]="getLinkStyle('/demo/treeview')" [routerLink]="['/Demo/TreeView']" class="list-group-item">Recursive tree view</a>
            <a [class.active]="getLinkStyle('/demo/grid')" [routerLink]="['/Demo/Grid']" class="list-group-item">Data Grid</a>
            <a [class.active]="getLinkStyle('/demo/address')" [routerLink]="['/Demo/AddressBook']" class="list-group-item">Address Book</a>
            <a [class.active]="getLinkStyle('/demo/jquery')" [routerLink]="['/Demo/JqueryIntegration']" class="list-group-item">JQuery Integration</a>
            <a [class.active]="getLinkStyle('/demo/parent-child')" [routerLink]="['/Demo/Parent']" class="list-group-item">Access Child Component</a>
            <a [class.active]="getLinkStyle('/demo/contact')" [routerLink]="['/Demo/Contact']" class="list-group-item">Interactive contact list</a>
            <a [class.active]="getLinkStyle('/demo/textbox')" [routerLink]="['/Demo/Textbox']" class="list-group-item">Bound Textbox</a>
            <a [class.active]="getLinkStyle('/demo/iodemo')" [routerLink]="['/Demo/InputOutput']" class="list-group-item">Input/Output</a>
            <a [class.active]="getLinkStyle('/demo/non-bindable')" [routerLink]="['/Demo/IgnoreBindings']" class="list-group-item">Non Bindable</a>
       </div>

        <div class="col-md-9">
            <router-outlet></router-outlet>
        </div>
    </div>

</div>