toolbar component with angular2-material

Question

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.

Günter Zöchbauer · Accepted Answer · 2016-04-25 09:55:44Z

3

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 {

}

answered Apr 25, 2016 at 9:55

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ufk Over a year ago

i don't see it loading any angular material css. so even when i choose primary as the color of the toolbar is gray. any ideas ?

Community · Accepted Answer · 2017-05-23 12:09:47Z

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:

Angular2 + ng2-material import

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

https://justindujardin.github.io/ng2-material/#/components/toolbar

Collectives™ on Stack Overflow

toolbar component with angular2-material

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related