Problem loading son component with angular material 2

Question

Problem loading son component with angular material 2

Navigation

#1 by (0 votes)

1

I'm trying to load a child component which would only be a toolbar but I get error with material angle but if I load the toolbar from my appcomponent there is no problem but when I try to separate it I get this this is my app.component

    import { Component } from '@angular/core';
import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
import {BarComponent} from './bar.component'
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
import {MdIcon, MdIconRegistry} from '@angular2-material/icon';
import { MdToolbar } from '@angular2-material/toolbar';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [MD_CARD_DIRECTIVES,BarComponent,MD_BUTTON_DIRECTIVES, MdIcon, MdToolbar],
    providers: [MdIconRegistry]

})
export class AppComponent {
  title = 'app works!';
}

and this is my barcomponent

    import { Component, OnInit } from '@angular/core';
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
import {MdIcon, MdIconRegistry} from '@angular2-material/icon';
import { MdToolbar } from '@angular2-material/toolbar';
@Component({
    selector: '<bar></bar>',
    templateUrl: 'bar.component.html',
    directives: [MD_BUTTON_DIRECTIVES, MdIcon, MdToolbar],
    providers: [MdIconRegistry]
})
export class BarComponent  {

    constructor() { }

}

and its corresponding html

    <bar></bar>
<md-card>
   <md-card-subtitle>Subtitle first</md-card-subtitle>
   <md-card-title>Card with title</md-card-title>   
   <md-card-content>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
   </md-card-content>
   <md-card-actions>
        <button md-button>LIKE</button>
        <button md-button>SHARE</button>
   </md-card-actions>
</md-card>

bar.component.html

    <md-toolbar>
  Menu
</md-toolbar>

angular2-template angularjs-2.0 material-design

asked by Carlos de los reyes 08.07.2016 в 22:32

source

1 answer

NOT NULL constraint failed: Adm_profile.user_id in django Allauth [closed] fill listview with bluetooth devices

score 0 · Accepted Answer

First, check the selector of your component, I think that "selector: '/ bar >'" is incorrect Additionally, to your component add the module property in the configuration of your component You should have something like this:

@Component({
    moduleId: module.id,
    selector: 'bar',
    templateUrl: 'bar.component.html',
    directives: [MD_BUTTON_DIRECTIVES, MdIcon, MdToolbar],
    providers: [MdIconRegistry]
})

The property moduleId is important, since in combination CommonJS allow the loading of the templates using the relative paths. Detailed information can be found at official documentation