タグ付けされた質問 「angular-material2」

Angular 2プロジェクトでAngular Material Autocompleteコンポーネントを使用しようとしています。テンプレートに以下を追加しました。 <md-input-container> <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container> <md-autocomplete #auto="mdAutocomplete"> <md-option *ngFor="let state of filteredStates | async" [value]="state"> {{ state }} </md-option> </md-autocomplete> 以下は私のコンポーネントです。 import {Component, OnInit} from "@angular/core"; import {ActivatedRoute, Router} from "@angular/router"; import {FormControl} from "@angular/forms"; @Component({ templateUrl: './edit_item.component.html', styleUrls: ['./edit_item.component.scss'] }) export class EditItemComponent …

355 angular  typescript  angular-material2  angular-forms 

私たちは自社で独自のフォームフィールドコンポーネントを構築しようとしています。マテリアルデザインのコンポーネントを次のようにラップしようとしています。 フィールド： <mat-form-field> <ng-content></ng-content> <mat-hint align="start"><strong>{{hint}}</strong> </mat-hint> <mat-hint align="end">{{message.value.length}} / 256</mat-hint> <mat-error>This field is required</mat-error> </mat-form-field> テキストボックス： <field hint="hint"> <input matInput [placeholder]="placeholder" [value]="value" (change)="onChange($event)" (keydown)="onKeydown($event)" (keyup)="onKeyup($event)" (keypress)="onKeypress($event)"> </field> 使用法： <textbox value="test" hint="my hint"></textbox> これにより、おおよそ次のようになります。 <textbox placeholder="Personnummer/samordningsnummer" value="" ng-reflect-placeholder="Personnummer/samordningsnummer"> <field> <mat-form-field class="mat-input-container mat-form-field> <div class="mat-input-wrapper mat-form-field-wrapper"> <div class="mat-input-flex mat-form-field-flex"> <div class="mat-input-infix …

185 angular  angular-material2 

マテリアル2を使用して追加していmd-raised-buttonます。特定の条件が成立した場合にのみ適用したい。 例えば： <button md-raised-button="true"></button> 別の例：plunkerで基本的な動的反応フォームを作成しました。formArrayNameコントロールの配列に反応型のディレクティブを使用しています。formArrayName特定の条件がtrueになった場合にのみディレクティブを適用し、それ以外の場合はformArrayNameディレクティブを追加しません。 こちらがプランカーリンクです。

109 angular  angular-material  angular2-forms  angular2-directives  angular-material2 

オプションがすべて配列で定義されたオブジェクトであるマット選択があります。値をデフォルトのオプションの1つに設定しようとしていますが、ページがレンダリングされるときに値が選択されたままになります。 私のtypescriptファイルには以下が含まれます： public options2 = [ {"id": 1, "name": "a"}, {"id": 2, "name": "b"} ] public selected2 = this.options2[1].id; 私のHTMLファイルには以下が含まれます： <div> <mat-select [(value)]="selected2"> <mat-option *ngFor="let option of options2" value="{{ option.id }}"> {{ option.name }} </mat-option> </mat-select> </div> オブジェクトとIDの両方に設定selected2とvaluein mat-optionを試し、両方[(value)]と[(ngModel)]で使用しようとしましたmat-selectが、どれも機能していません。 マテリアルバージョン2.0.0-beta.10を使用しています

109 angular  typescript  angular-material2 

アンギュラマテリアルソース内の複数の場所にcdk、プレフィックスを持つelements / cssクラスがあります。 cdk角度のあるマテリアルコンテキストでの略語を知っている人はいますか？

108 angular-material2  angular-cdk 

アプリ全体で自社のブランドカラーを使いたい。 私はこの問題を発見しました：AngularJS 2-マテリアルデザイン- 申し立てによるとカスタムテーマを構築できるカラーパレットを設定します。Material2の定義済みカラーを使用したくありません。ユニークで特別なブランドカラーが欲しいです。自分でテーマを作成するより良い方法（正しい？）はあり_palette.scssませんか？ ブランドパレットのミックスインを作成する必要がありますか？もしそうなら-それを適切に行う方法のガイドはありますか？さまざまな色合いの意味は何ですか（50、100、200、A100、A200などの番号が付いています）？ このエリアに関する情報は大歓迎です！

98 angular  sass  material-design  angular-material2 

角度のあるマテリアルをインストールしました。 アプリモジュールMatIconModuleにインポートしました（とimport { MatIconModule } from '@angular/material/icon';） ngmoduleのインポートの下に次のように追加しました。 @NgModule({ imports: [ //... MatIconModule, //... すべてのスタイルシートをインポートしました また、実際に（使用しようとしている）アプリコンポーネントにインポートしました（import {MatIconModule} from '@angular/material/icon';先頭に別の行があります）。 ただし、マテリアルアイコンはまだ表示されません。 たとえば、次の行を使用します。 <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button> 私はこのようなものを期待しています： しかし、私はこれを取得します： 何か提案がありますか？

98 angular  angular-material  angular-material2 

Angular Material（Angular 4+を使用）に関して質問があります。コンポーネントテンプレートでコンポーネントを追加する<mat-horizontal-stepper>と、各ステップ内<mat-step>にコンポーネントをナビゲートするためのステッパーボタンがあります。そのようです... <mat-horizontal-stepper> <mat-step> Step 1 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> <mat-step> Step 2 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> <mat-step> Step 3 <button mat-button matStepperPrevious type="button">Back</button> <button mat-button matStepperNext type="button">Next</button> </mat-step> </mat-horizontal-stepper> 今、各ステップからボタンを削除<mat-horizontal-stepper>して、静的な位置またはの外側のどこかにボタンを配置することが可能かどうか疑問に思ってい<mat-horizontal-stepper>ます。コンポーネントのタイプスクリプトファイル内のコードを使用して前後に移動できます。アイデアを出すために、HTMLを次のようにしたいと思います <mat-horizontal-stepper> <mat-step> Step 1 </mat-step> <mat-step> Step 2 …

88 angular  angular-material  angular-material2 

ソートヘッダー付きの通常のAngularMaterial 2DataTableがあります。すべてのソートはヘッダーが正常に機能します。値としてオブジェクトを持つものを除いて。これらはまったくソートされません。 例えば： <!-- Project Column - This should sort!--> <ng-container matColumnDef="project.name"> <mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell> </ng-container> 注意してください element.project.name displayColumnの構成は次のとおりです。 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol']; に変更'project.name'し'project'ても機能しません"project['name']" 何が足りないのですか？これも可能ですか？ Stackblitzは次のとおりです。AngularMaterial2DataTable ソートオブジェクト 編集： すべての回答をありがとう。私はすでにそれを動的データで動作させています。したがって、ネストされた新しいプロパティごとにswitchステートメントを追加する必要はありません。 これが私の解決策です：（MatTableDataSourceを拡張する新しいデータソースを作成する必要はありません） export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> { sortingDataAccessor: ((data: WorkingHours, …

83 angular  angular-material2