Eckiges Material 2 in benutzerdefinierter Komponente wird nicht gerendert

Question

Zum Erstellen einer Web-App verwende ich angular seed advanced zum Starten. Ich habe es mit eckigem Material 2 erweitert. Das funktioniert sehr gut, solange ich in 'root'-Komponenten bin.

Ie: Ich habe eine default-layout.component gemacht. (Ts | html | scss). In der HTML-Datei habe ich diesen Code:

<md-sidenav-layout class="md-sidenav-container"> 
    <md-sidenav #start mode="side" opened="true" class="sidenav-left"> 
     <md-select> 
      <md-option>start</md-option> 
      <md-option>end</md-option> 
     </md-select> 
     <np-nav-menu></np-nav-menu> 
    </md-sidenav> 
    <div class="main-content"> 
     <router-outlet></router-outlet> 
    </div> 
</md-sidenav-layout> 

Die erzeugte md-select und md-sidenav wirkt wie ein Zauber.

Aber wenn ich versuche, md-select in einer anderen Komponente (sagen wir: np-select-group) die Auswahl wird nicht gerendert.

np-select-group.component.html:

<md-select> 
    <md-option>start</md-option> 
    <md-option>end</md-option> 
</md-select> 

default-layout.component.html

<md-sidenav-layout class="md-sidenav-container"> 
     <md-sidenav #start mode="side" opened="true" class="sidenav-left"> 
      <np-select-group></np-select-group> 

      <np-nav-menu></np-nav-menu> 
     </md-sidenav> 
     <div class="main-content"> 
      <router-outlet></router-outlet> 
     </div> 
    </md-sidenav-layout> 

ich nur die Worte "Start" und "Ende" in einer Reihe sehen . Wenn ich in gerenderten HTML-Code schaue, wird die Auswahl nicht im Lot gerendert.

Dies geschieht auch mit allen anderen Material2 Komponenten.

Muss ich einige andere Dinge in die TS meiner benutzerdefinierten Komponente importieren?

Answer 1

Wie im Kommentar vorgeschlagen: Die np-select-group.component befindet sich in einem anderen Modul. Ich musste MaterialModule in dieses NgModule importieren.

group.module.ts:

[...] 
@NgModule({ 
    imports: [ 
    CommonModule, 
    FormsModule, 
    HttpModule, 
    RouterModule, 
    MaterialModule 
    ], 
    declarations: [ 
    GROUP_COMPONENTS 
    ], 
    providers: [ 
    GROUP_PROVIDERS 
    ], 
    schemas: [ 
    NO_ERRORS_SCHEMA, 
    CUSTOM_ELEMENTS_SCHEMA 
    ], 
    exports: [ 
    GROUP_COMPONENTS 
    ] 
}) 
export class GroupModule { } 
[...]