title: How to import a module inside of a sub-component [Angular]
body: <p>So in my previous question, I asked about a material UI library in Angular. Came across <code>@angular/material</code> which seems to be good enough but I'm having trouble implementing it through a sub-module (sorry if I'm not being terminologically correct. I'm very new to Angular).</p>
  <p>This is the source code:</p>
  <h3>app.module.ts</h3>
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  
  import { AppComponent } from './app.component';
  import { MapModule } from './components/map/map.module';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MapModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>
  <h3>map.module.ts</h3>
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { MapComponent } from './map.component';
  import { MatCardModule } from '@angular/material/card'
  import { BrowserModule } from '@angular/platform-browser';
  
  @NgModule({
      declarations: [
          MapComponent
      ],
      imports: [
          BrowserModule,
          MatCardModule
      ],
      providers: [],
      bootstrap: [MapComponent]
  })
  export class MapModule { }
  </code></pre>
  <p>The problem here is that, even though I am able to access <code>&lt;mat-card&gt;</code> as mentioned in the docs of <code>@angular/material</code>, it's not showing up anywhere on my screen.</p>
  <p>What could be the problem?</p>