Questions tagged [angular-material-8]

Angular Material2 is an implementation of Material Design in Angular. This tag is for version 8.x of Angular Material2. Do not use this tag for other versions (e.g. v6, v7) or for AngularJS Material (the implementation of Material Design for the older AngularJS framework).

Usage

  • This tag is intended for questions which ask about Angular Material2 v8.x
  • Please take note that you should use the tag for AngularJS 1.x Material questions instead of this tag.

Goal

Taken from the official repo:

Our goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.

Asking a question

  • Mention the versions of Angular and Angular Material2 that you're using.
  • Reduce your issue to a small example
  • Post a reduced working code on stackblitz.com
  • If there's a bug (or some unintentional behavior), try to troubleshoot the problem. (If it's a bug report, please create a new issue at Angular Material2's Github repository instead.)

Learn more

To learn more about Angular Material, visit the following resources to help you get started:

38 questions
1
vote
1 answer

Angular material change tick color inside mat-checkbox

I'm trying to change the tick color inside the mat-checkbox from white to black, but I cannot find the CSS class for the tick mark, anyone please help?
Lynn
  • 182
  • 2
  • 10
1
vote
1 answer

Angular changeDetector.detectChanges() breaks matTooltip in *ngFor

The matTooltip in following component is redering correctly. The overlay and small bubble for the tooltip is rendered, but the text is missing (although in the html when inspecting in the browser) and it isn't positioned correctly. Interesting is,…
Liero
  • 25,216
  • 29
  • 151
  • 297
1
vote
0 answers

I want to send data to back-end by selecting multiple values as object as mentioned in form 2

I want to achieve output as format 2 and i am getting only format 1. so please help me. How can i do that? Please help me .I am new to angular and stack-overflow. Please don't be harsh on me if i made any silly mistake. Thank you. Thank you. I…
1
vote
1 answer

Generate theme on demand angular 8

I have requirement to take color palette from config file which contains colors based on domain. Config file is json file placed at root of the project. In angular material 1 there is a way to generate theme on demand by lazy-generate-theme Is…
1
vote
1 answer

angular material, show dialog from a component that is lazily loaded

I have a lazy loaded module, named account. In account there's a RegisterComponent and a RegisterDialogComponent. I'd like to show a dialog from AccountModule.RegisterDialogComponent in AppModule.AppComponent. For testing…
user12207064
1
vote
2 answers

Duplicate items in angular material drag and drop

is there some way in angular material to prevent duplicate items in drop list? here is example code https://stackblitz.com/edit/angular-xjex4y-43l7uh I try to check if the item already exists in an array with event.currentIndex but this is not…
Arter
  • 2,224
  • 3
  • 29
  • 66
1
vote
1 answer

Implement JSON data from API into mat-autocomplete input

I am trying to use Angular Material Component "Highlight the first autocomplete option" onto an input which uses JSON data from an API server (which already works by fetching all the JSON data). Don't know where I am going wrong with this. I have…
user11843930
1
vote
4 answers

Get Angular errors in a different language

If I validate an Angular Reactive form like this this.formGroup = this._formBuilder.group({ formControl: new FormControl(null, [Validators.required]) }); So the input is required. Then if I try to submit with the input blank I receive errors like…
Joey Gough
  • 2,753
  • 2
  • 21
  • 42
0
votes
0 answers

How to add progress bar when click upload button?

I work on angular 8 application I need to add progress bar when click upload button so progress bar will work when click button upload until finish upload upload service PostUpload(file) { const formData: FormData = new FormData(); …
0
votes
1 answer

Display onHover icon on every treenode in Angular Material 8

I am having requirement to display icon on Hover on every treenode in Angular Material 8. What is the best way to achieve this? Considering we will be having 500-1000 treenodes and performance aspects, I do not want to achieve this using…
user2672420
  • 303
  • 2
  • 4
  • 14
0
votes
2 answers

Angular Material - table mat-table not rendering data from rest api

I have been trying to implement mat-table in angular 8. I don't understand what I'm doing wrong, the data which is being provided by my REST endpoint is clearly visible on the console output. my admin.component.html file
AnanR
  • 29
  • 1
  • 7
0
votes
1 answer

Mat radio button ripple effect animation fade out

I am using angular material 8 and I am using mat-radio button. I am able to ovveride the color of the radio button and the animation. But when I click the other radio button, the existing radio button fading out animation is still in pink color. I…
indra257
  • 66
  • 3
  • 24
  • 50
0
votes
1 answer

Angular Material 8 radio button value as a boolean

I have a simple website with 2 properties: One radio button group (with 2 radio buttons) and an input field (text field) What I'm trying to do is once the user submits the form, the boolean value of the selected radio button and the value of the…
CodingIsFun
  • 1
  • 1
  • 4
0
votes
0 answers

Angular 8 Is there a way to stop triggering [disabled]="somefunc()" function on button on every keystroke?

Here is the code snippet: isNextStepDisabled() { console.log('In…
meDev
  • 877
  • 1
  • 9
  • 17
0
votes
1 answer

How to fetch url from backend to iframe when change in selection in angular material

.html page .ts file this.url = 'https://www.youtube.com'; On change of selection from dropdown list based on the url ifrmae src should get updated.