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.

1
vote
0answers
22 views

Angular-Material dropdown not displaying correct value when same selection is made?

I have a input field where the user can both type and select from a dropdown. I have three dropdowns [Test1, Test2, Test3]. Whenever I change the dropdown from Test1 to Test2 or Test3, the display is ...
0
votes
0answers
15 views

How to update/replace data in Angular Material Tree

I'm trying to implement a search function (filtering) in a material flat tree component, but nothing happens when I update my dataSource. I feel like I have tried all different methods and can't get ...
0
votes
0answers
8 views

how can I nest grid-lists in angular material?

When I try to nest grids in angular they disappear. Here is an example : https://stackblitz.com/edit/angular-eib7wz I tried playing around with the column property but I still get a similar result, ...
0
votes
1answer
11 views

How to make Angular Material Dialog re sizable in Angular 7?

I am using angular material dialog and AngularJS 7. I am able to drag the dialog but I want to make that dialog re sizable so that used can resize it to what ever the size he wants. const ...
1
vote
1answer
15 views

Angular Material Checkbox inside expansion panel header: how to allow the checkbox to be activated with the keyboard?

I have a checkbox inside the expansion panel header and for accessibility reasons the checkbox needs to be functional for keyboard-only users. However, if you tab to focus on the checkbox, pressing ...
0
votes
0answers
15 views

PWA Angular 7 material icons problem on IOS

I created PWA application with angular 7, angular cli 7+, and keycloak as a user authorization layer. Everything works fine on Android devices but on IOS when the app is installed I cannot see the ...
0
votes
0answers
20 views

Checking 'validity' of expression string based on 'rules' in <input>/<mat-select>

I need to 'validate' (not evaluate) a string input/mat-select that is a 'proper' combination of predefined 'fields', 'operators', 'values', and/or 'keywords to create a 'query string'. It's not unlike ...
0
votes
0answers
11 views

How to add user input field row to Mat Table dataSource

I have loaded purchase invoice item list in a mat-table dataSource .And,Imagine following item list fields like, No ItemName ItemCode Quantity ItemPrice Tax TaxAmount TotalPrice 1 Item1 ...
1
vote
0answers
28 views

How to use checkboxes to filter a mat-table in angular 8

I am trying to use checkboxes to filter a table i have but everything i tried so far didn't work. This is my a sample of my table : <mat-table [dataSource]="dataSource" [hidden]="!show" ...
1
vote
2answers
21 views

Using mat-tab-group focusChange event, How to stop user navigating to other tab

i want to conditionally prevent user from navigating to other tab in mat-tab-group. I found one monkey patching here How to conditionally prevent user from navigating to other tab in mat-tab-group. ...
0
votes
0answers
17 views

Why material folder is not showing up under ng_modules/@angular?

I am setting up angular material in angular6. I have installed material and imported BrowserAnimationModule in AppModule. But the material folder under ng_module/@angular is still not visible. I have ...
1
vote
2answers
29 views

Why don't buttons in mat-menus submit?

I am using mat-menu to display a list of options for the user. When the user clicks on an option, it should trigger the submission of my formGroup. dropdown.component.html <form [formGroup]="...
0
votes
1answer
15 views

Mat-pagination doesnt work with Angular 8

I have a project with pagination options. https://stackblitz.com/edit/angular-sjp8qq But mat-pagination tag´s properties arent tied up with an app logic. Can someone tell me why, please?
0
votes
0answers
25 views

How to add a column to Angular material table to set the row active/inactive, while the checkbox should not affected

After adding a column to set status active/inactive, the checkbox is also getting selected/deselected. I have this code: <div class="mat-elevation-z8"> <table mat-table [dataSource]="...
0
votes
0answers
51 views

Angular 8.0.1 platform.es5.js:102 Uncaught TypeError: Object(…) is not a function

I'm taking an online mean stack tutorial and I ran into some issues after trying to implement angular material, specifically the input module I'm getting this error message in my chrome browser ...
0
votes
2answers
32 views

Unable to focus on a Mat card using viewchildren Angular

I am trying to focus on a specific card from a list of mat cards But I keep getting error Cannot read property 'focus' of undefined Stackblitz code Should add a gold outline on click of button ...
1
vote
2answers
24 views

Difference between Template Driven Form and Reactive Form using a service

I would like to know when should I use a template driven form instead of a Reactive form. I know the theory based in that question(What are the practical differences between template-driven and ...
0
votes
2answers
25 views

Angular: Can't get synchronization except after the second click on mat-select radio

I'm following my previous thread. My problem: is that there isn't synchronization between the profession libelle that I selected and the displayed profession libelle. The cause is: localStorage ...
0
votes
0answers
7 views

formGroup expects a FormGroup instance.Please pass one in

if "form" tag can be placed inside "div" tag and why am i getting the above error,i am using angular material but due to above error even page is behaving uneven is it related to the above issue
0
votes
1answer
21 views

Spacing between Material Buttons

I have two material buttons in my angular application right next to each other. I want to add a little bit of padding between them. But when I add add padding-right to the left button, I end up ...
0
votes
2answers
34 views

how to solve 'mat-list-option' is an Angular component?

I have tried everything on the internet and nothing seems to fix my error. this is my NgModule : import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; ...
1
vote
3answers
40 views

How in Angular Material to set values ​of “Y” and “N” for component checkbox?

The database I use does not use boolean values true and false. How in Angular Material to set values ​​of Y and N for component checkbox? html: <mat-checkbox formControlName="IS_ACTIVE" (...
0
votes
2answers
35 views

Mat-icon does not show icon

I love angular material's design, but using it can be a pain. The site shows an example using <mat-icon>home</mat-icon> However, when I do the same thing in my project, I just see the ...
0
votes
0answers
11 views

Is there a decent solution to add tick labels to Material Angular mat-slider?

Apparently, tick labels is not supported in the mat-slider in the Material Angular API. Is there any decent solution to achieve this?
0
votes
1answer
34 views

How to pass the data from one component to another

I need to pass an id of object from one component to another. <ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-cell *...
0
votes
1answer
18 views

Is there a way to resize using angular material drag and drop

I am creating a web app using angular and Material, I want to be able to drag, drop and resize my sections. Is there a way it can be done using angular material drag and drop cdk?
0
votes
2answers
37 views

How to highlight only one expansion panel onclick and reset if choose other

Firstly, I am very new to Angular world. Trying to achieve a task. I really appreciate all inputs. Coming to the issue. I am creating multiple expansion panel using a "ngFor". I want to highlight or ...
0
votes
1answer
23 views

How to change background by changing theme?

i have a background image as cover setted in my by css class, now i would like to remove it and apply background color.. I've tried making a function to change theme, for example from light to dark ...
0
votes
0answers
23 views

Mat table Shift selection on Mutiple rows

I am trying to select multiple rows of a mat table using shift selection. Below is the code i had. So i was able to get the indexes but how would i retrieve rows method selected row selectedRow(...
0
votes
2answers
38 views

Auto close Material Sidebar right after clicking on nav item is not working

I need to auto close Material Sidebar right after navigation by clicking on Sidebar nav items. but it seems it isn't working naturally in that way. I'm creating Stackblitz for my issue: Stackblitz ...
1
vote
1answer
38 views

Material Angular scrolls to top on opening of mat-select and hides

In my application I'm using material select component. Expected behavior I want to achieve is: when i open selector field that is bounded to selector should scroll to top of viewport and options ...
1
vote
2answers
37 views

Toggle Two classes using mat-slide-toggle

Toggle two classes d-block and d-none using mat-slide toggle. When toggled is checked I need to change the d-none class to d-block and d-block to d-none <mat-slide-toggle > View All Statuses &...
0
votes
0answers
21 views

How to implement Multiple Selection with SHIFT using Angular Mat-Sort-Table?

I tried to expand the Angular Sorting Table example by adding a selection function to the table rows. I managed to implement the click highlight (selection) and the Ctrl+Click selection. Sadly I cant ...
0
votes
2answers
26 views

How can I make it so only this `mat-card-subtitle` in this above header gets color red?

I learn Angular material and I have this code <mat-card-header> <mat-card-title>Search for books</mat-card-title> <mat-card-subtitle>press enter on search</mat-...
0
votes
1answer
26 views

Angular 6: ERROR Error: Cannot find control with unspecified name attribute with angular material and reactive forms

I have array of string from which I want to display it in textbox. I am using reactive forms. I know there are similar questions too. But I didn't get the solution. So I am posting this as a new ...
0
votes
1answer
35 views

Why required message not shown when using mat datepicker?

I have the following template: <input type="text" class="form-control" name="my_date" [matDatepicker]="myDatepicker" #myDate="ngModel" [(ngModel)]="myDateValue" id="my_date" required&...
0
votes
1answer
29 views

Why value is not populated inside the input in mat datepicker?

I have current template: <input type="text" class="form-control" name="my_date" [matDatepicker]="myDatepicker" #myDate="ngModel" [(ngModel)]="myDateValue" id="my_date" ...
-1
votes
1answer
39 views

Enabling a button using select box

Simply I have two radio buttons when the first radio button is selected one select box appears and when the radio button is selected two select box appears. After this, I have one button "SUBMIT" now ...
0
votes
0answers
36 views

Angular Material DatePicker user input error with autocomplete

There is a already known issue with the mat-datepicker but the solution is not working perfectly for me because I got different date formats depending on the current selected language of the website. ...
0
votes
4answers
47 views

Fixed hamburger icon angular

I generated a header component using ng generate @angular/material:material-nav --name header, in this I need to have the hamburger icon fixed even if the screen size is larger. Right now it appears ...
1
vote
1answer
85 views

Input box attribute set dynamically on radio button change

I am having 20 mat-expansion-panel and each expansion-panel having one radio group and each radio group having 5 radio buttons, and below radio button there is one comment box. So I want something ...
1
vote
1answer
40 views

How to make subtitle text smaller in Angular Material card

I learn Angular Material and wonder how to make the subtitle text smaller. Look at the picture: <mat-card-subtitle>press enter on search</mat-card-subtitle> It has almost the same size ...
0
votes
1answer
25 views

How to solve mat-datepicker-toggle position problem?

I've imported material to my Angular 8 project successfully and I'm using bootstrap for styling. I don't plan to use all the material library, only when required. Datepicker from material is one ...
0
votes
2answers
36 views

Wrong input value when using ngFor and ngModel and an Array

I use ngFor to create inputs, then when I type in a value, both the current and the latter input get the typed in value. <div *ngFor="let val of selectionValues; index as valIndex"> <input ...
0
votes
1answer
18 views

angular material scrolling not showing up

I am trying to use angular material scrolling. Here is my code: app.module.ts: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ...
0
votes
0answers
19 views

Angular i18n for attributes with select

I have an element I want to translate using i18n from angular. The part that I want to translate is the matTooltip but the value is a select. I know that I have to use i18n-matTooltip to make it work. ...
0
votes
2answers
29 views

How to display data from API in Angular Material table?

I have an API which has data (array within array, etc). I want to display some of this data in a Datatable. Here is the code: First I have customer.ts model export interface CustomerResponce { ...
1
vote
1answer
26 views

Angular Material AutoComplete with clear button is getting cleared by Enter

Adding clear button (Section Input with a clear button) to my autocomplete component results in strange behaviour: hitting enter clears input either it's selected option or not. To illustrate my ...
0
votes
0answers
17 views

How to add mutiple header rows using angular material table

Parameter 1: Time Period {{element.value}} Parameter 2: Gender {{element.gender}} <ng-container matColumnDef="column3"> <mat-header-cell *...
0
votes
0answers
14 views

How to fix 'Cannot read property 'AITOR' of undefined at Object.updateRenderer'

I am trying to use a datatable to show all of our containers(shipping company). I use angular 8 and material design and a datatable ready to use that I have changed for my own needs. I have tried ...