CODEWITHSUNDEEP
angulartypescriptangular-material
ufk
ufk

Reputation: 32094

toolbar component with angular2-material

I'm new to angular2-material and a bit confused :)

i want to use the toolbar component of angular2-material.

so far i installed using npm the following packages: 

"@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 this now i define my component using typescript:

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

now I know that I need to somehow include the toolbar component that i installed and add it to a new directives property inside @Component decorator. but i can't find any examples on the net on how to do so.

all I can find is ng2-material examples at https://justindujardin.github.io/ng2-material/

for now.. do I have to use ng2-material? installing the angular2-material's core and the toolbar is not enough?

If I install ng2-material, do I need to remove the angular2-material core and toolbar components? do they work together?

any information regarding the issue would be greatly appreciated.

Upvotes: 4

Views: 6562

Answers (2)

Thierry Templier
Thierry Templier

Reputation: 202146

You need to configure SystemJS with ng2-material, only installing the library using NPM isn't enough.

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

Then you will be able to import corresponding components into your modules.

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

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

Don't forget to include the corresponding class into the directives attribute of your component.

See this question for additional hints:

Some sample of toolbars are available on the demo website of the library (just click on "<>" to see the source code):

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

The Material2 GitHub repo contains a demo app 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 {

}

Upvotes: 3

Related Questions