Questions tagged [angular-material2]
Angular Material is an implementation of Material Design in Angular 2+. DO NOT use this tag for AngularJS Material questions.
2,960
questions
0
votes
1
answer
17
views
matMenu nesting button components mat-menu-item is not inheriting button functionality
Hi I am using Angular v12 and Material v12
I have the following code:
@Component({
selector: 'app-alert-display',
templateUrl: './alert-display.component.html',
styleUrls: ['./alert-display....
0
votes
0
answers
8
views
MatMenuTrigger loses focus when clicked
I have a stand material UI menu
<button mat-icon-button [matMenuTriggerFor]="menu11" id="111" aria-label="Example icon-button with a menu" (mouseover)="setFocus($...
0
votes
1
answer
19
views
Multiple Angular Material themes: getting sass map property always returns old, cached, value
For multiple Angular Material themes the idea is to have a scss property which has a different value per theme. I'd like to access this sass map property from within a mixin, as is done in this ...
0
votes
1
answer
34
views
autocomplete.options in ts file only gives options from first dropdownlist when there are multiple dropdowns
my application has multiple dropdowns all implemented with mat-autocomplete. i have use unique value for matAutocomplete property also i have different formControlName set. still getting same options ...
0
votes
1
answer
36
views
Mat Progress Bar for Fetch API and XLS File Creation
I want to see the mat progress bar to determine how much progress has been made. Progress is determined by simultaneously tracking how much data is fetched from the database and how much of the XLSX ...
0
votes
1
answer
209
views
NG01203: No value accessor for form control name for mat-radio-group
Unit test is failed saying Error: NG01203: No value accessor for form control name : 'gender' . I have used NG_VALUE_ACCESSOR but still same . I am using Reactive form and the HTML code is
<mat-...
0
votes
0
answers
51
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
2
answers
167
views
Angular Material Stepper with reusable form component
I'm trying to implement an Angular Material Stepper by creating a form component that can be inserted as a step for multiple, larger forms.
For example, say I have N number of forms, and the first ...
0
votes
1
answer
221
views
Checkbox confirmation button missing from ngx mat date time picker
I had a styling issue with ngx mat datetime picker in Angular 15 which is this package..
https://www.npmjs.com/package/@angular-material-components/datetime-picker
So I added
@import "https://...
0
votes
1
answer
95
views
Angular: mat-core() giving undefined mixin
it says "./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin." this on the terminal when i try to execute my project, ...
0
votes
0
answers
14
views
Angular Material FlatTreeControl. Parent has added checkmark when all children removed
Angular Material FlatTreeControl. The Parent node has checkmark added when all children removed. This checkmark is added somewhere by AM which is incorrect as it should be unchecked. If the user ...
1
vote
1
answer
243
views
How to override the angular material theme and insert my custom typography
I want to override the default Angular Material typography and input my own font, How can I do that ?
I have tried using this inside styles.scss but the theme keeps on overriding the scss class
...
1
vote
1
answer
366
views
Auto-select/auto-checkbox row in Angular Material Table if List has only 1 value
Problem: I'm trying to have my material table auto-select/auto-checkbox the 1st row in the table if the datasource[] has only 1 item in the list.
So if my datasource has 4 items, don't pre-select any ...
0
votes
1
answer
133
views
mat-checkbox inside cdkList not visually changing the checkbox
I'm using angular v16 along with angular material and I'm trying to create a custom component which uses the cdkListbox with a child mat-checkbox but when I'm selecting the option within the listbox ...
1
vote
1
answer
190
views
angular material theming defining custom colors after upgrade
I recently upgraded to newer version of angular material 16 and now the old way of theming is no longer working. it was defined as below
$mat-cbh-primary: (
50 : #e9eaf1,
100 : #c9cadc,
200 : #...
1
vote
0
answers
396
views
Index identified when using Angular Drag and Drop CDK is incorrect, causing misaligned order in array
The Environment
I have an Angular 15.2 app that is designed to build a 'photoshop-like' experience using the HTML Canvas.
I am attempting to use the Material Design Drag and Drop CDK found here to ...
5
votes
1
answer
1k
views
Upgrading styles in Angular Material 15 is a mess
We am currently upgrading Angular Material from 14 to 15 in our Angular 15 project. I have been following the upgrade guide to use the new MDC-based components, because our project is growing at a ...
0
votes
0
answers
47
views
How can I keep open my mat dialogue modal if Angular route getting change in Angular Material?
I am implementing the multiple dialogue modal functionality to open multiple dialogue at a time and not closed until we closed manually.
Expected Behaviour: In this feature we allow user to open modal ...
0
votes
0
answers
11
views
Sync two nested mat tree expand left tree if right tree is expanded
I have two arrays fromProducts and toProducts both are nested array of obj. I need to expand left tree node if right tree node with same id is expanded.update checkbox if right checkbox is checked.
ts ...
0
votes
0
answers
51
views
Angular material child mat-card not responsive
I have a simple situation with a mat-card element occupying the entire page in which I put a background color gradient and some header text. I include a 'child' mat-card element containing a list, and ...
1
vote
1
answer
116
views
Adding a component with mat-expansion-panel to mat-accordian
I have a component with a mat-expansion-component and I want to place this component in a mat-accordian. This works except for the Styling.
<mat-accordion>
<app-panel1></app-panel1&...
1
vote
0
answers
135
views
How to drag and drop from mat-menu to another element on the page (using cdkdrag Angular Material)
Is there any way to drag from mat-menu and drop to another element on the page (using cdkdrag)?
The approach taken by greatweatherforducks in this answer is very interesting, but it doest use cdkdrag, ...
0
votes
2
answers
85
views
How to conditionally prevent branch collapsing?
I am using Material tree, just like any tree in these examples - https://material.angular.io/cdk/tree/examples. The only difference is that my tree is dynamic - every node has controls to create or ...
0
votes
0
answers
79
views
Mat-error not triggering in custom phone input component implementing ControlValueAccessor and Validator
I am trying to create a custom phone input component by implementing ControlValueAccessor and Validator in Angular, but I have an issue with mat-error not triggering. The FormGroup seems to work, as ...
0
votes
0
answers
175
views
'mat-chip-grid' is not a known element
I am unable to use mat chips module with autocomplete in angular material 15 version. This is all error I am having.
Error: src/app/index/login/login.component.html:4:7 - error NG8001: 'mat-chip-grid' ...
0
votes
0
answers
294
views
angular2-multiselect onFilterDeSelectAll not working as expected, Deselect filter All text not coming upon filter
We are using angular2-multiselect using angular2-multiselect-dropdown': "4.6.3" version
These options available in https://www.npmjs.com/package/angular2-multiselect-dropdown/v/4.6.3
...
0
votes
1
answer
443
views
Angular Material Table align cell elements horizontally
I have an angular material table with a column who's cells contain multiple google material icons like so:
<table mat-table [dataSource]="artistRateDataSource" class="mat-elevation-...
0
votes
1
answer
248
views
Wait material dialog to fully render content before open in Angular
I am using Material MatDialog in my Angular project to display dialogs.
However sometimes when I use MatDialog's open method to open a dialog, I can see the dialog instantly popping up as a blank ...
1
vote
1
answer
331
views
Angular 15. Returning api response as a function result
I'm an Angular and rxjs beginner and in my app I have a form control with mat-autocomplete from https://material.angular.io/components/autocomplete/overview.
On each valueChanges event of that control ...
0
votes
0
answers
19
views
ngModelOptions removing Form Control from Angular Template Driven Form
I have a grid which has only 1 editable field(date field) where I want to add some validation logic(user can't input random string etc.). I'm using a template driven form so that I can use <mat-...
6
votes
2
answers
1k
views
Cannot set properties of null (setting '_closeInteractionType') at _closeDialogVia dialog.mjs
enter image description here
After migrated to application's material to 15 version, the matdialog (built-in close button) is not working and throwing below error:
`ERROR TypeError: Cannot set ...
0
votes
0
answers
218
views
Can't Get Button Click on Angular Material CDK Overlay
I am using the Angular Material CDK Overlay to show some options once an HTML element is clicked and I cannot figure out how to get the buttons to trigger a click event. Is there a way to do this?
I ...
0
votes
0
answers
102
views
Material daterange picker: TypeError: rangePicker.registerInput is not a function
I have an angular 13 app and am using angular/[email protected]. I am trying to add a date range picker to my app but I get the following error when I try to run it:
Type 'HTMLInputElement' is not ...
0
votes
1
answer
84
views
Property Binding will not trigger in angular
i like to detected the changeEvent when property "completed" is changing and call onChange().
https://material.angular.io/components/stepper/overview
import {Component, ViewChild} from '@...
0
votes
0
answers
198
views
How to style a mat-form-field when dragging to its mat-chip-list?
I have an Angular Material form with <mat-form-field> items made of an <input> and a <mat-chip-list>, to allow the user to drop items in it (in addition to edit the text by typing):
...
0
votes
1
answer
385
views
How to disable options of two mat-select based on selection of one option from one mat-select?
I was working on a project with two dropdowns.
There I was able to dynamically disable/enable options of one dropdown, based on the option selected in another dropdown:
The ts code:
disable(obj) {
...
3
votes
1
answer
3k
views
Angular Material: custom more compact form-field without label and hint using density?
Angular: 15.0.4
CDK/Material: 15.0.3
Browser(s): Safari 16.2
Operating System: macOS
Is it possible to custom more compact form-field?
.my-mat-form-field-density-5 is working.
.my-mat-form-field-...
2
votes
0
answers
473
views
where are the helpful utility css classes/variables for angular material?
I am relatively new to using angular material and it has taken a bit more work to use than I have faced using some other css frameworks like PrimeNG, Fomantic/Semantic UI. Most recently I have used ...
0
votes
1
answer
206
views
Material <mat-select> not displaying properly in Ionic/Angular Project
I'm trying to add a <mat-select> into my Ionic/Angular project but it isn't rendering properly..
I'm using angular-material doc
But this is the result displaying on my page:
Here is my code:
&...
0
votes
1
answer
259
views
why sorting doesn't work with material table wrapped within accordions?
As per requirement, I have two accordions, each with one independent table. By clicking on the first accordion it opens and calls API, fetches the data from the backend and renders on the table within ...
1
vote
0
answers
95
views
How to set default select values from drop down for multiple fields using mat-select-autocomplete
I'm using a custom plugin to display the custom form, which will show several dynamic multiple drop-down fields. However, I'm having trouble with the default value not being selected from the drop-...
1
vote
1
answer
919
views
dialogRef.close() is not a function opening from one component and closing from another component
I have below MatDialog
export class ImportProcessingDialog extends AppComponentBase {
constructor(public dialogRef: MatDialogRef<ImportProcessingDialog>) {
super(injector);
}
...
1
vote
0
answers
76
views
Angular connect dynamically created Drop lists
I need to implement drag drop for tasks which are inside the column so I can transfer them between other columns. I have a component which has a list of columns (board-page.component) and also column ...
0
votes
0
answers
771
views
Get value from multiple form fields in Angular
I'm trying to get value of multiple form controls which wraps mat-select with multiple options. I'm expecting to get array of EntityParams objects and add each time a new object of array whenever user ...
0
votes
1
answer
672
views
How to change background color of angular material tabs
I have a component using angular material 9.
There are 3 tabs in my component.
Completed
Overdue
Extended
I need Completed tab label background color as green, Overdue label background color as red ...
0
votes
1
answer
328
views
OnScroll Event not firing inside a mat-drawer-container
I have a bunch of content inside of a mat-drawer-container and I would like to listen for scroll events on it. I have tried window.onscroll() and it did not work. I removed the mat-drawer-container ...
0
votes
1
answer
286
views
google.maps.places.Autocomplete position offset inside angular material Dialog
I'm using a google autocomplete input inside angular material Dialog.
When the user scrolls a bit down, material Dialog uses a trick and (according to source):
/** Blocks page-level scroll while the ...
1
vote
2
answers
747
views
Two Mat-Menus on one page, control position for both separately
I have these two menus below. I want to control the cdk-overlay-connected-position-bounding-box css property of both mat menus (their overlays) and align one menu align-items: flex-start; and the ...
2
votes
1
answer
105
views
How to find the target container while dropping item in angular material 12?
I am using the angular material 12 version drag and drop feature. I have two connected divs while dropping the item I want to identify whether the source (item dragged container) container and target ...
-1
votes
1
answer
748
views
how to override angular material mat-option style
The height doesn't get bigger and the inscription gets smeared and not pretty
I have already tried many types of solutions but none of them worked I tried to do
::ng deep .mat-option{...}
But it didn'...