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?

Karthikeyan · Accepted Answer · 2022-01-25 13:57:39Z

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.

answered Jan 25, 2022 at 13:57

Karthikeyan

3212 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karthikeyan Over a year ago

in your code adding the MatCardModule into the exports array in map.module.ts will solve your issue.

Arjis Chakraborty Over a year ago

Yeah turns out I just had to export the MatCardModule from MapModule as pointed out by @Joosep.P in an earlier answer. Thanks for the help though. Appreciate it.

Joosep Parts · Accepted Answer · 2022-01-25 13:59:53Z

0

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%2Fapp%2Fapp.module.ts

answered Jan 25, 2022 at 13:59

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

1 Comment

Arjis Chakraborty Over a year ago

Works like a charm! Seems like I never exported the MatCardModule from the MapModule and that seemed to be the problem. Thanks a lot for the help.

Collectives™ on Stack Overflow

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

app.module.ts

map.module.ts

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.module.ts

map.module.ts

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related