4

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.

Improve this question

2 Answers 2

Reset to default
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 { }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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 ?
1

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):

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.