Questions tagged [angular-material2]

Angular Material is an implementation of Material Design in Angular 2+. DO NOT use this tag for AngularJS Material questions.

Filter by
Sorted by
Tagged with
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....
Natdrip's user avatar
  • 1,143
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($...
rhbc73's user avatar
  • 739
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 ...
RobSeg's user avatar
  • 985
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 ...
Yash's user avatar
  • 23
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 ...
Purushottam Nawale's user avatar
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-...
user17449555's user avatar
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. ...
Volodymyr Milovanov's user avatar
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 ...
wtylergibbons's user avatar
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://...
LukePerrin's user avatar
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, ...
Johan491's user avatar
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 ...
btiller's user avatar
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 ...
Meher Hendi's user avatar
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 ...
Donald Groezinger's user avatar
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 ...
Stephen E.'s user avatar
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 : #...
Moblize IT's user avatar
  • 1,088
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 ...
Jamie Bohanna's user avatar
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 ...
Carlos Isidoro López's user avatar
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 ...
Nisar Saiyed's user avatar
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 ...
Yureka's user avatar
  • 1
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 ...
Brian Reinhold's user avatar
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&...
Aditeya's user avatar
  • 318
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, ...
Gustavo López Frutos's user avatar
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 ...
lucifer63's user avatar
  • 814
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 ...
dialeev's user avatar
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' ...
mani singh's user avatar
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 ...
Satya Bhaviri's user avatar
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-...
Tom O'Brien's user avatar
  • 1,751
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 ...
NickAth's user avatar
  • 1,108
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 ...
Zets's user avatar
  • 13
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-...
The Inquisitive Coder's user avatar
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 ...
Ramesh Kumar's user avatar
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 ...
bschmitty's user avatar
  • 1,128
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 ...
afriedman111's user avatar
  • 1,995
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 '@...
user2440762's user avatar
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): ...
bfredo123's user avatar
  • 492
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) { ...
user18067747's user avatar
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-...
CocoaUser's user avatar
  • 1,371
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 ...
skyleguy's user avatar
  • 1,019
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: &...
Donald Groezinger's user avatar
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 ...
sherlok22's user avatar
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-...
Pon Ilavarasan's user avatar
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); } ...
San Jaisy's user avatar
  • 15.7k
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 ...
Shahzod Kakhkhorov's user avatar
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 ...
WorldFam's user avatar
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 ...
nimesh madusanka's user avatar
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 ...
Dovi Rosner's user avatar
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 ...
Eli's user avatar
  • 1,728
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 ...
Generaldeep's user avatar
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 ...
Santhosh's user avatar
  • 1,051
-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'...
itty's user avatar
  • 27

1
2 3 4 5
60