angular-material

Angular Material: How to position MatDialog relative to element?

早过忘川 提交于 2020-06-27 16:19:51
问题 I am developping an angular application. I want to open a dialog pop up (an instance of MatDialog) when I click on a button. I do it in a method of my main page as the following openDialog(event) { const element = document.getElementById(event.target.id); const jqelement = $(element); const position = jqelement.position(); // cache the position const bottom = position.top + jqelement.height(); const dialogConfig = new MatDialogConfig(); dialogConfig.disableClose = true; dialogConfig.autoFocus

Angular Material: How to position MatDialog relative to element?

本秂侑毒 提交于 2020-06-27 16:19:31
问题 I am developping an angular application. I want to open a dialog pop up (an instance of MatDialog) when I click on a button. I do it in a method of my main page as the following openDialog(event) { const element = document.getElementById(event.target.id); const jqelement = $(element); const position = jqelement.position(); // cache the position const bottom = position.top + jqelement.height(); const dialogConfig = new MatDialogConfig(); dialogConfig.disableClose = true; dialogConfig.autoFocus

Tried to overwrite @angular/cdk/stepper/step-header.d.ts.__ivy_ngcc_bak with an ngcc back up file, which is disallowed

一个人想着一个人 提交于 2020-06-27 15:41:05
问题 After upgrading @angular/core and @angular/material using ng update command, the ngcc command fails with below error command used: ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points Error: > Compiling @angular/cdk/stepper : es2015 as esm2015 > Compiling @angular/cdk/drag-drop : es2015 as esm2015 > Error: Error on worker #3: Error: Tried to overwrite node_modules/@angular/cdk/stepper/step-header.d.ts.__ivy_ngcc_bak with an ngcc back up file, which is disallowed

Flexbox causes adsense error: “adsbygoogle.push() error: No slot size for availableWidth=0”

非 Y 不嫁゛ 提交于 2020-06-27 09:48:08
问题 I have a website which uses angular-material and flexbox for it's layouts. I'm trying to include a Google Adsense snippet inside one of these flexbox containers, but it gives me the error: "adsbygoogle.push() error: No slot size for availableWidth=0". However, it runs properly if I put the same snippet outside of a flexbox container. This is not ideal, since my entire site is made with flexbox. So I'd like to find a way to make this work within a flexbox container. Here's a snippet of my code

<input matInput … (Angular material form) Allow 3 decimal points on input, but only display 2 decimal points

徘徊边缘 提交于 2020-06-27 05:53:44
问题 I have a regular angular material form that uses numberMaskOptions to limit the input and display of the field value to 3 decimal points. (see code below) This is fine, but the customer now wants to limit the "display" of the field to show just 2 decimal points, but wants to allow the user to enter up 3 decimal points in the same field. In other words, when the cursor is not in the field, it should display 2 decimal points of accuracy, but when the user enters the field to edit it, it should

angular material No provider for MatDialog! Error

試著忘記壹切 提交于 2020-06-25 00:30:12
问题 I am trying to use the Angular material module to open a model on click of a button. I have followed the example as suggested in the https://material.angular.io/components/dialog/examples. However, I see that as try to run the application, I see the following error - errors.js:48 ERROR Error: Uncaught (in promise): Error: StaticInjectorError[MatDialog]: StaticInjectorError[MatDialog]: NullInjectorError: No provider for MatDialog! Error: StaticInjectorError[MatDialog]: StaticInjectorError

Angular custom style to mat-dialog

末鹿安然 提交于 2020-06-24 11:10:45
问题 I am trying to customize the default "mat-dialog" in Angular 5. What I want to achieve is having a toolbar in the upper part of the dialog, which should cover the whole width. However, the mat-dialog-container has a fixed padding of 24px which I could not override. I tried to style both the h1 and the mat-dialog-container. @Component({ selector: 'error-dialog', template: ` <h1 mat-dialog-title> ERRORE </h1> <div mat-dialog-content> {{data.error}} </div> <div mat-dialog-actions> <button mat

Upload file using angular material 5

北城余情 提交于 2020-06-23 07:16:52
问题 I tried to upload file (angular 5) using angular material 5. app.component.html <mat-horizontal-stepper [linear]="isLinear" #stepper="matHorizontalStepper"> <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> <ng-template matStepLabel>Upload your audio file</ng-template> <mat-form-field> <input matInput style="display: none" type="file" (change)="onFileSelected($event)" #fileInput name ="file" formControlName="firstCtrl" required> <button mat-button (click)=

'mat-label' is not a known element Error in latest Angular Material

走远了吗. 提交于 2020-06-22 13:26:45
问题 I got an error in my Angular Material: compiler.js:466 Uncaught Error: Template parse errors: 'mat-label' is not a known element: 1. If 'mat-label' is an Angular component, then verify that it is part of this module. 2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </mat-form-field> <mat-form-field> [ERROR ->]<mat-label>Both a label and a placeholder</mat-label> <input matInput placeholder="Simple"