How to import a module inside of a sub-component [Angular]

Question

So in my previous question, I asked about a material UI library in Angular. Came across @angular/material 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).

This is the source code:

app.module.ts

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 { }

map.module.ts

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 { }

The problem here is that, even though I am able to access <mat-card> as mentioned in the docs of @angular/material, it's not showing up anywhere on my screen.

What could be the problem?

Answer 1

You create a module for importing all the material modules. For your case it is mat card.

material.module.ts

import {NgModule} from '@angular/core';
import {MatCardModule} from '@angular/material/card';
// import all the required material modules

@NgModule({
  exports: [
    MatCardModule,
  ]
})
export class MaterialModule {}

And import in the

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MaterialModule } from './material.module.ts';
import { MapModule } from './components/map/map.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MapModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Usage in view file

<mat-card>Sample</mat-card>

Creating a separate material module is the best practise.