我正在尝试更改Angular Material 2(alpha 6)中的默认主色.
我从这个官方文档中得到了一些想法.
我所在_default-theme.scss的node_modules > @angular2-material > core > style和紫色以下行更换颜色水鸭.
$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);
但是颜色青色仍然显示在页面中,粉红色从未出现过.我错过了什么？如何更改原色？
(我使用Angular Material 2 alpha 6和Angular 2 RC4)
此示例永远保留在屏幕上:
import {Component, ViewContainerRef} from '@angular/core';
import {MdSnackBar, MdSnackBarConfig} from '@angular/material';
@Component({
moduleId: module.id,
selector: 'snack-bar-demo',
templateUrl: 'snack-bar-demo.html',
})
export class SnackBarDemo {
message: string = 'Snack Bar opened.';
actionButtonLabel: string = 'Retry';
action: boolean = false;
constructor(
public snackBar: MdSnackBar,
public viewContainerRef: ViewContainerRef) { }
open() {
let config = new MdSnackBarConfig(this.viewContainerRef);
this.snackBar.open(this.message, this.action && this.actionButtonLabel, config);
}
}
如何让它在2秒后消失(以某种方式设置持续时间/超时)？
material-design snackbar angular-material2 angular2-material angular
Angular的GitHub页面显示了与Material Design相关的两个固定存储库:
该README.md对角/材料的标题为AngularJS应用材料设计.
我使用的是建立一个Angular2 Web应用程序的角度,CLI,并都安装并进口 @angular/material到app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material'
import { FlexLayoutModule } from '@angular/flex-layout'
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpModule,
FlexLayoutModule,
MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule …所以我正在遵循文档angular 2 material DataTables.起初,它正在使用文档中的提供代码.但是我稍微更改了代码,这样如果我要提供实际数据,就不会像跟踪角度材料的文档那么难,因为我已经习惯了.所以将所有导入注入我的TS File
import { Component, OnInit, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
导入角度数据表所需的所有导入.CdkTableModule也是我的进口materialModule
import { CdkTableModule } from '@angular/cdk/table';
@NgModule({
imports: [
CdkTableModule,
..... as so on..
],
exports: [
CdkTableModule,
..... as so on..
]
}) export class MaterialModule { …我正在使用角5和材料2.
在ts文件中,我有这个专业:
filteredOptions: Observable<any[]>;
此属性将具有要在自动填充字段中显示的值数组.
[{
id:'1', name: 'teste 1'},
{id:'2', name: 'teste 2'},
{id:'3', name: 'teste 3'
}]
这个值数组来自数据库,它将在用户输入内容后显示.
html文件:
## <form class="example-form">
## <mat-form-field class="example-full-width">
## <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
## <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
## <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
## {{ option.name }}
## </mat-option>
## </mat-autocomplete>
## </mat-form-field>
## </form>
ts文件示例:
this.filteredOptions = Observable<any[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith({}),
map(getArrayOfValue(val))
);
}
// it is going to call …有没有人知道如何以编程方式打开或关闭mat-select？作为api,有开放和关闭的方法但不知道如何从组件调用这些方法,并且没有任何示例在现场显示.
谢谢
我有以下代码
<form #createForm="ngForm">
<mat-form-field>
<mat-select placeholder="Favorite food"
matInput
[ngModel]
food="food"
#food="ngModel" required>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</mat-option>
</mat-select>
</mat-form-field>
</form>
<button [disabled]="!createForm.valid">submit</button>
由于我希望"选择"是必填字段,因此在呈现表单时应禁用"提交"按钮.但是,显示表单时会启用"提交"按钮.问题是什么？
angular2-forms angular-material2 angular5 redux-form-validators
有没有人知道如何在Angular WebApplication中使用/启用动画图标,这些图标显示在材料设计文档中:https://material.io/design/iconography/animated-icons.html#usage
我试图用cdkScrollable听ScrollEvent的mat-autocomplete。
我已经实现了如下代码片段。
<mat-form-field>
<input matInput placeholder="Notebook Page" formControlName="notebookPage" [matAutocomplete]="NBPageAutocomplete" >
</mat-form-field>
<mat-autocomplete #NBPageAutocomplete="matAutocomplete" cdkScrollable >
<mat-option *ngFor="let option of suggestedNBPageNames" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>constructor(public scroll: ScrollDispatcher) {}
ngAfterViewInit() {
this.scroll.scrolled().subscribe((data: CdkScrollable) => {
console.log(data);
//make an HTTP call when it reaches to the end, to add some more data
});
}订阅后事件未触发this.scroll.scrolled()。
这几天我一直在关注这个问题，网上没有找到任何相关信息。
请帮我。
我正在尝试使用 Angular Material 和 Angular 6 的第 7 版制作自定义 MatFormFieldControl。自定义输入是一个重量输入，它有一个值（输入类型 =“数字”）和一个单位（选择“kg”，“ G”，...）。它必须放置在 mat-form-field-control 中，使用反应式表单 (formControlName="weight") 并支持错误状态 ( <mat-error *ngIf="weightControl.hasError('required')">error<...>)，甚至使用自定义验证器。
我写了这个实现：
重量-input.component.html
<div [formGroup]="weightForm">
<input fxFlex formControlName="value" type="number" placeholder="Valore" min="0" #value>
<select formControlName="unit" [style.color]="getUnselectedColor()" (change)="setUnselected(unit)" #unit>
<option value="" selected> Unità </option>
<option *ngFor="let unit of units" style="color: black;">{{ unit }}</option>
</select>
</div>
重量-input.component.css
.container {
display: flex;
}
input, select {
border: none;
background: none;
padding: 0;
opacity: 0;
outline: none;
font: inherit;
transition: 200ms opacity ease-in-out;
}
:host.weight-floating input …