Questions tagged [angular-material]

Angular Material is an implementation of Material Design in Angular. Do not use this tag for AngularJS Material, the implementation of Material Design for the older AngularJS framework.

Filter by
Sorted by
Tagged with
0 votes
0 answers
22 views

Angular material mat-divider is not displaying when printing or saving in Firefox

I'm encountering an issue with the mat-divider component in my Angular application when trying to print or save a page in Firefox, even using media print css to try make it visible. Issue When using ...
Xablau Developer's user avatar
0 votes
0 answers
7 views

I click on the button "delete account" and it´s not working, what might be the problem based on the code below?

async DeleteCompanyDialog() { The async keyword indicates that this function is asynchronous, meaning that it can return a promise. This allows the function to wait for the deleteUser() operation to ...
Lahcen Agouzoul's user avatar
0 votes
0 answers
21 views

Angular material checkbox started to pop out to top

screenshot of the issue Do you have any idea why suddenly the checkbox upon click started to pop out of its container to top:-12px ? I've tried to trace the click state but only noticed -12px set on ...
Nevyan Neykov's user avatar
0 votes
0 answers
8 views

MatFormFieldModule / MatLegacyFormFieldModule Conflict without MatInputFieldModule import

I have to use Material Legacy Modules in a client Project. Now i removed all occurences of both MatFormFieldModule and MatInputFieldModule with MatLegacyFormFieldModule and MatLegacyInputFieldModule. ...
Andresch Serj's user avatar
0 votes
0 answers
22 views

Automatically scroll down mat dialog

I use a modal MatDialog that comes from the material library. The last element in the modal is a <mat-expansion-panel> element. When the user clicks on this element (<mat-expansion-panel>)...
Olivier's user avatar
  • 343
0 votes
0 answers
14 views

Submitting valid form and changing style

I have an Angular 15 App. I am using an Angular material for styling. I want to submit only valid form, i.e. none of the fields should be empty and e-mail field must be an email. This is how my form ...
Elliott Alderson's user avatar
-2 votes
0 answers
22 views

Search bar with field o search in Angular [closed]

I'm planning to implement a search bar in my order listing page, which shows the list of orders in my E com admin dashboard. I want to give a single search bar with an option to select on which field ...
Abhiram V V's user avatar
0 votes
0 answers
10 views

Extra Spaces in ng-autocomplete

I was using ng-autocomplete for my property search feature so the requirement is to search the property name by entered text, but then I found out some property name where seperated by spaces like &...
Gaurav Sahu's user avatar
0 votes
1 answer
35 views

Restrict user cursor to date fields only in material angular control

I have the form with the date picker control like this: <mat-card class="mb-3"> <mat-card-content> <div class="row"> <div class="col-12&...
janci's user avatar
  • 211
0 votes
0 answers
19 views

Angular Drag Table Row To Dynamic Tab

"@angular/cdk": "^16.2.5", "@angular/material": "^16.2.6", Im making a component, that has multiple tabs (tabs can be created or deleted) Each tab has a ...
Dj_Bear's user avatar
  • 29
0 votes
0 answers
15 views

How to position mat-select-trigger inside the select field with Angular Material?

I would like to use either : <mat-select-trigger> <mat-icon>clear</mat-icon> </mat-select-trigger> or <button mat-icon-button matSuffix> <mat-icon>clear</mat-...
mtnp's user avatar
  • 334
0 votes
2 answers
21 views

How to dynamically change hasBackdrop property from MatDialog component?

I would like to control backdrop visibility from the dialog itself. Ideally it would be to have it implemented like this, but there is no way (at least I didnt find it) to control backdrop from ...
Mateusz's user avatar
  • 1,163
0 votes
0 answers
12 views

Module build failed from (sass-loader/dist/cjs.js) with Angular custom theming

I'm trying to run my angular 16 app but getting the following error in every .scss file where I use material color while trying to serve it locally. Have a look at the error below: Error: Module build ...
Cyril's user avatar
  • 37
1 vote
0 answers
11 views

Using angular-material drag and drop inside ngx-datatable

Im using ngx-datatable to render a table, inside of which I am using angular material cdk drag-n-drop. The overall functionality works well except when the list is long. If the table is scrolled to ...
user2031428's user avatar
  • 1,059
0 votes
0 answers
10 views

mat-form-field is displayed with the error cue even though it's pristine and untouched when declared in ng-template in a different component

Default angular/ angular material behavior is not to overwhelm the user with error cues when a control is pristine and untouched (i.e. a control is shown for the first time and is invalid but the user ...
aderesh's user avatar
  • 927
0 votes
0 answers
25 views

Angular material MDC migration to 15 getWorkspaceConfigGracefully is not a function

I have migrated angular version from 14 to 15 including material. I'm trying to migrate material UI components using ng generate @angular/material:mdc-migration when I entered the command I'm getting ...
Karthik's user avatar
-1 votes
1 answer
28 views

Disable rendering of the whole table on input change

In my angular application I am using Material table with over 1700 rows in it. I have noticed, that whenever I even hover input field, it is getting completely updated. Same happens, when I am put ...
bkh6722's user avatar
  • 129
0 votes
0 answers
36 views

Angular - Error: NG0203: inject() must be called from an injection context

I wrote following test : import { render } from '@testing-library/angular'; import { AndLabelComponent } from './index'; // https://testing-library.com/docs/angular-testing-library/...
jy95's user avatar
  • 773
-2 votes
0 answers
23 views

Popular tabela material angular com datasource

I created two interfaces, a general one that has basic parameters that do not change such as current page, number of elements received, total pages, total elements. And I created another interface ...
Hugo Leonardo's user avatar
0 votes
0 answers
26 views

Angular standalone dynamic components and Material Modules

I'm using dynamic components (angular v16) to dynamically render a template. For generic templates with standard html everything works fine, but cannot find a way to use components from material ...
hal9000's user avatar
0 votes
0 answers
67 views

ViewChild is returning undefined (Angular 16)

I know there are several topics on the matter, but I swear I read them all and none solved my issue. Here is what I have, very much simplified AdministracionComponent.ts export class ...
Gdepablo's user avatar
1 vote
1 answer
55 views

How to style Angular Material mat-form-field/matInput

I'm using the latest angular material version(v16) and I'm trying to style the matInput(inside a mat-form-field) and I'm having some issues with the behaviour. I simply want to override the color of ...
Swift Twe's user avatar
-1 votes
0 answers
14 views

why matMenuTriggerFor is giving error even all imports are correct?

Im new to angular and following a tutorial, I have installed and imported all the required packages for using angular materials and I cannot find solution for this error: my code looks like this and [...
Ckeihas's user avatar
  • 17
0 votes
0 answers
21 views

How to set outline color of a textbox via angular material theming

I recently upgraded my angular app from v14 -> v16, after that i also updated @angular/material to most recent version which required a shift to mcd based components. Currently i have lots of input ...
Timsen's user avatar
  • 4,076
0 votes
1 answer
25 views

Angular material table: Cannot read properties of undefined (reading 'headerCell')

I am having problem with the header checkbox in Angular using material-table. Whenever I add 4th column for checkbox, I am getting very strange error: ERROR TypeError: Cannot read properties of ...
bkh6722's user avatar
  • 129
0 votes
0 answers
11 views

Angular material tab group gray underline

v15 v14 As you can see from the image, after angular v15, gray underline of tab group is disappeared. Is there any way for getting the gray line back on v15? I investigated properties but it seems ...
Junu Lee's user avatar
0 votes
2 answers
116 views
+50

Angular Material - Mat-Accordion Shadow effect on selection of that Accordion Description Item

I am using Angular Material 14 with Angular 15 and below is the code to display Menu items with mat-nav-list <mat-nav-list role="list"> <a mat-list-item role="listitem"...
CPK_2011's user avatar
  • 834
0 votes
0 answers
13 views

Angular material Legacy theme from core not updating

I have been upgrading the Angular version and material on the below versions , but still my styles all messed up and design was not like the orignal one, basically i wanted to use the old material ...
Gayathri Mohan's user avatar
0 votes
2 answers
28 views

Angular material table from list of list

I want to display following data as table. But it does not work as expected. How can I do it? displayColumns = ['A', 'B', 'C'] values = [ ['a1', 'b1', 'c1'], ['a2', 'b2', 'c2'], ['a3', 'b3', 'c'], ] &...
StaticName's user avatar
0 votes
0 answers
20 views

Displaying Data according to the date added in Angular

I am using Angular Material and Firestore for the backend. I have a table with a single column "Details". Now when data is added by a form, it is displayed in the table but in random order ...
user17449555's user avatar
0 votes
1 answer
31 views

How to change the value of a snackbar based on the value of a boolean?

I have a registration form and i want to show a message to the user of whether he was successful or not, for this i am using a snackbar that i made as an angular component and that i open with a ...
Tony Ortega's user avatar
-1 votes
1 answer
30 views

Angular Material Inputs display incorrectly

I update my Angular Material to version 15 and i have problem with inputs. Currently it display like this <mat-form-field appearance="outline"> <mat-label>Favorite ...
kubare's user avatar
  • 29
0 votes
0 answers
22 views

Approx count of UI screens in a angular project

I want to know if there is a way to get total count of UI screens in a angular application ? I know by doing global search on code base using component.ts I can get component count but I don’t want it ...
Kris Kyun's user avatar
0 votes
1 answer
16 views

Can't edit the padding for mat-radio-button in angular-material v15

I want to edit the padding to 0 such that the radio button and the label appears closer. I am able to do this in the browser by editing mdc-radio class and setting the padding to 0px. However, this ...
user252046's user avatar
0 votes
0 answers
48 views

Angular Material floating labels disappearing or getting cut off on hover

I don't want to have to disable floating labels if I don't have to, but they're not behaving well for me. When I hover over them, a lot of the time the floating label will either disappear completely, ...
Robert's user avatar
  • 379
0 votes
0 answers
23 views

MatDialog: When using in dynamically loaded component using module federation throws error No provider for MatDialogRef

Blockquote test.component.ts import { Component, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; @Component({ selector: 'app-test-dialog', ...
Balaji 's user avatar
0 votes
1 answer
50 views

How to resolve npm peer dependency conflict

I am upgrading from Angular 11 to Angular 14. I have resolved all the peer dependencies except one of them. npm ERR! Found: @angular/[email protected] npm ERR! node_modules/@angular/common npm ERR! @...
meallhour's user avatar
  • 14k
0 votes
0 answers
35 views

Angular disable form validation when clicking Cancel in a dialog

I have a Angular Material dialog with an input field and a Cancel button. The input field has a required validator. When Cancel button is clicked, the input field is red just before the dialog closes ...
Martin Staufcik's user avatar
0 votes
1 answer
34 views

Alignment Problem with Angular Material Expansion Panel Header

I am using Angular 14 Material Expansion Panel as below... <mat-nav-list> <a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" ...
CPK_2011's user avatar
  • 834
0 votes
2 answers
31 views

Button click to render textarea giving error

I have a button which when clicked , should render a textarea. I am using Angular Material. Tried using ngIf in the textarea tag but giving errors - Error: mat-form-field must contain a ...
user17449555's user avatar
0 votes
0 answers
21 views

Angular material: after migration to 15 version, rgba background in table works different

I've migrated to Angular Material 15 and found out, that background in my tables has different color. I've come to Material site, went to table component and changed background color for row there. ...
Volodymyr Milovanov's user avatar
0 votes
1 answer
27 views

Need to apply a property change for items in the Angular Material 16 mat-menu (globally)

I'm using Angular Material 16 and this question is regarding the height of each button inside of the mat-menu element. Code Example: <button mat-icon-button> <mat-icon>more_vert</...
webdad3's user avatar
  • 8,903
0 votes
0 answers
20 views

ProxyZone Problems with Harnesses after Angular/Material Update from 15 to 16 using nrwl/nx

I updated from Agnular 15 to Angulat 16. Now a lot of my Unit Tests fail, claiming: Expected to be running in 'ProxyZone', but it was not found. I found Issues stating that i shouldn't mix fakeAsync ...
Andresch Serj's user avatar
0 votes
1 answer
48 views

Alignment Problem with Angular Material Expansion Panel with mat-nav-list

I am using mat-nav-list to display the Menu items and the 4th Menu item is an Angular Material Expansion control. I am missing the alignment here. Screenshot of it is below. EDIT The related code is ...
CPK_2011's user avatar
  • 834
1 vote
1 answer
41 views

Angular Expansion Panel - expanded property binding issue

My HTML with Angular code is as below...with Admin and User Main menu items. <a id="adminId" (click)="sideNavLink($event)">Admin</a> <mat-accordion class="mat-...
CPK_2011's user avatar
  • 834
-1 votes
0 answers
23 views

Angular Material Table height not full length of the container

In my Angular project, the landing page imports different components. One component in material table whiih I have have in Mat card for design purpose. In the landing page I have used Tailwind as well ...
user17449555's user avatar
0 votes
0 answers
34 views

Angular Material Table with Dynamic Columns and Rows from Array

I have an array of objects and each object contains an array. Here are the models export interface CarEngineCodes { car: string; engineCodes: EngineCode[]; } export interface EngineCode { ...
JoeyD's user avatar
  • 693
0 votes
0 answers
19 views

How do I use one Material Dialog multiple times but subscribe to a different auth method depending on the button that was clicked?

I'm building an authentication app using the PEAN stack (i.e., PostgreSQL - ExpressJS - Angular - NodeJS). I have two JavaScript files on the backend using ExpressJS (i.e., edit-profile-email.js and ...
Rok Benko's user avatar
  • 15.1k
3 votes
1 answer
102 views

Angular drag and drop with nested not working as intended

I'm having an issue that CDK Drag and Drop is not working as how I want it to be. There is one scenario that I can't get it working and that is moving and IT (green object) inside a different (green ...
Pedro Lopes's user avatar
-1 votes
1 answer
42 views

Angular Material DatePicker Custom Format Example

I'm looking at this StackBlitz here: https://stackblitz.com/edit/y7p87g?file=src%2Fexample%2Fdatepicker-formats-example.html,src%2Fexample%2Fdatepicker-formats-example.ts And I'm wondering how to ...
FunkMonkey33's user avatar
  • 2,004

1
2 3 4 5
387