If you have already included the following imports at the class level:
import { MatSort, MatTableDataSource } from '@angular/material';
This grants access to the types MatSort and MatTableDataSource within your .ts class. However, if you also want to utilize these modules as directives in your component's .html file, you need to import them in your app.module.ts. One way to do this is by creating a separate NgModule that consolidates all of the material components you are using.
For example, create a module called material\material.module.ts:
import { NgModule } from '@angular/core';
import {
MatTableModule,
MatSortModule,
} from '@angular/material';
@NgModule({
imports: [
MatTableModule,
MatSortModule,
],
exports: [
MatTableModule,
MatSortModule,
]
})
export class MaterialModule { }
Then, in your app.module.ts, include the MaterialModule alongside other necessary imports:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MaterialModule } from './material/material.module';
import { AppComponent } from './app.component';
import { MyComponent } from './my/my.component';
@NgModule({
declarations: [
AppComponent,
MyComponent
],
imports: [
BrowserModule,
MaterialModule,
BrowserAnimationsModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }