Covalent layout - manage list - Basic Demo

<!DOCTYPE html>
<html>
  <head>
    <title>Covalent Plnkr</title>
    
    <!-- Load common libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.2.0/typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.4/zone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.41/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
      System
        .import('main.ts')
        .catch(console.error.bind(console));
    </script>
    
    <!-- Load the Covalent platform stylesheet -->
    <link href="https://unpkg.com/@covalent/core@1.0.0-beta.4/common/platform.css" rel="stylesheet">

    <!-- Load the Covalent/Material prebuilt theme -->
    <link href="https://unpkg.com/@covalent/core@1.0.0-beta.4/theming/prebuilt/indigo-pink.css" rel="stylesheet">

  </head>

  <body>
    <covalent-app>
      <div style="padding: 20%;text-align:center;">
        <img src="https://camo.githubusercontent.com/5e708dbe0cf622ebdbdab5be0ede859ceb08ab91/68747470733a2f2f63646e2e7261776769742e636f6d2f54657261646174612f636f76616c656e742f646576656c6f702f7372632f6170702f6173736574732f69636f6e732f636f76616c656e742e737667" width="100">
        <h3>Covalent layout - manage list - Basic Demo...</h3>
      </div>
    </covalent-app>
  </body>

</html>

<!--
© 2017 Teradata. All rights reserved.
-->

<td-layout>
  <td-navigation-drawer flex sidenavTitle="Covalent" logo="assets:teradata" name="Firstname Lastname" email="firstname.lastname@company.com">
    <md-nav-list>
      <a md-list-item><md-icon>home</md-icon>Home</a>
    </md-nav-list>
    <div td-navigation-drawer-menu>
      <md-nav-list>
        <a md-list-item><md-icon>account_box</md-icon>Profile</a>
      </md-nav-list>
    </div>
  </td-navigation-drawer>
  <td-layout-nav logo="assets:teradata" toolbarTitle="Covalent" navigationRoute="/">
    <button md-icon-button td-menu-button tdLayoutToggle>
      <md-icon>menu</md-icon>
    </button>
    <td-layout-manage-list opened="true" mode="side">
      <md-toolbar td-sidenav-content>Nav Title</md-toolbar>
      <div td-sidenav-content>
        Sidenav content here
      </div>
      <md-toolbar>
        <button md-button tdLayoutManageListToggle>
          Toggle
        </button>
        Content Title
      </md-toolbar>
      Content goes here
    </td-layout-manage-list>
  </td-layout-nav>
</td-layout>

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import { DomSanitizer } from '@angular/platform-browser';
import { MdIconRegistry } from '@angular/material';

@Component({
  selector: 'covalent-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(private _iconRegistry: MdIconRegistry,
              private _domSanitizer: DomSanitizer) {
                
              this._iconRegistry.addSvgIconInNamespace('assets', 'covalent',
              this._domSanitizer.bypassSecurityTrustResourceUrl('https://raw.githubusercontent.com/Teradata/covalent-quickstart/develop/src/assets/icons/covalent.svg'));

  }
}

/*
© 2017 Teradata. All rights reserved.
*/

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {AppComponent} from './app.component';
import {MdCardModule} from '@angular/material';
import {MdMenuModule} from '@angular/material';
import {MdInputModule} from '@angular/material';
import {MdButtonModule} from '@angular/material';
import {MdListModule} from '@angular/material';
import {MdIconModule} from '@angular/material';
import {MdSidenavModule} from '@angular/material';
import {MdToolbarModule} from '@angular/material';
import {MdTooltipModule} from '@angular/material';
import {CovalentLayoutModule} from '@covalent/core';
import {CovalentSearchModule} from '@covalent/core';
import {CovalentMediaModule} from '@covalent/core';
import {CovalentMenuModule} from '@covalent/core';
import {CovalentHttpModule} from '@covalent/http';
import { CovalentCommonModule } from '@covalent/core';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    MdCardModule,
    MdMenuModule,
    MdInputModule,
    MdButtonModule,
    MdListModule,
    MdIconModule,
    MdSidenavModule,
    MdToolbarModule,
    MdTooltipModule,
    CovalentLayoutModule,
    CovalentSearchModule,
    CovalentMediaModule,
    CovalentMenuModule,
    CovalentCommonModule,
    CovalentHttpModule.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

/*
© 2017 Teradata. All rights reserved.
*/

// modify this to point to different versions (an empty string '' would mean latest)
let angularVer = '@4.1.1';
let materialVer = '@2.0.0-beta.5';
let covalentVer = '@1.0.0-beta.4';
let rxjsVer = '@5.2.0'

/** Add Transpiler for Typescript */
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'vendor': {
      defaultExtension: 'js'
    }
  }
});

System.config({
  map: {
    'main': 'main.js',
    
    // Angular specific mappings.
    '@angular/animations': 'https://unpkg.com/@angular/animations'+ angularVer +'/bundles/animations.umd.js',
    '@angular/animations/browser': 'https://unpkg.com/@angular/animations'+ angularVer +'/bundles/animations-browser.umd.js',
    '@angular/core': 'https://unpkg.com/@angular/core'+ angularVer +'/bundles/core.umd.js',
    '@angular/common': 'https://unpkg.com/@angular/common'+ angularVer +'/bundles/common.umd.js',
    '@angular/compiler': 'https://unpkg.com/@angular/compiler'+ angularVer +'/bundles/compiler.umd.js',
    '@angular/http': 'https://unpkg.com/@angular/http'+ angularVer +'/bundles/http.umd.js',
    '@angular/forms': 'https://unpkg.com/@angular/forms'+ angularVer +'/bundles/forms.umd.js',
    '@angular/router': 'https://unpkg.com/@angular/router'+ angularVer +'/bundles/router.umd.js',
    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser'+ angularVer +'/bundles/platform-browser.umd.js',
    '@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser'+ angularVer +'/bundles/platform-browser-animations.umd.js',
    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic'+ angularVer +'/bundles/platform-browser-dynamic.umd.js',
    
    // Material specific mappings
    '@angular/material': 'https://unpkg.com/@angular/material'+ materialVer +'/bundles/material.umd.js',
    
    // Covalent specific mappings.
    '@covalent/core': 'https://unpkg.com/@covalent/core'+ covalentVer +'/core.umd.js',
    '@covalent/http': 'https://unpkg.com/@covalent/http'+ covalentVer +'/http.umd.js',

    // Rxjs mapping
    'rxjs': 'https://unpkg.com/rxjs' + rxjsVer,
  },
  packages: {
    // Thirdparty barrels.
    'rxjs': { main: 'index' },
  }
});


/*
© 2017 Teradata. All rights reserved.
*/

## Covalent Chat Template

This `plnkr` should be used for creating Covalent reusable app templates.

Go to our [documentation](http://getcovalent.com) site or [repo](https://github.com/Teradata/covalent) for more info.


© 2017 Teradata. All rights reserved.