标签: angular-material2

我遵循了官方指南并创建了app-theme.scss以下内容:

@import '~@angular/material/theming';    
@include mat-core();    
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);    
$candy-app-warn:    mat-palette($mat-red);    
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);    
@include angular-material-theme($candy-app-theme);

内容styles.css:

@import './app-theme.scss';

但是,我在编译期间总是遇到以下错误:Module not found: Error: Can't resolve '@angular/material/theming'.我该怎么做才能让它发挥作用？

我想创建一个mat-dialog默认样式mat-button来关闭对话框.一切正常,但按钮缺少Angular Material应用的Material Design样式.

我如何获得展示的风格？AFAIK我根据需要导入了所有模块,并正确设置了Angular Material的每个部分,包括主题.

my-dialog.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-dialog',
  templateUrl: './my-dialog.component.html',
  styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-dialog.component.html:

<h1 mat-dialog-title>Lorem Ipsum</h1>
<div mat-dialog-content>
  ...
</div>
<button mat-button mat-dialog-close>Close</button>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatDialogModule, MatButtonModule } from …

我有一个带有输入的mat-form-field,我想添加一个自定义样式,但是我在官方Angular Material网站上找不到任何关于此的文档.

我最终的目标是:

• 选择输入框后更改下划线颜色
• 删除浮动标签(如果可能 - 我知道这是一个功能,但现在已弃用).

我不是最适合Angular的人,但是如果需要改变JS中的东西,那么我总能给它最好的机会.

我只需要一点指导.

现行代码:

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

目前的CSS:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}

注意:我在经典HTML表中成功完成了FormArray,如下所示.我希望在Angular Material表中有一个FormArray并用数据填充它.我尝试了与经典HTML表格相同的方法,但我无法编译它,因为错误"无法找到带有'name'的列'''"

<div class="form-group">
<form [formGroup]="myForm" role="form">
  <div formArrayName="formArrList">
    <table>
      <tr>
        <th>Name</th>
        <th>School</th>

      </tr>

      <tr *ngFor="let list of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">
        <td>
          <div class="col-sm-6">
            <input class="form-control" type="text"  formControlName="name"/>
          </div>
        </td>
        <td>
          <div class="col-sm-6">
            <input class="form-control" type="text"  formControlName="school"/>
          </div>
        </td>
      </tr>
    </table>
  </div>
</form>

我尝试在Angular Material Table中有一个FormArray这是我的HTML文件

<div>
<form [formGroup]="myForm" role="form">
  <ng-container formArrayName="formArrList">

  <mat-table #table [dataSource]="myDataSource">
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>


    <ng-container *ngFor="let detailsItems of myForm.get('formArrList').controls;let i = index" [formGroupName]="i">


    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let …

我想使用Angular Material Datepicker来获取我的页面的日期.我使用此代码,但无法弄清楚如何正确访问所选值.

<md-input-container>
  <input mdInput [mdDatepicker]="myDatepicker">
  <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
</md-input-container>
<md-datepicker #myDatepicker></md-datepicker>

我[value]在输入中尝试了该字段但是如何才能将日期发送到我的后端？谢谢.

标准输入为:

 <input type="number" placeholder="Hours">

Angular Material Design中有什么东西吗？

我使用Angular最新版本

我尝试过这个,但它只是简单的输入:

<md-input-container>
  <input mdInput type="number" placeholder="Favorite food" value="Sushi">
</md-input-container>

应该是 < md-input-container input="number">？ot input type="number">？

我使用角度4与角度材料相结合.

我正在使用sidenav容器路由器和自定义生成的菜单:

<mat-sidenav-container>
<mat-sidenav #sidenav>
    <app-menu></app-menu>
</mat-sidenav>
<router-outlet></router-outlet>
</mat-sidenav-container>

在菜单组件内部我使用默认的角度4路由器链接:

<ul>
  <li *ngFor="let hero of heroes">
    <a mat-button [routerLink]="['/hero/', hero.id]" queryParamsHandling="merge">
      {{hero.name}}
    </a>
  </li>
</ul>

我想要做的是Material sidenav在点击其中一个路由器链接时关闭它.

我可以向你保证,如果没有点击事件路由工作正常,它就不会关闭我的sidenav,因为路由器插座位于侧面导航内.

但是,当我添加(click)="sidenav.close()"到a我的整个页面突然刷新,而不是只是跟随路由器链接.

我尝试了很多东西,但我似乎无法弄明白,希望有人可以帮忙!

我对[mat-dialog-close]的用法有点困惑.

所以,我有一个表格对话框.如果用户单击提交按钮,则验证表单.如果输入有效,则关闭对话框并提交表单.但是,如果输入无效,则对话框将保持打开状态并显示错误消息.为此,我想使用[mat-dialog-close],因为它在官方文档中描述,使用如下:

<button mat-button [mat-dialog-close]="true">Yes</button>

我以为我可以传递一个布尔值,标签是否有效取决于变量的布尔值.但是,这不起作用.我试过这样的:

<button type="submit" (click)="addUser()" [mat-dialog-close]="formisvalid" mat-button>Submit</button>

我把变量传给了它formisvalid.它的值是true除非输入无效.但是现在对话框始终关闭,无论其值如何formisvalid.我也试过替换它false.我认为无论发生什么事情,对话框都会保持打开状态,但它也会一直关闭.

所以,我的问题是:我是否错误地使用了[mat-dialog-close],或者我只是做错了什么？如果使用[mat-dialog-close]指令无法实现这一点,那么实现我想要做的事情的另一种方法是什么？

谢谢你的时间。

我有三个组成部分：

1. 主页面组件
2. 一个按钮谁使用 angular/cdk/overlay overlay.create用于创建第三个组件的
3. 附在显示文本的按钮上的小框

目标是在用户单击按钮时显示有关页面的信息。我不能使用@Input，因为格式 ( h1,p信息，分量）将为每个页面更改。

我的问题

如何将 HTML 从主组件传递到小框组件？

或者

我怎样才能截取内容 ng-content并将其发送到小盒子组件？

主要的

<app-btn-info>
   <mat-icon>info</mat-icon>
   <h1>Test</h1>
   <p>This is a test</p>
</app-btn-info>

按钮

@Component({
  selector: 'app-btn-info',
  templateUrl: './btn-info.component.html',
  styleUrls: ['./btn-info.component.scss']
})
export class BtnInfoComponent {

  @ViewChild('button') button: MatIcon;

  constructor(private overlay: Overlay) { }

  public onClick() {
    this.overlay.create({
      positionStrategy: this.overlay.position().connectedTo(this.button._elementRef,
        { originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'top' }
      )
    });
  }

}

<button #button mat-icon-button color="warn" …

我正在使用带有主题的 Angular Material。

$my-theme-redish: (...
$my-theme-red: (...
$my-theme-celeste: (...

$my-theme-primary: mat-palette($my-theme-redish);
$my-theme-accent:  mat-palette($my-theme-celeste);
$my-theme-warn:    mat-palette($my-theme-red);

$my-app-theme: mat-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

现在我也想主题/更改border-radius. 我可以在主题中做到这一点吗？我没有找到任何关于此的文档。

我尝试通过使用::ng-deep或直接寻址某些组件来进行主题化：

$my-theme-redish: (...
$my-theme-red: (...
$my-theme-celeste: (...

$my-theme-primary: mat-palette($my-theme-redish);
$my-theme-accent:  mat-palette($my-theme-celeste);
$my-theme-warn:    mat-palette($my-theme-red);

$my-app-theme: mat-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

但没有任何效果。