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.

Filter by
Sorted by
Tagged with
0
votes
0answers
11 views

Angular Material, unit test MatTabGroup as Viewchild

I have a mat-tab-group that I'm watching via @Viewchild <mat-tab-group class="split form-column double form-tabs" #phaseTabs> @ViewChild('phaseTabs') phaseTabs: MatTabGroup; When running the ...
0
votes
0answers
7 views

MatDatepickerIntl switch between English and French languages

I am trying to implement MatDatepickerIntl for English and French languages. I need aria-label to be changed whenever I switch the language in the application (from English to French and vice versa). ...
0
votes
0answers
32 views

Read pipe value from JSON based on Condition - Angular

I have the following JSON: columns: [{ id: 'id', header: 'Employee ID', value: 'id', hasPipe: false }, { id: 'name', header: 'Employee Name', value: 'name', ...
0
votes
2answers
25 views

Angular Material Drag and Drop - Different Object Types

I'm building a shopping cart and would like to be able to drag and drop items from a list of Products into the Cart and add them to the "items" of the Cart. The Products are more like technical ...
0
votes
1answer
7 views

How to access the width/heigh of a angular material dialog in the code

Is there a way to access the width/height of a dialog component, which is being styled in the css? This is how I'm creating the dialog this.dialogRef = this.dialog.open(MyComponent, { position: ...
0
votes
1answer
19 views

How to add backdropClass for mat-select?

<mat-select formControlName="country" panelClass="CountySelect" backdropClass="full-width"></mat-select> Want to add backdropClass to specific mat-select cdk-overlay-pane. How can we do ...
0
votes
0answers
25 views

Have body of all mat-horizontal-stepper steps outside of the mat-horizontal-stepper tag

I want to use this : https://material.angular.io/components/stepper/overview but for the purposes of layout (which can be dynamic) where I may or may not have elements come in between the clickable ...
0
votes
1answer
17 views

Change angular material multi select's selected values css

I want to change material multi select selected values css. <mat-form-field class="mat-form-field-fluid"> <mat-select placeholder="Kullanıcı Yetkileri" [(...
0
votes
1answer
28 views

How can I apply outisde borders to a table of angular material?

I'm trying this way but it didn't work The template is: <table mat-table [dataSource]="dataSourceListadoEstados" class="mat-table-riesgo-generico"> <ng-container matColumnDef="...
0
votes
3answers
61 views

Read JSON Value in Javascript upto multiple levels

I Have a array of JSON Objects as follows: columns: [{ id: 'id', header: 'Employee ID', value: 'id' }, { id: 'name', header: 'Employee Name', value: 'name' }, { id:...
0
votes
0answers
17 views

Angular 8 Mat-Tables Dynamic Columns and Expanding Rows

First time posting here so please forgive any mistakes. I'm working on an Angular 8 project with Angular Material libraries. It's a website that needs to be able to be viewed on mobile, so we're ...
0
votes
1answer
11 views

Angular drag and drop: Items should not remove from container after drag and dropped

I am using Angular drag and drop CDK: I am able to drag and drop items from one container to another and vice versa. Now, I am trying to not to remove a dropped item from a container, but it should ...
0
votes
2answers
34 views

Parameterized default route in angular

How can i set default route with parameters (eg: www.test.com/landing-page?uid=123&mode=front&sid=de8d4) const routes: Routes = [ { path: '', redirectTo: 'landing-page', pathMatch: 'full' },...
0
votes
0answers
17 views

How to use in Angular 8+ set of images stored as SVG?

How Electrical symbols library in SVG (https://commons.wikimedia.org/wiki/File:Electrical_symbols_library.svg) might be used in Angular 8+ application ? I would like to have ability to refer ...
0
votes
1answer
43 views

I want to make timer up for angular

I want to make time up timer for angular. It should be like a stopwatch and also Ii can pause resume stop start it and from time which specified timer will start from that. I have used <countup-...
-4
votes
0answers
17 views

How to show the editable pdf in angular 7 [closed]

I need to show a PDF form (editable PDF) in angular 7 project. I mean, need to preview the PDF in webpage and when a user click/ hover on the textbox in the pdf then it will show the textbox name/id. ...
0
votes
3answers
35 views

mat-radio-button, weird workflow

I'm trying to understand what is wrong with my code, but not able to: <mat-radio-group fxLayoutGap="6px" (change)="onChangeRadio($event.value)"> <mat-radio-button ...
0
votes
0answers
19 views

Snapping a Div to a Grid and draw a Div of any size within an element container

I am trying to replicate the Jquery UI Snap to Grid feature https://jqueryui.com/resources/demos/draggable/snap-to.html in Angular 7 with material design. I also want to draw or create a div of any ...
0
votes
0answers
13 views

Multi date select feature in angular material

Angular Material doesnt have multi select datepicker feature Need a calender which would highlight select/unselect date as we click on each date (as shown in image). Should return selected date list ...
0
votes
1answer
24 views

How to change the styling of popup calendar of Angular material date picker

I am only allowed to use Angular material (No Bootstrap or any other library). How can I change the style of this popup calendar? Like the font, of the background color, or instead of circle I ...
0
votes
0answers
4 views

Material design table rendering ERROR TypeError: ctrl._updateTreeValidity is not a function

When I try to load a material table in a reactive form web page I get two errors: a) ERROR TypeError: ctrl._updateTreeValidity is not a function (I suspect the main error) b) busProf.html:242 ERROR ...
0
votes
0answers
15 views

How do I put multiple mat-icons as matSuffix or matPrefix one after another in a single mat-form-field input? [closed]

Whenever i try to use two mat-icons as matSuffix or matPrefix in a single mat-form-field input they come one over other vertically but i want them to be one after other horizontally. This is what is ...
0
votes
0answers
9 views

Add box-shadow to mat-slider

I would like to add a box-shadow: 0 0 10px 1px #e91e63; to the filled section of a mat-slider I have only managed to put the box shadow over the whole mat-slider by adding the css rule to .mat-slider-...
1
vote
2answers
32 views

NgIf and HTTP GET boolean response, mat error does not showing

I want to validate if user entered login that is already in database, for this I am sending HTTP GET to my backend, I got desired response (boolean value), but <mat-error> does not show on true: ...
0
votes
1answer
22 views

Invalid property value after deploying in Prodction Environment

I'm a bit puzzled why this happening in different server environment. I have a global css class declared in my style.scss in my Angular application. This class was used in different pages with data ...
0
votes
1answer
39 views

Drag and Drop in Angular on complex board (matrix)

So I want to make my version of the Battleships game in Angular and to do that I need a 10x10 matrix in which I can drag and drop the ships ( if you played the game you know what I am talking about ) ...
1
vote
0answers
40 views

Angular Side Bar with “Half” side mode

I want to set up a left sidenav which will open and close dynamically, exactly like this Angular Material Side Bar with "Half" side mode but in angular js..Is there any suggestion?
-1
votes
0answers
14 views

How to create generic custom component for MatAutocomplete Angular Material

I would like to create a custom component for Mat-Autocomplete as a generic solution for the whole project. please help me to find a answer. I have found this below link for custom component for Mat ...
2
votes
1answer
34 views

Custom material drop down with reactive form

recently I'm trying to create a custom dropdown component using value accessor but I can't set a value to this dropdown. This part of the dropdown component <mat-form-field> <mat-...
-1
votes
0answers
19 views

mat-table not rendering content

I have a mat-table that is not showing if the data is empty (ngIf). After I add an item through a mat-dialog I call a method to get the data and then pass it as a data source to the mat table. The ...
0
votes
1answer
25 views

Alignment of buttons in toggle button group in Angular Material

I am trying to make a material tool bar with few material button inside. I want to align first button on left side and rest three buttons on right side of tool bar. I am trying to achieve this from ...
0
votes
2answers
36 views

Passing multiple values from dialog in Angular 8

I have created a dialog using Material Design for Angular. In the original example there was only one field, which was bound with one parameter in parent view. I want to create a dialog, that gathers ...
0
votes
1answer
18 views

angular material table resize column

I am trying to show some data on my webpage with an angular material table but the view doesn't look so good what should I do? I want to have resizable column and data be in the right place not like ...
0
votes
0answers
52 views

Angular Material Datepicker Validator in FormBuilder

Does Angular have a built in FormBuilder Validator for Angular Material Datepicker? (just like email address?) I have a Formbuilder with Validators.required, however typing in'abcde', also allows ...
0
votes
1answer
23 views

Autocomplete Material show [object object]

Autocomplete material implementation, but selecting an item from the list shows as [object object]. To show the array of data in which it requires the use of this module I apply it with the following ...
0
votes
0answers
24 views

Is there a way to create a modeless dialog in an Angular/Electron app?

Is there a way to create a modeless dialog in an Angular/Electron app? I'm looking at the samples below, and they're all modal: https://material.angular.io/components/dialog/overview I need to be ...
0
votes
0answers
12 views

Mat-Dialog Data is not rendered data correctly when the navigation routes are different for same component

Previously I was using only one route ('/xxx') for multiple scenarios as data representation remains same and Mat-Dialog also was working correctly without any problem. But recently, I encountered a ...
0
votes
2answers
66 views
+50

Duplicate Column Name Provided: Angular Material Data Table

For some reason I'm getting a error when making a checkbox column for my data table. I understand the error from the console, but what can I do to fix it? view.component.html <mat-card-content&...
0
votes
1answer
25 views

complex angular ngrx effect with confirmation dialog in middle of chain

So I have simple process of deregistering clients from policy. My deregister action should: based on selected clients from list fetch all clients data based on theirs ids after fetching data from ...
-1
votes
0answers
30 views

Form control getter getting null while running jasmine test cases

I am stuck while writing test Jasmine unit test cases, I have code like below this.memberDetailsData = res; // set response generateForm(this.memberDetailsData); //calling method from ngOninit() ...
0
votes
1answer
28 views

Close mat-sidebar by eventEmmiter()

I use material-sidebar for showing the mobile menu. I want to close sidebar when any of item in the menu is clicked. I send out by the EventEmmiter() function to close the sidebar from child to ...
0
votes
1answer
19 views

Mat-button-toggle is by default yes in my application

I am using mat-button-toggle in my application and the problem is it is in by default YES for me. How to make it unselected? <div> <mat-button-toggle-group name="certRqrd" #...
0
votes
2answers
32 views

Accessibilty -Focus is lost when route changed in Angular

Navigating between Components Focus is getting lost.i have forcefully set the focus to a menu button but once the router navigation is changed then also the focus is getting lost. Is there a fix to ...
0
votes
1answer
28 views

Angular Material Select shows the function name in the option field

I'm creating a dropdown in my form which takes data from an enum I have created. So what is happening is when I'm iterating the element in mat-option it list all the fields of the enum as well as the ...
-1
votes
1answer
37 views

Angular matSort not working on Date column by desc

Trying to sort the material table with date column , date format is 'MM/DD/YYYY ,h:mm A' , order of date is not by latest date and time. Anything which i missed from the below stackblitz code. https:/...
0
votes
0answers
24 views

Click event not firing due to concurrent repaint

Using Angular8 reactive forms and Angular Material components, I'm having an issue where a component isn't receiving a click event due to being repainted at the same time (I believe that's the cause). ...
-2
votes
2answers
63 views

Mat auto complete not filtering the values

I've a list of products, which I'd like to have an auto complete feature while selecting, but this doesn't seems to be working the way I'm trying. Any help will be highly appreciated in this regard. ...
-1
votes
1answer
14 views

Get Value as string from Angular Material Form [closed]

I have created a reactive Form with Angular Material. I want the value of this form as string but it's returning value as [object Object] Attaching Image and stack-blitz for reference. Image - Image ...
0
votes
0answers
28 views

I have an issue to display nested json file in side-nav

I have an issue to display my nested json to mat-side-nav My json file department: {departmentID: 15; departmentName: Site; listOfDepartment: Department []} so I have ...
0
votes
1answer
35 views

Delete Selected Rows on Looped Rows on Angular Material Data Table (Angular 7)

I have a dynamic data table build using Angular Material where I am using an API to supply the table with data currently. What I am trying to do is add delete capability where I am able to select a ...