Category "angular-material"

How do you implement a simple progress bar in Angular 8?

I would like to implement a progress bar which increases progressively as a variable increases. I've tried it 3 ways, none of them work as I wrote it. Using CSS

ANgular- Is it possible to add Mat-Paginator in regular table?

I made a regular HTML table in angular, whose data comes from API. I want to add mat-paginator in it. This is my code: <table class="table" style="text-align

Angular 7 shared service for siblings component to get data from other sibling

In my Angular 7 app I have two sibling componentns... configurator component and custom stepper component. In configurator component I have some functions that

Angular Material component is not looking like it should be

I'm using Angular Material components in my web application. But the thing is everything is working fine but The components are not displaying as they should be

mat-paginator does not show page info

Material paginator does not show page info. In official documentation, there is page info: 'Page 1 of 20' but when I run their own code locally, or in Stackblit

Angular Material where the opened panels of a mat-select wouldn't close with module federation web pack 5

I am facing issue with Angular Material where the opened panels of a mat-select wouldn't close in host app. Host and remote app both are using Angular 12 and an

Angular Material dialog popup shows in the bottom of page instead of popupping

I'm creating Angular Material dialog popup but instead of popupping the component shows in the bottom. Component.ts constructor(public dialog: MatDialog) { } o

How to access an Angular Component using its injection token?

I'm working with Angular Material Drag and Drop. Material DnD is designed to create some components on the fly during the drag sequence. For instance the visual

Mat-Option selected option based on patch value from api subscription

In my case i have several controls with mat-autocomplete with mat-options. in which the same form is handled for new entry creation and edit an existing entry d

How to update html content of an element with angular function?

I have a table fulfilled with ngFor directive. Each line has a title, a badge (Material badge) and a button. I would like to change matBadge value when I click

ERESOLVE Error when installing Angular Material

I'm currently creating a project with Angular 13, the Ionic CLI, and Angular Material. I have no problem adding @angular/material when I don't use Ionic, but us

How to disable input outline in angular material

I use angular material mat-form-field and matInput. But input has this outline . How can i remove it? <mat-form-field appearance="outline" class="form__item

Angular Material Datepicker Selection Strategy - how to get value of selected date range

I'm trying to create a table which will display some info. The columns will be dynamically changing according to the selected date range. I'm using Date range p

Is it possible to make mat-grid-list direction to be right to left?

I am using mat-grid-list of Material in an Angular project. I would like that the mat-grid-tile items direction will be in right to left order (By default the o

Why My custom colors are not working in my Angular material theme?

I trying to add more color to my angular material theme, I've added the success color in my style.scss by the map.deep-merge fucntion // Custom Theming for Angu

Angular MatStepper fails to recognize cached values from two str arrays (but successfully recognizes values from another str array)

I have a MatStepper that's used to navigate to the next page of a signup flow. I also have a method that loads values from a cache if it's available, and if so

Angular material form field input - green border when input is valid

I am trying to change the border of a mat-form-field to green when the input is valid without overriding CSS classes and I was sure I am missing an easy trick.

How to disable typing but allow copy and paste in a text box in Angular 8?

I want to restrict typing in a text box but I need to paste anything inside that textbox in Angular

Store Object with Angular Autocomplete, not only Value in Input

Working on Angular, I created an Input with mat-autocomplete and mat-option (data comes from an Object Array, using NgFor). Properties of Object are ID, name an

mat-select is not level A compliant according to AInspector WCAG

I'm using Angular material in my website and trying to make it WCAG level A compliant. Doing some checks with the AInspector (extension for Firefox) seems the m