angular-material

“NullInjectorError: No provider for Overlay!” in console (Angular Material)

由 纵然是瞬间 提交于 2020-01-11 12:37:08
问题 I'm getting an error when using Angular Material. Specifically, ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[CdkConnectedOverlay -> Overlay]: StaticInjectorError(Platform: core)[CdkConnectedOverlay -> Overlay]: NullInjectorError: No provider for Overlay! Error: StaticInjectorError(AppModule)[CdkConnectedOverlay -> Overlay]: StaticInjectorError(Platform: core)[CdkConnectedOverlay -> Overlay]: NullInjectorError: No provider for Overlay! ... (The full log can be seen

How to customize mat-select dropdown position?

由 旧城冷巷雨未停 提交于 2020-01-11 08:12:36
问题 Its been couple of days since i have not found the solution for this. As there is an option for mat-menu that is overlaptrigger property but there is no property to perform this in mat select dropdown. Is there any way to customize the mat-select dropdown position by overriding the css or any better solution. 回答1: <mat-select placeholder="Language" disableOptionCentering panelClass="myPanelClass"> <mat-option *ngFor="let locale of locales" [value]="locale"> {{locale}} </mat-option> </mat

Why doesn't Angular matTooltip work when you add it dynamically?

由 大憨熊 提交于 2020-01-11 07:09:05
问题 I have an SVG element and I want to add a matTooltip at some point in Angular. I observed that if I try to add matTooltip like this: generate() { var svgEle = document.getElementById("testSVG"); var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); rect.setAttribute('id', "rect"); rect.setAttribute('x', "73"); rect.setAttribute('y', "95"); rect.setAttribute('class', "st01"); rect.setAttribute('width', "407"); rect.setAttribute('height', "328"); rect.setAttribute(

Material angular infinite scroll with $http request

由 亡梦爱人 提交于 2020-01-11 02:29:12
问题 I'm using md-virtual-repeat directive of Angular Material to have an infinite scroll, and I need to replace it's demo $timeout function with a $http request. But I can't get to the right solution. In the code below, infinite scroll works fine but doesn't show the data from http request. The problem is that I don't know the way of binding $http result to infiniteItems . Here is the plunker. Index.html <body ng-app="infiniteScrolling" class="virtualRepeatdemoInfiniteScroll"> <div ng-controller=

Click outside md-select is not working

由 微笑、不失礼 提交于 2020-01-07 06:43:52
问题 select in dialog - angular material - mdpanel using sample md-select but click outside the select when the options are open is not working. how can I fix it ? thx a lot html: <md-select ng-model="ctrl.selectedUser" ng-model-options="{trackBy: '$value.id'}"> <md-option ng-value="user" ng-repeat="user in ctrl.users">{{ user.name }}</md-option> </md-select> 回答1: fixed: I have removed the "zIndex" property from md-panel or md-dialog config object 来源： https://stackoverflow.com/questions/42052162

md-card-image with overflow:hidden + max-height kills 100% width

由 喜夏-厌秋 提交于 2020-01-07 05:44:06
问题 Using Angular 2, I was trying to partly show a cover image by using img[md-card-image] { hidden: overflow; max-heigth: 160px; } However, Angular decides that it boxes the image inside during the overflow. I cannot seem to figure out how to get the image fill the whole top of the card. Edit 1 If I do not use the above css, and instead change the div which wraps my cover image to margin-bottom: -50%; which moves the text up on top of the image; however, in this case, I cannot set a background

Initialising MatPaginator asynchronously

由 ＊爱你＆永不变心＊ 提交于 2020-01-06 14:59:11
问题 We initialise MatPaginator in our components like @ViewChild(MatPaginator) paginator: MatPaginator; and assign to a MatTable DataSource defined in our component as matTableDataSource.paginator = this.paginator; This doesn't work in a use case when the data source is initialised asynchronously using async pipe with a combination of *ngIf . As, <div *ngIf="someDataObs | async as yourData else loading"> <mat-table #table [dataSource]="yourData"> ... your headers and columns </mat-table> <mat

Change css of placeholder text of md-autocomplete

由 一世执手 提交于 2020-01-06 14:47:08
问题 I use Angular Material version 1.1 I want to change the style of placeholder text of md-autocomplete component. However, i could not select the placeholder as an apart element to play with its styling. Here you see a codepen to illustrate the problem. I tried the following dictating codes but they did not work md-autocomplete{ color: red !important; } md-autocomplete-wrap{ color: red !important; } input{ color: red !important; } Is there any way to do it? 回答1: To change the placeholders

Angular Material Data Table No Data

由 家住魔仙堡 提交于 2020-01-06 14:16:31
问题 I am trying angular 5 material data table. It is showing the headings but no data is showing in the table. I have copied this code from a site. On they showed that data is showing. I check everything and there is no difference in the code. test.component.ts import { Component, OnInit } from '@angular/core'; import {MatTableDataSource} from '@angular/material'; @Component({ selector: 'app-tabletest', templateUrl: './tabletest.component.html', styleUrls: ['./tabletest.component.css'] }) export

Angular Material Data Table No Data

由 江枫思渺然 提交于 2020-01-06 14:15:54
问题 I am trying angular 5 material data table. It is showing the headings but no data is showing in the table. I have copied this code from a site. On they showed that data is showing. I check everything and there is no difference in the code. test.component.ts import { Component, OnInit } from '@angular/core'; import {MatTableDataSource} from '@angular/material'; @Component({ selector: 'app-tabletest', templateUrl: './tabletest.component.html', styleUrls: ['./tabletest.component.css'] }) export
订阅 angular-material