Geek Answers Handbook

Angular2 Toolbar Component - Material

I am new to angular2 material and a bit confused :)

I want to use the toolbar component of the angular2 material.

so far I have installed the following packages using npm:

"@angular2-material/core": "^2.0.0-alpha.3"
"@angular2-material/toolbar": "^2.0.0-alpha.3"

and my application file contains the following:

<md-toolbar [color]="primary">
 <span>My Application Title</span>
</md-toolbar>

and now I define my component using typescript:

@Component({
 selector: 'app',
 templateUrl: 'client/app.html'
})

Now I know that I need to somehow enable the toolbar component that I installed and add it to the new directives property inside @Component decorator. but I can’t find examples on the net about how to do this.

all i can find are examples of ng2 material at https://justindujardin.imtqy.com/ng2-material/

at the moment .. do i need to use ng2 material? installing angular2 material core and toolbar is not enough?

ng2-, angular2 - ? ?

, , .

+4
2

Material2 GitHub https://github.com/angular/material2/blob/master/src/demo-app/toolbar/toolbar-demo.html

<md-toolbar>
  <i class="material-icons demo-toolbar-icon">menu</i>
  <span>Default Toolbar</span>

  <span class="demo-fill-remaining"></span>

  <i class="material-icons">code</i>
</md-toolbar>

import {Component} from 'angular2/core';
import {MdToolbar} from '../../components/toolbar/toolbar';

@Component({
  selector: 'toolbar-demo',
  templateUrl: 'demo-app/toolbar/toolbar-demo.html',
  styleUrls: ['demo-app/toolbar/toolbar-demo.css'],
  directives: [MdToolbar]
})
export class ToolbarDemo {

}
+3

SystemJS ng2-, NPM.

<script>
  System.config({
    defaultJSExtensions: true,
    packages: {
      app: {
        format: 'register',
        defaultExtension: false
      }
    },
    map: {
      'ng2-material': 'node_modules/ng2-material'
    }
  });
</script>

.

import {MdToolbar} from "ng2-material/components/toolbar/toolbar";

@Component({
  selector: 'app',
  templateUrl: 'client/app.html'
  directives: [ MdToolbar ] 
})
export class SomeComponent {
}

directives .

. :

- ( "< > ", ):

+1

More articles:


All Articles