Reputation: 17128
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
Upvotes: 0
Views: 12014
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
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
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