Angular Material Moduel

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatBadgeModule } from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';


@NgModule( {
    imports: [
        CommonModule,
        BrowserAnimationsModule,
        MatCheckboxModule,
        MatCheckboxModule,
        MatButtonModule,
        MatInputModule,
        MatAutocompleteModule,
        MatDatepickerModule,
        MatFormFieldModule,
        MatRadioModule,
        MatSelectModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatMenuModule,
        MatSidenavModule,
        MatBadgeModule,
        MatToolbarModule,
        MatListModule,
        MatGridListModule,
        MatCardModule,
        MatStepperModule,
        MatTabsModule,
        MatExpansionModule,
        MatButtonToggleModule,
        MatChipsModule,
        MatIconModule,
        MatProgressSpinnerModule,
        MatProgressBarModule,
        MatDialogModule,
        MatTooltipModule,
        MatSnackBarModule,
        MatTableModule,
        MatSortModule,
        MatPaginatorModule

    ],
    exports: [
        MatButtonModule,
        MatToolbarModule,
        MatIconModule,
        MatSidenavModule,
        MatBadgeModule,
        MatListModule,
        MatGridListModule,
        MatInputModule,
        MatFormFieldModule,
        MatSelectModule,
        MatRadioModule,
        MatDatepickerModule,
        MatChipsModule,
        MatTooltipModule,
        MatTableModule,
        MatPaginatorModule
    ],
    providers: [
        MatDatepickerModule,
    ]
} )

export class AngularMaterialModule { }

Here is what the above code is Doing:
1. Importing the modules that we need to use in our app.
2. Exporting the modules that we need to use in our app.
3. Providing the modules that we need to use in our app.

Now, we need to import the AngularMaterialModule in our app.module.ts file.

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

import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { AngularMaterialModule } from ‘./angular-material.module’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
AngularMaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now, we can use the Angular Material components in our app.

Let’s create a simple form using Angular Material.

Angular Material Form

Here’s the output:

Angular Material Form

Now, let’s create a simple table using Angular Material.

Angular Material Table

Javascript Examples

disable a button react

ByAnurag batra September 21, 2022September 6, 2022

// Input field listens to change, updates React’s state and re-renders the component. this.setState({ value: e.target.value })} value={this.state.value} /> // Button is disabled when input state is empty. Here is what the above code is Doing: 1. The input field is listening to the onChange event. 2. When the input field changes, the onChange event…

Javascript Examples

javascript object includes

ByAnurag batra September 29, 2022September 6, 2022

const person = { first_name: “Sam”, last_name: “Bradley” }; Object.values(person).includes(“Bradley”); Here is what the above code is Doing: 1. We create an object called person. 2. We use the Object.values() method to get an array of the values of the person object. 3. We use the includes() method to check if the array contains the…

why to use arrow functions over normal function

Javascript Examples

why to use arrow functions over normal function

ByAnurag batra July 5, 2022June 30, 2022

// => why to choose arrow function over normal function 1. short syntax, good as callback functions ([].map(() => {}) is better than [].map(function () {})) 2. when using class component, with arrow functions no need to bind this // example: -// this will be undefined button.addEventListener(‘click’, () => {console.log(this); }) // this will refer…

Javascript Examples

Ts get first string char

ByAnurag batra October 8, 2022September 6, 2022

myString.charAt(0) Here is what the above code is Doing: 1. We create a variable called myString and assign it the value “Hello World” 2. We then create a variable called firstLetter and assign it the value of the first character in myString 3. We then print the value of firstLetter

Javascript Examples

angular ng default scss

ByAnurag batra September 26, 2022September 6, 2022

“schematics”: { “@schematics/angular:component”: { “style”: “scss” } } Here is what the above code is Doing: 1. It’s telling the CLI to use the @schematics/angular:component schematic to generate a component. 2. It’s telling the CLI to use the SCSS style format for the component. The CLI will use the default values for all other options….

Javascript Examples

check uncheck vanila js

ByAnurag batra September 26, 2022September 6, 2022

//Check document.getElementById(‘checkbox’).setAttribute(‘checked’, ‘checked’); //UnCheck document.getElementById(‘chk’).removeAttribute(‘checked’); Here is what the above code is Doing: 1. First, we are selecting the checkbox using its ID. 2. Then, we are using the setAttribute() method to set the checked attribute on our selected element. 3. Finally, we are using the removeAttribute() method to remove the checked attribute on our…

No.	{{element.position}}

Angular Material Form

Angular Material Table

Similar Posts