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

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?

CodePudding user response：

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.

CodePudding user response：

To get this working globally you would need to import MatCardModule to AppModule. But what your asking here, is to have a sub module MapModule, import and export MatCardModule you would then need the main module, AppModule, to import MapModule itself.

MatCardModule -> MapModule -> AppModule

MapModule

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

@NgModule({
    declarations: [
      
    ],
    imports: [
        BrowserModule,
        MatCardModule
    ],
    providers: [
      {provide: MatCardModule}
    ],
    bootstrap: [],
    exports: [
      MatCardModule
    ]

})
export class MapModule { }

AppModule

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MapModule } from './map/map.module';

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

export class AppModule { }

Here is a working example: https://stackblitz.com/edit/angular-10-material-module-jawrve?file=src/app/app.module.ts