Tag: angular-material2
Die Winkel-Material-Projekt ist eine Umsetzung von Material-Design in Eckig 2/4/5. Dieses Projekt bietet eine Reihe wiederverwendbarer, gut getestet und den Zugriff auf UI-Komponenten, basierend auf dem Material-Design-system. Verwenden Sie dieses tag NICHT für AngularJS Material Fragen.
Winkel-Material Dialog Rückgabewert
2 Antworten
Ich habe einen folgenden dialog Komponente (die ich öffnen mit dialog.open(MyDialogComponent) in einer anderen Komponente): export class MyDialogComponent implements OnInit { constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {} ngOnInit() {} } Ich weiß, ich kann keine Daten an die aufrufende
Winkel-Material 2 - Umgang mit mehreren Validierungs-Fehlermeldungen
2 Antworten
Ich bin erstellen Sie ein Formular mit Winkel-Material 2. Ich bin mit Vorlagen form und ich haben die E-Mail-Eingang, die zwei Prüfer (erforderlich und E-Mail). In der doc für die input-Komponente (https://material.angular.io/components/component/input) er sagt nur: "Wenn ein
Eckig Material MatTableDataSource mit Firestore
3 Antworten
Ich habe derzeit eine Daten-Tabelle wird gefüllt mit Daten aus Firestore. Ich habe auch MatTableDataSource zu implementieren, Paginierung, Sortierung und Filterung. Alle 3 funktionieren, aber für einige Grund meine Daten nur Lasten einmal, wenn die Seite aktualisiert
md-Menü override default max-Breite im Winkel 2
2 Antworten
Ich bin mit Winkel-2 , Eckig-Material, und ich bin bereit zum anzeigen von mehr Daten im md-Menü und, daher, ich muss die max-Breite des md-Menü auf einen höheren Wert. Seine default-Wert ist 280px. <img src="/assets/images/ic-notifications.png" [mdMenuTriggerFor]="appMenu"/> <md-menu
Eckig Material 2 Spinner mit 4 Eckig
3 Antworten
Mit Hilfe der bestehenden eckig material tutorial auf coursetro, ich war in der Lage, um zu versuchen, http-und subscribe-Szenarien mit Winkel-4 & Winkel Material steuert. Wie ich das abrufen alle Fotos auf den ersten Platz sehe ich
Angular2 Material2 <md-spinner - > nicht zeigen, aber funktioniert
5 Antworten
Meine Vermutung ist, dass meine css nicht korrekt, aber leider kann ich nicht herausfinden. HTML: <div *ngIf="loading"> <md-progress-circle mode="indeterminate" color="warn">Loading...</md-progress-circle> </div> <md-list> <md-list-item *ngFor="let incident of incidents"> <h3 md-line> {{name}} </h3> <p md-line> <span>{{date}} > </span> <span>{{text}}</span>
Wickelunterlage-wählen Sie mit dem Pfeil-und-Matte-wählen Sie unterstreichen sich
2 Antworten
Bisher habe ich versucht viele verschiedene Dinge, wie: /deep/ .mat-select:focus .mat-select-trigger .mat-select-arrow { color: #63961C; } /deep/ .mat-select:focus .mat-select-trigger .mat-select-underline { background-color: #63961C; } Oder : /deep/ .mat-select.mat-focused .mat-select-trigger .mat-select-arrow { color: #63961C; } /deep/ .mat-select.mat-focused .mat-select-trigger
Unit-Tests angular2 Komponente mit importierten Modul
3 Antworten
Ich versuche zu schreiben, einen test auf eine Komponente, die verwendet eckig-material2, aber wenn ich es in mein testModule Erklärungen ich erhalten: Error: Template parse errors: 'md-card-title' is not a known element: 1. If 'md-card-title' is an
ändern Sie die Funktion auf md-select funktioniert nicht? angular2
2 Antworten
Dies ist die html: <md-select placeholder="Veileder {{i+1}}" (change)="updateSupervisorList(i)"> <md-option *ngFor="let supervisor of displayedsupervisorList" >{{supervisor}}</md-option> </md-select> Dies ist die Methode in der .ts-Datei (displayedsupervisorList ein string mit Namen) updateSupervisorList(i: number){ console.log("updatesupervisorlist"); this.displayedsupervisorList.splice(i,1); } Wenn ich eine option wählen,
Deaktivieren von float für mdInput Textfeld
5 Antworten
In einer Eckigen 4 (Material) app, ich habe ein Textfeld für die Suche. Wenn ich in dem Feld, ein zweites Feld angezeigt, in dem eingegeben text. Dieses neue Feld schwebt, als ich die Seite scrollen. Wie deaktiviere
Ausgewählte Optionen mit md-Auswahl und Material-Design für Eckige
1 Antworten
Wie kann ein Standardwert (D. H. ausgewählt) sein option festgelegt werden Wählen Sie Komponente bei der Verwendung Material Design für Eckige? <md-select placeholder="Angular2 Material"> <md-option>One</md-option> <md-option selected>Two</md-option> <md-option ng-selected="true">Three</md-option> </md-select> Suche SO führen Sie mich an: Eckig
Vertikale tabs mit kantigem Material
2 Antworten
Mit der richtigen Eckig Material Richtlinie, wie ändere ich die Richtung, die vertikale? Beginnend mit vertikalen Registerkarten: Dann ablegen möchten, um den Inhalt unter Matte-wählen Sie im dropdown -: EDIT: werden die arbeiten auf die Anpassung https://stackoverflow.com/a/43389018
So aktivieren oder deaktivieren Sie eine beliebige Taste im Winkel 2 basiert auf Pflicht-und optionale Feld
3 Antworten
Ich will das mein Speichern-Knopf aktiviert werden, wenn die Platzhalter-Wert 'Optional'.Wenn der Wert ist 'Obligatorisch' den Speichern-button sollte deaktiviert und aktiviert nur wenn ich geben Sie einen Wert für das Feld. Mein template- <md-input name="" [placeholder]="isOptional()"></md-input> <input
ändern eckig material datePicker-Symbol
2 Antworten
Frage ich mich, ob es möglich ist, ändern Sie das angezeigte Symbol mit dem datePicker von kantigem material. Dies ist der code aus dem Winkel material docs. <md-input-container> <input mdInput [mdDatepicker]="picker" placeholder="Choose a date"> <button mdSuffix [mdDatepickerToggle]="picker"></button>
Wie zu Komponieren Eckig Material form-control-Komponenten
2 Antworten
Den code unten zeigt ein Autocomplete form-Steuerelement, das ermöglicht die Auswahl von einem US-Bundesstaat. <mat-form-field class="example-full-width"> <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl"> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let state of filteredStates | async" [value]="state.name"> <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25"
Mit Winkel Material-Matte-AutoVervollständigen-ohne ReactiveForm
1 Antworten
Ich versuche es mal mit <mat-autocomplete> Kantige Material (nicht AngularJS) ohne Verwendung einer reaktiven form. Aber all Ihre Beispiele verwenden reaktive Formen... Was ich versuche zu tun: 1. wenn etwas eingegeben wird, in der mat-input, machen Sie
Eckig Material 2 md-Karte responsive Spalten
3 Antworten
Ich bin auf der Suche nach einer Eckigen 2/4 Beispiel für dieses layout. Ich muss beginnen mit zwei Spalten von Karten (2 in der linken Spalte, 1 in der rechten col). Allerdings, wenn der Bildschirm ist klein,
Nach upgrade auf Winkel 6/Material 6 warum bin ich die Verkleidung "mat-input-container kein element bekannt'?
2 Antworten
Code unten lief gut, bevor ich ein Upgrade auf 6. Nicht sicher, was sich geändert hat in zwischen! Ich habe die benötigten Module importiert MatInputModule, MatSelectModule, MatFormFieldModule <mat-input-container> <mat-select placeholder="Sort By" formControlName="sortBy"> <mat-option *ngFor="let sortByObject of sortByList"
Eckig Material Grid-Layout
2 Antworten
Was sind vordefinierte Klassen für das grid-layout in Eckig Material? Wir haben "row","col-sm-4" etc.. Klassen in der bootstrap. Wir haben diese Art von Klassen in Eckig Material 2? Danke. material.eckig.io/components/grid-Liste/ - übersicht InformationsquelleAutor hari | 2017-10-03
Eckig material AutoVervollständigen nicht funktioniert, keine Fehler gezeigt
1 Antworten
Habe ich schon umgesetzt mein autocomplete, keine Fehler, scheint alles ok, aber absolut nichts passiert. Ich geben Sie etwas in das Eingabefeld und keine Aktion zu geschehen scheint, ist nichts an der Konsole angezeigt. HTML <form> <mat-form-field>
MatPaginator bekommt undefined
5 Antworten
Habe ich repliziert diesem Fall: Winkel-5 Material Tabelle nicht abrufen der Daten vom service Aber wenn ich versuche, access jede Eigenschaft von paginator bekomme ich undefined Fehler von diesem objet. Irgendwelche Ideen? Dank InformationsquelleAutor Kram_ | 2017-12-01
So fügen Sie eine position Strategie, um ein overlay? (Winkel-Werkstoff)
1 Antworten
Wie auf der Erde füge ich eine position Strategie ( ConnectedPositionStrategy ), um eine überlagerung? (Ich bin mit Eckig-Material.) Ich habe versucht, die Angabe über die positionStrategy - Eigenschaft und übergeben es in overlay.create(). import { Overlay,
Wie unterschiedliche Breite für md-Gitter-Fliese
2 Antworten
Verwende ich neue Winkel-Material. Dieser code produzieren grid mit zwei Spalten: <md-grid-list cols="2" rowHeight="10"> <md-grid-tile></md-grid-tile> <md-grid-tile></md-grid-tile> </md-grid-list> Wie stellen 20% der Breite bis zu den ersten Spalten und die verbliebenen 80% auf den zweiten? InformationsquelleAutor Daniel |
Was könnte der Grund sein, Gewinkelt 5 + Material 2 sind sehr sehr langsam?
2 Antworten
Ich weiß, das ist vielleicht nicht eine sehr gute Frage. Aber ich weiß wirklich nicht, was zu tun ist und ich bin auf der Suche nach Gründen. Ich bin mit meinem custom-Winkel-5 + Material 2 Anwendung lokal
So ändern Sie die Farbe der radio-button eckig material 2
3 Antworten
Ich habe Mühe mit dem nächsten problem. Ich versuche, ändern Sie die Farbe der eckigen material 2 radio-button auf die RICHTIGE Art und Weise, ohne überschreiben von css. Standardmäßig verwendet es die Akzent-Farbe des Materials-Thema, aber ich
Iterieren zwei Elemente in einer Zeile mit ngFor
2 Antworten
Ich habe ein array von Zeichenketten, und ich will alle zwei von Ihnen in einer Reihe mit ngFor. Hier ist, was ich versucht habe: <div class='row wow fadeInUp' *ngFor='let index of myArray;let i = index;'> <div class='col-md-6'>
Winkel-Material2 mat-list-Element-Inhalt position
5 Antworten
Ich versuche die unten zu überschreiben Winkel-material2 mat-list-Element-Inhalt-Stil-Liste basiert auf index. Komponente HTML: <div fxLayout="column" fxLayoutAlign="start center" fxFill> <mat-list dense class="mat-list"> <mat-list-item *ngFor="let message of messages" class="{{message.float}}"> <mat-label>{{message.text}}</mat-label> </mat-list-item> </mat-list> </div> Komponenten-CSS - .left .mat-list-item-content { float:
So ändern Sie die Höhe der Matte-Card-element eckig-material-design-Komponente
3 Antworten
Ich habe den folgenden code in eckigen 5-app. was produziert die Reihenfolge der Matte-Karte, wie unten Bild mit *ngFor. Aber die Höhe der alle Matte-Karte ist die gleiche wie die Höhe der ersten Matte-Karte . <div fxLayout="row">
Winkel-Material - Wie eine QuickInfo hinzufügen, um eine deaktivierte Taste
3 Antworten
Ich habe bemerkt, dass die Richtlinie matTooltip funktioniert nicht auf einem deaktivierten button. Wie kann ich es erreichen? Beispiel: <button mat-raised-button [disabled]="true" matTooltip="You cannot delete that"> <mat-icon>delete</mat-icon> </button> Für eine Schaltfläche aktiviert, es funktioniert perfekt: <button mat-raised-button
Winkel-2 material verschachtelte md-list-item
2 Antworten
Verwendung von Winkel-2 mit material-design, das versucht, um verschachtelte Listen, in sidenav Ich habe code wie <md-sidenav #sidenav class="sidenav" mode="over" opened> <md-nav-list> <md-card class="user-card"> <md-card-header> <div md-card-avatar class="user-avatar"></div> </md-card-header> </md-card> <md-divider></md-divider> <md-list-item *ngFor="let category of ategories"> <a
Winkel-material 2-Karte navigieren können
4 Antworten
machen, wie der Inhalt in der Matte-card-material 2-Komponenten-scroll-in der Lage ? Ich habe nichts finden auf der material 2 website InformationsquelleAutor ankur ratra | 2017-10-24
Winkel-CDK: so stellen Sie die Eingänge in einer ComponentPortal
3 Antworten
Ich würde gerne die neue Portal aus material CDK zu injizieren, dynamische Inhalte in mehreren Teil eines Formulars. Ich haben eine komplexe form, Struktur und das Ziel ist, eine form, die angeben, dass mehrere Ort, wo sub-Komponenten
Erstellen Sie eine Reaktionsschnelle Symbolleiste mit Winkel-Material
4 Antworten
Habe ich eine Symbolleiste mit Eckig-Material. Allerdings ist es nicht responsive. Wie kann ich die Symbolleiste reaktionsschnell Weg? Code für die Symbolleiste: <md-toolbar color = "primary"> <button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> Angular Concepts</button> <button md-button
Winkel-Material-icons funktioniert nicht
8 Antworten
Habe ich installiert, Material für Winkel -, Ich importiert habe auf meinem app Modul MatIconModule (mit import { MatIconModule } from '@angular/material/icon';) Habe ich es unter meine ngmodule Einfuhren mit: @NgModule({ imports: [ //... MatIconModule, //... Habe
Eckige Form Material Validation
1 Antworten
Wenn die Felder in meinem FormGroup sind Modell-gebunden, ala [(ngModel)], und werden aufgefüllt auf die Seite laden, z.B. weil ein service, mein Submit-Button, der ist bewacht wie [disabled]="biodataForm.status !== 'VALID'" nicht deaktiviert werden. Wenn das Formular kommt
Winkel-5 material 2 - auto-vervollständigen, um Daten aus externen api
1 Antworten
Ich bin mit Winkel-5 und material 2. In der ts-Datei, habe ich diese proeperty: filteredOptions: Observable<any>; Diese Eigenschaft ist ein array von Werten, um zu zeigen, in das AutoVervollständigen-Feld. [{ id:'1', name: 'teste 1'}, {id:'2', name: 'teste
Ändern Stil overlay-container
3 Antworten
Ich benutze ein git-Projekt für eine virtuelle Tastatur (https://ngx-material-keyboard.github.io/demo/). Und ich habe einige Probleme, um es läuft auf ein kleines Gerät mit 450*250 pixel. Am Ende fand ich die notwendigen änderungen in der css, wenn ich es
Angular2 Material Dialogfeld css -, dialog-Größe
8 Antworten
Angular2 material team kürzlich die MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md Ich würde das gerne ändern den Blick und fühlen sich über die angular2 material-dialog. Zum Beispiel, zu ändern, die Feste Größe des popup-Behälter und stellen Sie es Scrollbar, die Hintergrundfarbe
Alle Bilder in der Matte-card-Bild dieselbe Größe, aber korrekt skaliert
1 Antworten
Diese in der Regel nicht ein problem, sondern nur Material 2 ist sehr unter-dokumentiert atm so dass ich Probleme damit alle Bilder die gleiche Größe, aber richtig die Größe mit Fenster ändern Alle Bilder, die ich habe,
So ändern Sie unterstreichen die Farbe der md-input-container in angular4?
10 Antworten
Habe ich gelesen, die Dokumentation für diese (https://material.angular.io/components/input/overview) gibt Es einen Abschnitt, der sagt, wie ändern Sie die Farbe der Linie an der Unterseite des md-input-container. Aber es ist mir nicht klar, was ein Attribut ist, noch
Set-mat-Menü Stil
2 Antworten
Ich habe eine Menge Probleme mit diesem, und die scheinbare Lösungen nicht funktionieren oder im das tun etwas falsch (wahrscheinlich letzteres). Möchte ich style meine mat-menu und die mat-menu-item's, ich habe versucht, dies zu tun: ::ng-deep .mat-menu{
Mehrere Matte-Tabelle mit MatSort innerhalb der gleichen Komponente
5 Antworten
Ich habe 2 material 2 Tabellen in der gleichen Komponente mit der Sortierung. Ich kann nicht einen Weg finden, weisen Sie die MatSort Richtlinie, um Ihre eigene Tabelle. Ich bin nur in der Lage zu verwenden MatSort
Eckig Material Tabelle 2 server-Seite Paginierung
3 Antworten
Ich versuche zu Erreichen, Eckig Material 2, MatPaginator server side paging. Wie kann ich das erreichen? Unten ist das code-Beispiel: <div class="example-container mat-elevation-z8"> <mat-table #table [dataSource]="dataSource"> <!-- Position Column --> <ng-container matColumnDef="position"> <mat-header-cell *matHeaderCellDef> No. </mat-header-cell> <mat-cell
Winkel-5 material - form-Felder am stecken 180px
4 Antworten
Ich habe ein Formular erstellen, in einen dialog mit material, Formen, aber ich kann nicht scheinen, um die Eingaben breiter als 180px trotz der folgenden zahlreichen Beispielen einschließlich https://material.angular.io/components/input/example. Ich sicher, dies ist ein ziemlich standard-css-Sache, aber
MatDialog Fehler: Kein provider für InjectionToken mat-dialog-scroll-Strategie
1 Antworten
bei anderem Anbieter: MatDialog in die Constructur constructor(groupService: GroupService, public dialog: MatDialog) Bekomme ich folgende Fehlermeldung zur Laufzeit Error: No provider for InjectionToken mat-dialog-scroll-strategy! Ich habe die Matdialog in der "app.- Modul.ts" Brauche ich einen anderen Anbieter
Material 2 Form-Control Select funktioniert Nicht mit Async Source
2 Antworten
Ich bin mit Eckigen 4.3.4 mit Material 2.0.0-beta.12 und ich habe Probleme beim erstellen einer Matte-wählen Sie zum generieren eines dynamischen Matte-option-Liste von einer asynchronen Quelle. Alles, was ich bekommen ist der Platzhalter und das dropdown nicht
"Fehler: Kein provider für Overlay!"
5 Antworten
In meinem Angular 2.0.0-rc.7 + Angular Material 2.0.0-alpha.8-1 Anwendung gebaut, mit Angular CLI 1.0.0-beta.11-webpack.9-1, bekomme ich die folgende Fehlermeldung nach dem Upgrade von rc.5+alpha.7-4 (über die 1.0.0-beta.11-webpack.8 NG CLI): main.bundle.js:44545 Error: No provider for Overlay! at NoProviderError.Error
Wie verwenden von md-Tabelle mit Dienstleistungen im Winkel 4
1 Antworten
Ich bin ganz neu in der eckigen Welt, und ich bin versucht, die neue md-table-Komponente in Eckig Material 2 mit dem Winkel 4. Ich habe ein service aus einer API, die ruft einfach arrays von Inhalten. Jetzt
Entfernen der ausgewählten Zeilen aus der Tabelle in den Winkel-2 mit Winkel-Werkstoff-Tabelle
3 Antworten
Ich versuche zu implementieren Sie eine einfache Tabelle in den Winkel-2 mit Winkel material-Auswahl-Tabelle . Habe ich eine Schaltfläche, um die ausgewählten Zeilen aus der Tabelle.Aber beim klicken " des button-wie lösche ich die Zeilen ? Unten
Bekommen Eckig Material v2 regler den Wert und schieben Sie
2 Antworten
Ich bin mit Winkel Material-v2 md-slider in einer Komponente @Component({ selector: 'ha-light', template: `<md-slider min="0" max="1000" step="1" [(ngModel)]="myValue" (change)="onChange()"></md-slider> {{myValue}}`, styleUrls: ['./light.component.css'] }) export class LightComponent implements OnInit { myValue = 500; constructor() { } ngOnInit() {