I'm trying to use Angular Material in my project and the tags are imported, but not all of the styling is there.
In my HTML:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>
It should show:
But it shows:
I added #import "~#angular/material/prebuilt-themes/indigo-pink.css"; to styles.css and the calendar is showing fine, but the text field still looks bad.
You need to follow everything here. https://material.angular.io/guide/getting-started
Try adding this line to your styles.css: #import "~#angular/material/prebuilt-themes/indigo-pink.css";
As from this step: https://material.angular.io/guide/getting-started#step-4-include-a-theme
These are the imports you will need:
import { MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule } from '#angular/material';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
#NgModule({
imports: [BrowserModule, FormsModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, BrowserAnimationsModule],
...
})
Related
I am trying to use the select component from angular material but it appears incorrectly:
I have copied and pasted the code from the angular material site:
<mat-form-field appearance="fill">
<mat-label>Has backdrop</mat-label>
<mat-select #hasBackdrop>
<mat-option>Unset</mat-option>
<mat-option [value]="true">True</mat-option>
<mat-option [value]="false">False</mat-option>
</mat-select>
</mat-form-field>
NgModule({
imports: [
CommonModule,
RoutesRoutingModule,
FormsModule,
SharedModule,
MatTabsModule,
MatSelectModule,
MatDatepickerModule,
MatNativeDateModule,
MatInputModule,
MatFormFieldModule,
],
})
I havent added any other css rules.
If anyone can help i would appreciate it!
I am trying to add File type input in angular material form but I am getting error as mat-form-field must contain a MatFormFieldControl.
I tried adding matInput in the input tag then too I am getting error as mat-form-field must contain a MatFormFieldControl what are ways to add file upload type input inside the angular material form?
<mat-sidenav-container>
<mat-sidenav-content>
<form>
<mat-form-field appearance="outline">
<mat-label>Media Title</mat-label>
<input matInput placeholder="Enter your name">
</mat-form-field>
<mat-form-field>
<button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
<input hidden (change)="onFileSelected()" #fileInput type="file" id="file">
</mat-form-field>
</form>
</mat-sidenav-content>
</mat-sidenav-container>
app.module.ts
import { AngularMaterialModule } from './material.module';
import { MatInputModule, MatFormFieldModule } from '#angular/material';
imports: [
BrowserModule,
BrowserAnimationsModule,
AngularMaterialModule,
MatInputModule,
MatFormFieldModule
],
File Upload input should be added inside the form.
Output:
Angular Material supports only a handful of input types and file type is not one of them. You can check more at:
https://material.angular.io/components/input/overview#supported-code-lt-input-gt-code-types
You need to add file type outside of <mat-form-field>
I used HashRouter from react-router-dom.
When I use Router pages are
not found.
what is the best way to remove HashRouter from URL?
My server side project is asp.net MVC and Use webapi2.
IIS6
In App.js file -
import React, { Component } from 'react'
import './App.css'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Header from './component/header/header'
import Test from './component/test/test'
import Speaking from './component/test/speaking/speaking'
import Demo from './component/test/speaking/demo/demo'
class App extends Component {
render () {
return (
<Router>
<div >
<Header />
<Switch>
<Route path='/' component={Demo} />
<Route path='/test' component={Test} />
<Route path='/Speaking' component={Speaking } />
</Switch>
</div>
</Router>
)
}
}
export default App
I added the below polyfills. However no luck on safari, it works fine on chrome.
The angular material form and animation works if I delete *ngfor from HTML
I am using angular 4.2.4
I read some posts where the advise is given to add the following:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?
features=Intl.~locale.en"></script>
Before the other libraries, however as I am quite new to angular and MEAN NODE js I am not sure where I am supposed to add this line.
I added it on the HTML page (this didn't do anything, didn't give any errors nor did it solve the issue)
I will try it with a seprate js file, however I am afraid this is not going to work. Any ideas?
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'web-animations-js';
import 'intl';
import 'intl/locale-data/jsonp/en';
my HTML file
<mat-form-field *ngFor="let key of arrayOfKeys"
class="halffull-width-
input">
<input id ="coin"
class="form-control"
matInput placeholder="Write Coin Name"
[(ngModel)]="key.coin"
formControlName="coin" required>
I want to create a theme for my angular 4 app using angular material 2.I created the initial part but it doesn't work. What have I done wrong in this code?
--Theme.scss
#import "~#angular/material/_theming";
#include mat-core();
$app-primary: mat-palette($mat-blue, 600);
$app-accent: mat-palette($mat-green, 600);
$app-warn: mat-palette($mat-red);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn );
#include angular-material-theme($app-theme);
-- Component
<button color="primary" class="mat-raised-button">Pick Up</button>
<button color="accent" class="mat-raised-button">Drop Off</button>
-- angular-cli.json
"styles": [
"styles.css",
"theme.scss"
]
It's a simple fix. Like I said in the comment on your question, just remove the underscore. Easy.
You should also use the mat-raised-button attribute instead of the class (if you're using 2.0.0-beta.11 and above).
<button color="primary" mat-raised-button>Pick Up</button>
<button color="accent" mat-raised-button>Drop Off</button>
If you're using 2.0.0-beta.10 or below, use the md-raised-button attribute.
<button color="primary" md-raised-button>Pick Up</button>
<button color="accent" md-raised-button>Drop Off</button>