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
3
votes
1answer
13 views

Correct way to bind mat-radio-group to nullable boolean?

I have a simple form showing data from a REST server. One of the fields is a boolean but can be null. My UI has a mat-radio-group with two mat-radio-button elements, one with value "true" and one ...
0
votes
0answers
17 views

Angular Material Collapsible SideNav?

Just curious whether Angular Material includes an API for collapsing the Angular Material sidenav as is shown in this related SO question. This is the NGX Admin version.
0
votes
2answers
25 views

Input value two-way data binding not updating with empty string

I'm using Angular 8.1.3. Here's my HTML... <mat-form-field floatLabel="never"> <input matInput placeholder="Address Line 2" [value]="addressLine2" [disabled]="disableAddressFields"> <...
0
votes
1answer
25 views

Center Text Vertically in Mat-Select

I can't seem to figure out how to get the text to center inside my container div. See the top pic is what I'm trying to accomplish and the bottom is what I have so far. Here's my code: @Component({ ...
0
votes
1answer
19 views

Two way data binding for multiple mat-selection-list

I have list of groups coming from a service and creating multiple selection list for all the groups. Each group has a list of templates, like an array inside a array. my code <mat-expansion-...
0
votes
2answers
29 views

Adding/removing HTML elements dynamically

I have created an angular 8 app that allows a user to choose a date from a angular material date picker control. The app then sends a request a Mongodb using NodeJS to return a list of available daily ...
0
votes
0answers
5 views

Align Mat-Card Right Side of Page

This seems like it should be very simple but what I have seen and tried is not working at all. I have one card that returns an array and I just want it on the top right of the page with a little ...
0
votes
1answer
11 views

How to change Angular Mat-Table Theme Colors

Scenario: The material table shows the dark theme out of the box. But all the examples show the table color white. https://material.io/components/data-tables/ I was able to change alternate rows ...
0
votes
0answers
18 views

Angular Reactive Forms markAsTouched a custom ControlValueAccessor

I have a custom field editor: class EmarCustomDosageEditorComponent extends MatFormFieldControl<string> implements ControlValueAccessor In the main form I'm calling this.form.markAsTouched(); ...
0
votes
0answers
8 views

mat-form-field floatLabel=“never” not working

For some reason using Angular 8 this parameter of never does not work for me on a mat-select. <mat-form-field appearance="outline" floatLabel="never"> <mat-label>Lesson</mat-label&...
0
votes
1answer
33 views

angular multiple ng-content containers doesn't respect template

We are trying to create a toolbar component that receives its menu items from another component. We want menu items on the left (main nav) and on the right (language + user buttons). We provide three ...
0
votes
0answers
23 views

Trying to align a filter group with a table

I have a filter form group above a table. How can I align it with the headings of the table below? Unfortunately, I know very little about CSS/HTML so it's hard to know where to start. I had tried ...
0
votes
1answer
48 views

NullInjectorError: No provider for ElementRef

I created an internal directive in a module in my project (Angular 8 + Material Design). Following tuto and official doc. @Directive({ selector: '[button-confirmation]' }) export class ...
0
votes
1answer
20 views

How to create a Angular material tree using Dynamic data coming from the angular services

I am very new to angular . I have requirement that I need to create a tree structure dynamic data using angular material. I have followed so many examples in internet but everybody is using static ...
0
votes
0answers
26 views

error: Uncaught ReferenceError: process is not defined

In my project, I'm using angular 6 with Spring-boot and what I want to know is how to resolve the error called Uncaught ReferenceError: process is not defined at Object../node_modules/util/util....
0
votes
1answer
29 views

How can i delete the selected items from the database with MatSelect

I want to delete the selected items from the database , I implemented in the MatTable a MatSelect with MatCheckbox , and after i select the items i want to press a button to delete them .. This is ...
0
votes
0answers
22 views

how to have nested mat-option in mat-select angular 7

I have mat-select and mat-datepicker. In mat-select there are 3 option.when I click on 3rd(Custom) option it must show datepicker,without closing mat-select panel.To achieve this is there any plugin. ...
0
votes
0answers
40 views

Angular Material Theme

I am currently using Angular 8 with Angular Material. My question is that my theme is loaded on the network tab, but it's not applying. Any idea why?
0
votes
1answer
54 views

Angular matSelect not populating

I am trying to use matSelect Version 7.3.7. The problem is that it doesn't populate (or just doesn't open?). It doesn't matter if I populate from an array or if I add the options manually. When I ...
0
votes
0answers
25 views

Accessing direct URL of an Angular routed link with passed state

I have a TabComponent with Angular Material Tabs: <nav mat-tab-nav-bar mat-align-tabs="center" class="tabs"> <a mat-tab-link *ngFor="let param of parameters" [routerLink]="['/...
1
vote
2answers
27 views

Set initial value to a Toggle of a form in Angular Material within HTML

I am working with a simple form: HTML <mat-card> <form (submit)="onAddBet(betForm)" #betForm="ngForm"> <mat-form-field> <textarea #description="ngModel" matInput ...
0
votes
1answer
13 views

Array from Checkbox Angular Material

Through this example that I found on the Internet, I want to store in an array the selected elements of a Selection list in Angular material <mat-selection-list #shoes> <mat-...
0
votes
1answer
24 views

Angular Date Range Picker not able to implement

I'm trying to create a date range picker in Angular 7 with the help of angular material. But whenever I click on the calendar, the value is not updated on the input field. I'm sharing my code below. ...
1
vote
0answers
29 views

Keep Image Size the same even after zooming in and out

I have a mat-sidenav component filled with mat-card components. Outside the sidenav, I have the rest of my page. What I would like is for my sidenav card components to keep the exact same size as ...
0
votes
1answer
26 views

How can i select a checkbox by default? <mat-list-option>, Angular Material

I have the following html component: <mat-selection-list #shoes> <mat-list-option *ngFor="let shoe of typesOfShoes"> {{shoe.title}} </mat-list-option> </mat-selection-...
0
votes
0answers
10 views

mat-sidenav or any mat element - how to change the theme/color/backgroundcolor

I have started using angular material elements, but it looks like for all the elements like below screens, everything is dark theme/background, for any element if I override with custom CSS, then mat-...
0
votes
0answers
15 views

Need help in mapping validation messages from component to html

I am new to angular, I have my validation errors in the component class as you can see in code below and I have html where I can do the ngif, but now I want to map those errors in the component class ...
0
votes
0answers
28 views

Nested Angular Material Menu

I am new to angular and I'm creating a dynamic/nested menu based from my data below. I include the codes that I started with. Any help is appreciated. Below is my json data: dataList = [ {List: '...
0
votes
2answers
35 views

animation in angular, hide/show specific div for x number of seconds

I have a angular page whose design is like this. The value 1022 comes from socket events which are handled in component, it keeps on changing after some time. What I need is, when I get any new ...
0
votes
1answer
47 views

Collapsed card on click

I have problem with collapsed card on Angular. I have component import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-numbered-card', templateUrl: './numbered-card....
-1
votes
0answers
13 views

Autocomplete with database

How is it possible to use this autocomplete search and combine it with e.g. CouchDB-Lucene or ElasticSearch? Thank you in advance
1
vote
2answers
84 views

How to implement an OnClick action on a MatTable row?

I want to implement an OnClick on a row with reference. If i click on a row with user 1 i want to go so see details of user 1 For example, if I click on the row of user1, I want to access the ...
0
votes
0answers
20 views

Save the current theme value locally using angular

Actually i want to save the current theme what the user activated in the browser. When the next time the user comes in and opens the browser or if the browser refreshes automatically i don't to change ...
1
vote
1answer
43 views

How to get onload event of a material stepper in angular 6

I have a material-vertical-stepper in my application, which is shown inside a bootstrap modal. I have used (selectionChange) directive inside mat-vertical-stepper to track the onchange event. But it ...
0
votes
1answer
39 views

Validate Email,Phone and PAN number in single Input field in angular 7 form control

so i want to create one input field which will tell the which type it is like mobile or email or PAN no.,so how can we do this in formcontrol i tried using regex pattern but its not working <form ...
1
vote
1answer
45 views

How to change the date display format if the data is taken from an array?

How to change the date display format if the data is taken from an array? What do you need to do for this? If do so, it will turn out nonsense. {{row[column.lowercaseValue] | date}} html: <...
1
vote
2answers
36 views

Angular Material Data Table not sorting?

[STACKBLITS LINK] I'm attempting a minimal angular material data table with sorting. I've added the MatSortModule, implemented @ViewChild in the class, added the directives, set the dataSource.sort ...
0
votes
1answer
25 views

How do you go from a user being able to only check one checkbox to multiple checkboxes in Angular?

I have an angular app, basically when the user clicks on check me checkbox, I only want the user to be able to select only one check box from the selection list. If the check me checkbox is not ...
1
vote
1answer
39 views

Minimal Material Table Demo ID Column not rendering? [on hold]

I'm attempting to create a minimal material table demo - Note this is a stackblitz link and the id column is not rendering. Here's the app.component.ts: import { Component, OnInit } from '@...
0
votes
0answers
15 views

Keep angular material datpicker popup open on keydown

I'm using angular material datepicker and want to keep datepicker popup opened after enter pressed.
0
votes
0answers
23 views

How do Angular Material MatSort and sortingDataAccessor work together?

I am working with Angular Material Table. I am trying to implement custom sorting behavior. I am already using a sortingDataAccessor like this: export class BillsComponent implements OnInit, ...
0
votes
1answer
35 views

Add arrow css after angular material tab

I am using Angular-material tab to display some tabs. I want to add some arrow css after each tab. Below is the code snippet that i'm trying. But not able to display the arrow <mat-tab-group> ...
-4
votes
2answers
40 views

Installing the Angular Material Indigo Pink Theme on Stackblitz? [on hold]

Normally we could just add the theme to styles.css and it would work. For example I have this Stackblitz where it works; However now Stackblitz complains that it can't find the core theme. Thoughts?...
1
vote
2answers
32 views

mat-expansion-panel body won't work with ngFor

I am trying to implement a mat-accordion, where the mat-expansion-panels body show the information of an array. The array has no fixed length, so I try to add content to the body with *ngFor. But the ...
0
votes
0answers
25 views

Null Injector Error in angular material file upload

I used angular-material-fileupload (https://www.npmjs.com/package/angular-material-fileupload) in angular 7 project. But in run time browser throw this exception: core.js:5847 ERROR Error: Uncaught ...
0
votes
0answers
33 views

Add custom Component in mat-tab-group

I have create a mat-tab that I reuse a lot in my different tab-groups. Since I do not repeat code, I created a component mat-tab-foo. It contains the following HTML: <mat-tab label="Foo"> &...
1
vote
1answer
52 views

Accessing functions of angular in javascript/JQuery

Pretty novice in coding, so I have no clue which language it is. I have a component.ts file which contains a function. In ngOnInit(), I have written a part of code in Js cause of dependency. Im trying ...
-2
votes
1answer
32 views

is there way to create a pagination for a page in angular?

I am unable to create angular pagination for a list of cards i added some cards but i do not know how to make the component with pagination <!-- Grid column --> <div class="column-2 px-...
2
votes
0answers
40 views

Is there a way to use Angular router parameters in CSS?

I am trying to use the Angular Router to link parameters from a .ts file into my CSS file for the HTML template such as 'background-image: {{ image }}'. I am using the Angular Material card component ...
0
votes
1answer
29 views

testing cdk overlay with jasmine spy

Similar to testing mat-dialog, what's a good way to test cdk overlay? MatDialog Service Unit Test Angular 6 Error example service call: openNotifications(origin: HTMLElement) { this....