angular-material

问题 I'm new to Angular material 2 and I'm accustomed to using bootstrap 4.1. So this question may seem simple, but how does one create a "container" in Angular material 2? For example in a bootstrap container in will create a left and right margin for the entire app, can this be achieved easily with Angular material 2? 回答1: Well it all depends on your layout. If you have all your content in one card, you don't need to mind about anything, the card will be nicely displayed thanks to its set width.

问题 I get the following error from Karma Jasmine: TypeError: Cannot read property 'afterClosed' of undefined I searched sincerely, but I could not find a solution in Stack Overflow or in other sources. This is how I open the MatDialog in my component: (Like documented) constructor(public dialog: MatDialog) {} public openDialog(): void { const dialogReference: MatDialogRef<any, any> = this.dialog.open(myDialogComponent, { width: '1728px' }); dialogReference.afterClosed().subscribe((result) => { })

问题 I get the following error from Karma Jasmine: TypeError: Cannot read property 'afterClosed' of undefined I searched sincerely, but I could not find a solution in Stack Overflow or in other sources. This is how I open the MatDialog in my component: (Like documented) constructor(public dialog: MatDialog) {} public openDialog(): void { const dialogReference: MatDialogRef<any, any> = this.dialog.open(myDialogComponent, { width: '1728px' }); dialogReference.afterClosed().subscribe((result) => { })

问题 I am trying to insert a notifications tooltip in my dashboard page, but the tooltip is not working. I am very new to Angular, so any leads regarding this will be highly appreciated. module.ts .. import {MatTooltipModule} from '@angular/material'; .. @NgModule({ .. MatTooltipModule ..}) component.html <div class="notifications"> <i class="fa fa-bell fa-2x" aria-hiden="true" matTooltip="Tooltip!"></i> </div> 回答1: To use Angular-Material Tooltip you will need: Import the BrowserAnimationsModule

问题 I have issue with action in my menu. I using material menu and icons for this project. The wain menu code looks like this: <mat-menu #rootMenu="matMenu" [overlapTrigger]="false"> <ng-template matMenuContent let-element="element"> <div *ngFor='let item of contextMenu' (click)="item.action(element)"> <button *ngIf='!item.seperator' mat-menu-item [disabled]="item.disabled"> <mat-icon> {{item.icon}} </mat-icon> <span> {{item.name}} </span> </button> <mat-divider *ngIf='item.seperator'></mat

问题 I need to remove the tooltip from the button. I'm using Angular/Electron for a desktop application. I have the following code in the .html file: <button class="close-button" (click)='closeDialog()'> <mat-icon class="svg-mat-icon" svgIcon="menu_cancel"></mat-icon> </button> This is the 'X' button in the upper-right corner of the screen. When I hover the mouse over it I get a tooltip "menu_Cancel" above it. How can I remove that tooltip? The button is self-explanatory, and the user does not

问题 I am using an Angular Material grid list to display around 500 - 1000 items. I am having some trouble styling it to my liking. Here is what the grid list looks like now: <md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height="16:9" md-gutter="12px" md-gutter-gt-sm="8px"> <md-grid-tile ng-repeat="orgOrder in vm.orgOrders | filter: query1" style="background: #f5f5f5" layout-align="center center" ng-click="vm.addOrder(orgOrder)"> <div layout="column"> <div> {

问题 I am using an Angular Material grid list to display around 500 - 1000 items. I am having some trouble styling it to my liking. Here is what the grid list looks like now: <md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height="16:9" md-gutter="12px" md-gutter-gt-sm="8px"> <md-grid-tile ng-repeat="orgOrder in vm.orgOrders | filter: query1" style="background: #f5f5f5" layout-align="center center" ng-click="vm.addOrder(orgOrder)"> <div layout="column"> <div> {

问题 I am using an Angular Material grid list to display around 500 - 1000 items. I am having some trouble styling it to my liking. Here is what the grid list looks like now: <md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height="16:9" md-gutter="12px" md-gutter-gt-sm="8px"> <md-grid-tile ng-repeat="orgOrder in vm.orgOrders | filter: query1" style="background: #f5f5f5" layout-align="center center" ng-click="vm.addOrder(orgOrder)"> <div layout="column"> <div> {

问题 I am using an Angular Material grid list to display around 500 - 1000 items. I am having some trouble styling it to my liking. Here is what the grid list looks like now: <md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height="16:9" md-gutter="12px" md-gutter-gt-sm="8px"> <md-grid-tile ng-repeat="orgOrder in vm.orgOrders | filter: query1" style="background: #f5f5f5" layout-align="center center" ng-click="vm.addOrder(orgOrder)"> <div layout="column"> <div> {