title: Angular Material styles not applying on child component
body: <p>I am facing a issue with angular material default styles.
  I have a parent dashboard component which has child component named
  "HomComponent" and "RegistrationComponent".Angular Material's Input box and button works fine in dashboard page but in child component only HTmlbutton and input box are seen.
  Please see the code below.</p>
  
  <p><code>DashBoardRouting.ts</code>:</p>
  
  
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { DashboardComponent } from './dashboard.component';
  import { home} from './home/home-routing.module';
  import { regis } from './registration/registration-routing.module';
  
  export const dashboard: Routes = [
    {
      path : 'dashboard',
      component :DashboardComponent,
      children:[
        ...home,
        ...regis
      ]
    },
  
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(dashboard)],
    exports: [RouterModule]
  })
  export class DashboardRoutingModule { }
  </code></pre>
  
  <p><code>HomeCompoennt.html</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form class="example-form" &gt;
    &lt;mat-form-field class="example-full-width"&gt;
      &lt;input matInput placeholder="Username"&gt;
    &lt;/mat-form-field&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><code>app.module.ts</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { AppComponent } from './app.component';
  import { DashboardComponent } from './dashboard/dashboard.component';
  import { LoginComponent } from './login/login.component';
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  import { AppRoutingRoutingModule } from './app-routing-routing.module';
  import {MatInputModule} from '@angular/material/input';
  import {MatButtonModule} from '@angular/material/button';
  import {MatStepperModule} from '@angular/material/stepper';
  import {CdkTableModule} from '@angular/cdk/table';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { LoginModule } from './login/login.module';
  import { DashboardModule } from './dashboard/dashboard.module';
  import 'hammerjs';
  
  @NgModule({
    declarations: [
      AppComponent,DashboardComponent, LoginComponent
  
    ],
    imports: [
  
      BrowserModule,BrowserAnimationsModule,AppRoutingRoutingModule,MatInputModule,MatButtonModule,
      MatStepperModule,CdkTableModule,FormsModule,ReactiveFormsModule,LoginModule,DashboardModule
    ],
  
    providers: [],
    bootstrap: [AppComponent],
    schemas:[CUSTOM_ELEMENTS_SCHEMA]
  })
  export class AppModule { }
  </code></pre>