San Jaisy
San Jaisy

Reputation: 17128

Angular Material Input not working

I, am using Angular material reference from https://material.angular.io/components/form-field/overview and example from https://stackblitz.com/angular/kopgoqmxvbdl?file=app%2Fform-field-overview-example.html

I, have the same code as shown in the example. However, it is not working for me. I, am using angular 5 template in asp.net code 2.0.

In my index.cshtml page I, have added

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

Here is the html code where input field are not working

dashboard.component.html

<div class="example-container">
    <mat-form-field>
        <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
        <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-select placeholder="Select">
            <mat-option value="option">Option</mat-option>
        </mat-select>
    </mat-form-field>
</div>

The same code from example.

Here is the App.share.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import 'hammerjs';
import 'angular-polyfills';
import 'web-animations-js';
import { AppComponent } from './components/app/app.component';
import { EqualValidator } from "./components/Validation/equal.validator.directive";
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/usercreation/login.component';
import { MobileComponent } from './components/mobile/mobile.component';
import { SocialComponent } from './components/usercreation/social.component';
import { RegisterComponent } from './components/usercreation/signup.component';
import { DashBoardComponent } from './components/dashboard/dashboard.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';

import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatFormFieldModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule
} from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
    declarations: [
        AppComponent, RegisterComponent, EqualValidator, DashBoardComponent,
        HomeComponent, NavMenuComponent,
        LoginComponent,
        MobileComponent,
        SocialComponent
    ],
    imports: [
        CommonModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'login', component: LoginComponent },
            { path: 'mobile', component: MobileComponent },
            { path: 'dashboard', component: DashBoardComponent },
            { path: 'signup', component: RegisterComponent },
            { path: '**', redirectTo: 'home' }
        ]),
        BrowserModule,
        BrowserAnimationsModule,
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatFormFieldModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule
    ],
    exports: [
        MatAutocompleteModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatFormFieldModule,
        MatListModule,
        MatMenuModule,
        MatNativeDateModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule
    ]
})
export class AppModuleShared {
}

Component Ts File

import { Component } from '@angular/core';
import { AppComponent } from "../app/app.component";
@Component({
    selector: 'dashboard',
    templateUrl: './dashboard.component.html'
})
export class DashBoardComponent {
    private _appComponent: AppComponent;
    constructor(private appComponent: AppComponent) {

        this._appComponent = appComponent;
        this._appComponent.menulist = true;


    }

}

webpack.config.vendor.js

const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
    '@angular/material',
    '@angular/material/prebuilt-themes/indigo-pink.css',
    '@angular/cdk',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);

Vendor.css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
.mdl-layout--fixed-header > .mdl-layout__header {
    z-index: 6;
}

.has-drawer .mdl-layout__drawer {
    padding-top: 64px;
}

.mdl-layout--fixed-drawer:not(.is-small-screen) > .mdl-layout__header {
    padding-left: 240px;
    margin-left: 0;
    width: 100%;
}

Getting an error as GET http://localhost:54236/dist/~@angular/material/prebuilt-themes/indigo-pink.css net::ERR_ABORTED - The css file is not loaded.

Here is the output which I am getting from the code

output

Upvotes: 0

Views: 12014

Answers (3)

Ilya.Istomin
Ilya.Istomin

Reputation: 1

U need to change styles.scss

Please, add @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

This theme works correctly with white background.

Upvotes: 0

San Jaisy
San Jaisy

Reputation: 17128

The problem was my vendor.css and vendor.js was not refresh. So, I need to build the webpack again using

webpack --config webpack.config.vendor.js

If webpack is not install. Please install the webpack

npm install -g webpack

Inside webpack.config.vendor.js

const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
];
const nonTreeShakableModules = [
    '@angular/material',
    '@angular/material/prebuilt-themes/indigo-pink.css',
    '@angular/cdk',
    'es6-promise',
    'es6-shim',
    'event-source-polyfill',
    'jquery',
];

Upvotes: 1

woodykiddy
woodykiddy

Reputation: 6455

It looks like that you are still missing out references there, which might explain why the input control seems broken with Angular Material.

Have you also added reference to this?

<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

I think the script file should go with the css together.

You might also want to include this style as well.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

For more details, please check this link.

Upvotes: 0

Related Questions