Child component content inside mat-drawer don´t appears

roseGarden 0
Viewed 24

I'm using Angular 7 with Angular Material. I have 1 parent component (RComponent) with a mat-drawer and a button on my page and other component (KComponent) that includes the content of mat-drawer. I want that the content of KComponent to be seen in the parent component. When I open the mat-drawer, the content doesn't appear. If I inspect the html element, appears but its content doesn't. It´s empty.

Help will be appreciated. Here´s my code:

RComponent.html

<mat-drawer-container class="example-container" autosize>
   <mat-drawer-content>
       <div class="example-sidenav-content">
           <button type="button" mat-button (click)="drawer.toggle()">
               Toggle sidenav
           </button>
       </div>
  </mat-drawer-content>
  <mat-drawer #drawer class="example-sidenav" mode="over">
    <k-component></k-component>
  </mat-drawer>
</mat-drawer-container>

KComponent.html

<div>
   <mat-form-field appearance="fill">
       <mat-label>Input</mat-label>
       <input matInput>
   </mat-form-field>
</div>
angular-material angular
1 Answers

Your description like you didn't export KComponent and import it at module you call it component.

You need to export KComponent in NgModule:

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forChild(routes)
    ],
    exports: [
        KComponent 
    ],
    declarations: [
        KComponent 
    ],
    providers: [
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})

Hope this help!

Park Numb0
Related