标签: angular-material2

其他优秀的www.materialpalette.com上的下载链接不支持 Angular 2。下载例如 sass 给出：

$primary-color-dark
$primary-color
$primary-color-light
$primary-color-text
$accent-color
$primary-text-color
$secondary-text-color
$divider-color

寻找有关如何将这些映射到 Angular 2 的建议：

$app-primary: mat-palette(…);
$app-accent: mat-palette(…);
$app-warn: mat-palette(…);

我在 Angular4 项目中使用 MdTooltipModule 向用户显示工具提示。我包括这样的工具提示：

   <a *ngFor="let option of optionsToggle"
       mdTooltip="{{option.name | translate}}"
       mdTooltipShowDelay="1000"
       mdTooltipPosition="left">
      <i class="material-icons">{{option.icon}}</i>
    </a>

虽然这工作正常，但我想为我的整个项目全局设置一次 showDelay，并且不要一直重复这个。有什么简单的方法可以实现这一目标吗？我想使用绑定 [mdTooltipShowDelay]="value" 可能会有所帮助，但这不会访问静态变量，我不想在每个组件中初始化它。

正如您在此示例中看到的，当您更改选项卡时，动画上会出现垂直滚动条。

<md-tab-group>
  <md-tab label="Tab 1">
    <div style="height: 2000px">Content 1</div>
  </md-tab>
  <md-tab label="Tab 2">
    <div style="height: 500px">Content 2</div>
    <div>Content 2</div>
  </md-tab>
</md-tab-group>

是否可以删除该滚动条（仅在选项卡转换时）？

我正在使用 Angular 4 Reactive Forms@angular/material版本2.0.0-beta.10。我需要以编程方式使md-error消息出现。

在必填字段上，当用户在没有输入任何文本的情况下留下输入时，我会显示md-error“此字段是必填字段”。见代码：

<md-form-field>
    <input mdInput type="text"
           formControlName="PartNumber"
           placeholder="Part Number"
           maxlength="250"
           required />
    <md-error *ngIf="formGroup.controls['PartNumber'].hasError('required')">
        Part Number is <strong>required</strong>
    </md-error>
</md-form-field>

我都试过：

this.formGroup.markAsTouched();
this.formGroup.markAsDirty();

在md-error下面的文字<input>时，我叫不出现markAsTouched()或markAsDirty()。

如何以编程方式触发触摸状态以显示错误消息？

我在Angular 4项目中使用Angular Material 2 Autocomplete.在此示例中,如何实现自动完成值从HTTP调用加载？

任何人都可以给我一个Plunker演示吗？谢谢

我只是试图隐藏一个 Angular material 2 表statusid标题和列，如下所示。

        <mat-table class="mat-elevation-z1" #table [dataSource]="dataSourceHE">
            <ng-container hidden="hidden" cdkColumnDef="statusid">
                <mat-header-cell hidden="hidden"> Id </mat-header-cell>
                <mat-cell hidden="hidden"> {{row.statusid}} </mat-cell>
            </ng-container>
         </mat-table>

但这不能正常工作。如果可能的话，我该怎么做？

我正在尝试使用inputangular-material2。如何防止focus在input如果我按知名度按钮？

在这里你可以看到它是如何工作的：material.angular.io

在按下按钮之前

按下按钮后

  <mat-form-field>
    <input
      #mPswd
      matInput
      type="password"
      placeholder="??? ??????-??????"
      [type]="hide ? 'password' : 'text'"
    >
    <mat-icon
      class="unselectable"
      matSuffix
      (click)="hide = !hide"
    >
      {{hide ? 'visibility' : 'visibility_off'}}
    </mat-icon>
  </mat-form-field>

我觉得这是一个愚蠢的问题，但我就是不明白为什么它不起作用......

我有一个材质 2 对话框，这是对话框组件

import { AfterViewInit, Component, Injectable } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatDialog, MatDialogRef } from '@angular/material';

import 'rxjs/add/operator/toPromise';

// services
import { DialogService } from '../../../services/dialog.service';

@Component({
  selector: 'app-dialog-asset-upload',
  templateUrl: './dialog-asset-upload.component.html',
})

@Injectable()
export class DialogAssetUploadComponent {

  constructor(private dialog: MatDialog, private dialogS: DialogService) { }

  // open dialog
  open(): Promise<any[]> {

    // open dialog
    let dialogRef = this.dialog.open(DialogAssetUploadComponentDialog, {});

    return dialogRef.afterClosed().toPromise().then(res => {

      console.log('in asset upload',res);
      return res;
    });
  }
} …

我想注册一个新的 Material2 图标，我有这个代码：

import {Component, OnInit} from '@angular/core';
import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  selector: 'app-control-panel',
  templateUrl: './control-panel.component.html',
  styleUrls: ['./control-panel.component.scss']
})

export class ControlPanelComponent implements OnInit {

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {

    console.log('registering  play button icon');  // << confirm

    iconRegistry.addSvgIcon('play_button',
      sanitizer.bypassSecurityTrustResourceUrl('assets/images/play-button.svg'));
  }

  ngOnInit() {
  }

}

上面的日志语句正在被命中。我有这个 HTML

  <button mat-raised-button color="accent">
    <mat-icon>play_button</mat-icon>
    Start Recording
  </button>

如果我使用现有的图标它可以工作，但如果我使用“play_button”它不起作用。

有谁知道可能会出什么问题？

我想根据为应用程序组件中的变量提供的值添加 mat-accordion "displayMode" 的属性。

我正在使用 ng-if 来制作它。但我收到错误。

<mat-accordion class="accord-align" *ngIf="displayType" then displayMode="{{displayType}}" ><br/>
<<Some tags and text here>><br/>
</mat-accordion&gt;<br/>

如果我提供这样的 *ngIf="displayType" 然后 displayMode="{{displayType}}"，那么它的显示错误说

compiler.es5.js:1694 Uncaught Error: Template parse errors:<><br/>
Parser Error: Bindings cannot contain assignments at column 30 in [displayType then displayMode={{displayType}}] in ng:///AppModule/AccordionComponent.html@1:38 ("&lt;div id="divi-align"&gt; <br/>
  &lt;mat-accordion class="accord-align" [ERROR -&gt;]*ngIf="displayType then displayMode={{displayType}}" &gt;
    &lt;mat-expansion-panel  class="panel1-align""): ng:///AppModule/AccordionComponent.html@1:38<br/>
Can't bind to '*ngIf' since it isn't a known property of 'mat-accordion'.<br/>
1. If 'mat-accordion' is an Angular component and it has '*ngIf' …