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.
19,326
questions
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 ...
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 ...
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 ...
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. ...
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>)...
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 ...
-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 ...
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 &...
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&...
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 ...
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-...
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 ...
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 ...
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 ...
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 ...
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 ...
-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 ...
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/...
-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 ...
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 ...
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 ...
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 ...
-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 [...
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 ...
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 ...
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 ...
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"...
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 ...
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'],
]
&...
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 ...
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 ...
-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 ...
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 ...
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 ...
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, ...
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',
...
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! @...
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 ...
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" ...
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 ...
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. ...
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</...
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 ...
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 ...
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-...
-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 ...
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 {
...
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 ...
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 ...
-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 ...