My journey with Angular and Google Material Design has been successful so far. I have been building my front-end app using the official documentation from https://angular.io/tutorial and https://material.angular.io/guides.
While browsing through a similar question, I realized that the solutions provided are not applicable to my project as I am using Angular 7.0.0 with Angular Material 7.0.0.
As I aim to incorporate most of the Angular Material Components in my demo app, I am seeking the best approach to include all of them.
Despite going through various articles and tutorials such as Getting Started With Angular Material 2 and this one, I have found that they mainly cover basic components or refer to outdated versions of Angular Material. The current official documentation lacks a comprehensive list of available components for the current version, leaving me unsure about how to import and utilize these components effectively.
Below is a snippet from my app.module.ts featuring basic components:(Updated code)
// angular component and
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
// my components
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';
// add animaitons for material
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// add CDK layout for material
import { LayoutModule } from "@angular/cdk/layout";
// add material to module
import { MaterialModule } from "./class/material.module"
@NgModule({
imports: [
BrowserModule,
FormsModule, ReactiveFormsModule,
BrowserAnimationsModule,
LayoutModule,
MaterialModule
],
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NavigationComponent,
ContainerComponent,
NavComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}
Although I came across this code in a similar question, when I attempted to separate it into a different file and import it into the app.module.ts, my app simply displayed a loading message in the browser. (Updated code)
import { NgModule } from "@angular/core";
import {
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
} from "@angular/material";
@NgModule({
imports: [
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
],
exports: [
MatButtonModule,
MatToolbarModule,
MatSidenavModule,
MatCheckboxModule,
MatIconModule,
MatListModule
]
})
export class MyMaterialModule {}
(Updated)
Despite having fixed the material.module.ts in my class folder, I am still unable to add other components such as the following:
import {
MatNativeDateModule,
MatSnackBarModule,
MatDialogModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTabsModule,
MatCheckboxModule,
MatCard,
MatCardModule,
MatFormField,
MatFormFieldModule,
MatProgressSpinnerModule,
MatInputModule
} from "@angular/material";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatRadioModule } from "@angular/material/radio";
import { MatSelectModule } from "@angular/material/select";
import { MatSliderModule } from "@angular/material/slider";
import { MatDividerModule } from "@angular/material/divider";