Questions tagged [angular-material2]
Angular Material is an implementation of Material Design in Angular 2/4/5/6. DO NOT use this tag for AngularJS Material questions.
2,992
questions
0
votes
1
answer
6
views
Make Angular Material mat-select automatically take width of its selected option
How do I make automatically take width according to its selected option's width? I've looked through the API of mat-select, and was not able to find an option/input for this.
0
votes
1
answer
37
views
I want to be able to append the selected value from a mat-select to the text area below on click
I have been asked to do this project using Angular in work and honestly not touched Angular 2 before. I can do this no issue using jQuery but I am having trouble getting it to work in Angular. ...
0
votes
0
answers
41
views
Angular material components - datetimepicker - midnight 12h/24h issue
I have implemented angular material datetime picker and I have strange issue.
It shows 24:00:00 as midnight time
On time picking it has same issue, it back to 12 even if I am changing it to 00
HTML
&...
0
votes
0
answers
25
views
Mat Accordion/ Mat Panel collapse on Outside click event
I have a feature where in I have 2 mat-expansion-panel inside a mat-accordion. Currently I am able to expand and collapse the mat-expansion-panel properly. (One panel expanded at a time.)
<mat-...
0
votes
0
answers
42
views
CDK drop List always sets the list items from initial index in Angular
I have this cdk Drag drop
<div class="example-container" cdkDropListGroup>
Thus to describe data, one needs to know the extent of variability. This is given by the measures of ...
0
votes
0
answers
61
views
Angular 13 Material menu built dynamically not working properly
I need to have a category / sub-category selection component (mega menu).
I looked through numerous examples and also found an adequate implementation example, downloaded it, ran and saw it has the ...
0
votes
2
answers
77
views
Change default gray palette dark mode color in Angular Material
is there any way to change the default gray palette in angular material?
I want to change the entire dark mode gray color in the material to a custom color, for example, Slate color in Tailwindcss
I'...
0
votes
0
answers
23
views
Angular 10 Call backend API with query param use_cache:false only once at load or refresh. at other time use_cache:true
I have an backend python api which uses flag use_cache which caches data pulled from datastore.
In Angular 10 Frontend, we call this api with use_cache: false for now but takes 7-10secs to load ...
0
votes
0
answers
41
views
Is there a way to implement all material components and directives itself act as web compnents using createCustomElements?
In my recent development project are in Angular 2+. That needs to finish up and move to Angular 2+ by replacing already implemented web elements using template basic HTML technologies.
The Angular 2+ ...
0
votes
1
answer
109
views
Material Angular force light/dark theme on single component
i configure two Material themes in my angular application.
@include mat.all-component-themes($lightTheme);
.dark {
@include mat.all-component-themes($darkTheme);
}
and all works fine, when i add &...
0
votes
0
answers
108
views
Angular : matSort with ng-content within mat-table
I'm trying to create a reusable mat table component with pagination, sorting and search. the reusable component that I made displays some simple columns , and projects some custom columns depending on ...
0
votes
1
answer
15
views
Looking for Help to fix Angular 8 to 9 Upgrade issue - Getting error in tab.js file
Once try to access the app in browser its keep on loading and throwing 500 -1000 errors in tabs.js file. (this._tabList.nativeElement is coming as empty). We are using Mat-tab in our project. Looks ...
1
vote
0
answers
23
views
Or Operator in mat-select
How do I Use a Or Operator in mat-select, I wish to disable the selection if the values equate to x or y
A Direct Implementation of the OR operator. Defaults to the left Option and Ignores the Right ...
2
votes
2
answers
109
views
Why does matColumnDef not need the asterisk notation in mat-table?
I was curious why *matCellDef, *matHeaderCellDef, and *matRowDef are all using structural/asterisk notation but the matColumnDef is not? Is it because the former are using some template container and ...
0
votes
1
answer
92
views
rebind Angular Material autocomplete when the mat-options are toggled to be hidden or visible?
I have a table of 50 rows, where each row has a column with an autocomplete input. Each autocomplete has 350 options, which means I'm rendering 17k mat-options, which slows down the app and any ...
0
votes
0
answers
42
views
How can I modify the style of one mat-select but not affect others on the same page without global css?
Scoped styles cannot affect mat-select (the finally generated elements doesn't have property of the component-id).
I tried to add component-name and the style class name to the mat-select like
<mat-...
1
vote
1
answer
167
views
Change header of an inline datepicker angular material
To change the header of a datepicker in angular material we use [calendarHeaderComponent] e.g
<mat-form-field>
<mat-label>Date</mat-label>
<input formControlName="date&...
0
votes
1
answer
247
views
How to create two inputs as one form field and apply style specifically in Angular Material?
Using Angular Material, I am building an example app with a form, which has a form field with two elements (input field and dropdown).
So, for time being, I have implemented flex styles and ...
1
vote
2
answers
66
views
Keyboard accessibility: skip content in interactive Tables
I'm currently working on an Angular web project that contains a interactive mat-table. We are trying to make it fully accessible for keybard navigation.
The data I'm displaying are the matches for a ...
1
vote
0
answers
106
views
How do i force a MatDialog to display my fields vertically in a column
I have a pop-up dialog to edit rows from a table.
I would like the fields to be displayed in a column. At the moment they display either next to each other or a combination of vertical and horizontal ...
1
vote
3
answers
357
views
How to set background palette in custom theme of Angular Material?
I currently define a custom theme finishing with something like:
$my-material-theme: mat.define-light-theme((
color: (
primary: $my-material-primary,
accent: $my-material-accent,
...
0
votes
0
answers
58
views
Issue with setting the selected value inside mat-chip
I'm facing an issue in a scenario where I had first saved all the values from the form and now want to open the values for edit,but the mat-chip doesnt show the selected value.
Have created the mat-...
1
vote
0
answers
53
views
How can I modify the PolylinesOptions of Angular Components map-Directions-renderer?
hi I'm trying to edit the PolylinesOptions of the <map-directions-renderer> component (component developed by Angular team) and I can't get results
I need to generate multiple renderers to ...
0
votes
0
answers
89
views
Select only parent nodes in Material Nested Tree
I want to select only the parent nodes of a child node in a material nested tree control. So the idea is to select only the selected nodes parent not children. Here is the example to go in the image ...
0
votes
1
answer
51
views
Can't get circle radius after circleRedim in angular2 google-maps
I don't know how to get the circle radius after resize
First approach
.html
<map-circle
(radiusChanged) = circleRedim()
[center]="center"
[options] = circleOptions >
...
0
votes
0
answers
32
views
displaying the preselected value in angular material drop down
I have the following mat-table on my html Page. I am trying to display the payment method
on my page and right next to the payment method, I am trying to display drop-down of the payment with the ...
0
votes
0
answers
256
views
How to conditionally set labels for a mat-tab Angular?
I wanted to reduce the code of my component, two mat-tabs have exactly the same structural content but have different data and different labels. I want to set labels for them based on a condition that ...
0
votes
0
answers
119
views
Angular 12 - Mat-tree => how to have a nested tree with different nested objects
I have been using this example: https://material.angular.io/cdk/tree/examples to make my nested tree work. The nested tree nodes work however my model has a slightly different take on it. Here's is ...
0
votes
1
answer
95
views
Is there a recommended way to adjust the height of the Angular Material toolbar?
Is there a recommended way to adjust the height of the Angular Material toolbar?
Here is an example of basic usage of the Angular Material toolbar as described here https://material.angular.io/...
1
vote
1
answer
529
views
MatSelect overlayDir now private when updating from Angular 11 to 12. How do I access it now?
In Angular 11, in node_modules@angular\material\select there is a variable:
/**
* Overlay pane containing the options.
* @deprecated To be turned into a private API.
* @breaking-change ...
0
votes
0
answers
48
views
Custom keyboard key in angular material keyboard like hide keyboard, layout change etc
this is image for the Qt keyboard
I am using the material keyboard for angular and using the custom layout for it. I was wondering if there is any way to show the keyboard icon and add its ...
1
vote
1
answer
94
views
Is it possible to show a value label in an Angular Material Multiple Select if the value is empty?
I have a multi-select and a checkbox triggering select all/none .. it works, but I want it to show "View All" by default (empty value" , only a label, like a custom trigger but it won't ...
0
votes
1
answer
96
views
how to give different .mat-ink-bar for different mat-tabs?
How to give different .mat-ink-bar for different mat-tabs?
For example:
For content 1 the .mat-ink-bar should be green and for content 2 the .mat-ink-bar should be red.
0
votes
1
answer
51
views
What settings does Firefox Safe mode changes, besides disabling themes, extensions or add ons?
There is an unusual behavior when using the scroll bar from Angular Material cdk-virtual-scroll-viewport using Firefox 88+ (Linux, Windows), Chrome works fine. The scrollbar jumps, remaining on top / ...
1
vote
1
answer
345
views
Angular Material Datepicker Highlight Range Week Start to Week End
I need users to pick a beginning week and an ending week since the data being returned in a range of start week to end week.
I am attempting to highlight the entire week on any date picked on start ...
0
votes
2
answers
454
views
How can I call a function when a someone clicks outside the mat-menu?
I want to run a function every time a user opens a mat-menu and then clicks outside it. How can I detect that the mat-menu is opened and that a click event has occurred outside it?
Thanks!
2
votes
2
answers
400
views
Angular Material: Components background color became transparent after customizing theme
Issue:
After customizing the theme colors of my Angular Material application, multiple material components lost their background colors such as (MatTooltip, MatSelect, MatDialog etc...)
I followed the ...
1
vote
1
answer
437
views
Angular Material button works, but does not look Material
So, I am just starting to use Angular Material.
I added two buttons and a slider to my new app:
<button class="mat-button" color="accent">An Angular Material button</...
4
votes
2
answers
157
views
How to Change the styles of mat card which is used in Angular library component
I have used mat-card in angular library component like the below
<mat-card class="la-card">
<mat-card-header class="la-card__header">
<mat-card-subtitle>...
0
votes
1
answer
710
views
MatPaginator & MatTableDataSource - Change Total Size
im using MatPaginator with MatTableDataSource and when I assign data to the dataSource it change the lenght i assign to the MatPaginator. So, when I load nextpage, sort or filter, dataSorce change the ...
0
votes
0
answers
147
views
Angular 12 Material Icon outside element
i'm just trying to add new icons to my project and some just render outside the element
The ones i'm trying to add: calendar_view_week, calendar_view_day
When i tried this exemple all icons work (...
0
votes
0
answers
25
views
parsing mat-sort-header state when mat-pagitnator clicked
I am currently implementing sorting into a table of data for an angular website I am working on. Currently, let's say that there are 10 rows of data, but the user has "Only show 5 rows" ...
0
votes
0
answers
123
views
How to use Angular Material Drag Drop for 2 custom list components
All the examples from the Angular Material site for drag and drop show one component which has 2 arrays: https://stackblitz.com/angular/volxgedeaga?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-...
1
vote
1
answer
2k
views
Hide mat select after I select an option from the dropdown
I need to add an extra option to the dynamic options that are being added to Mat-Select.
Once I choose "Other" as the option I want the mat-select to be hidden and a text area to appear ...
3
votes
1
answer
345
views
Angular flex layout not applying to child component
I am trying to create a flex layout grid component of mat-cards in angular like so:
<div
fxLayout.xs="column"
fxLayout="row wrap"
fxLayoutGap="10px"
ngClass.gt-...
0
votes
1
answer
251
views
how to make mat-menu which should not overlap on the trigger
I have a long list in mat menu which should not overlap on the trigger
here, I am not able to see trigger if the list is more its overlapping on trigger
https://stackblitz.com/angular/egdpolqbbgp?file=...
0
votes
0
answers
323
views
Angular dialog problems
I've been having issues with angular material dialog boxes for days. After messing around with Angular and material versions and syntax I've gotten close enough where I don't get module errors when I ...
0
votes
0
answers
97
views
Mat-Autocomplete not listening to scroll event
I'm trying to add a scroll event on a mat-autocomplete but it's not firing this event.
<input
matInput
[formControl]="myControl"
[matAutocomplete]="auto"
name=...
0
votes
0
answers
71
views
How to convert and use angular material components into web elements
I am trying to convert angular material table into a web element.
This is what I have tried
import { Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
...
1
vote
1
answer
395
views
Why does compiling angular dependencies from es2015 to esm2015 remove html tags in environment?
As soon as the generating browser application bundle is over intellij can't resolve the html tags anymore. Why is that?
Also i found out if i don't add the AngularMaterialModule to the AppModule i ...