Questions tagged [mat-chip]

13 questions
3
votes
1 answer

Angular Material Chips appearing as rectangle instead of being Rounded inside a sidenav

I created a stackblitz example If you open the side nav and then see the chip on the expansion panel you will see its rectangular in shape but it should look circular. How do I fix this ? Edit: This is there as an issue already on Github
dota2pro
  • 7,220
  • 7
  • 44
  • 79
2
votes
0 answers

mat chip list inside a dialog window in Angular?

Then when user types in some data, the related dessert list data fetched from DB should be displayed in pre-populated mat-chips list format as follows:(may be if this is not possible, we can display a dropdown of prepopulated available desserts…
1
vote
2 answers

TypeError: this._chipGrid.registerInput is not a function error in Console after updating the material version 15.x.x

I've update my Angular to version 15.2.1 using the saem material version as 15.2.1. Here is the code which I was using
1
vote
1 answer

How to use Angular mat-chip-row?

I had import MatChips Module in both the app component and my class component, but it still shows this error: NG 8001: 'mat-chip-row' is not a known element: 1. If 'mat-chip-row' is an Angular component, then verify that it is part of this…
0
votes
1 answer

How can i expand mat-select with custom action?

I have to implement a new function in mat-select next to the arrow, but i always messed up the html/scss and this new icon get covered by chips items. I attached a picture how this should looks like. mat-select my mat-select
qwerty
  • 3
  • 1
0
votes
0 answers

Focusing Angular Material Chip programatically within Material Stepper Child Component

My Problem: I do have a Angular Material mat-chip-listbox component with mat-chip-option childs within Angular Material Stepper. When this step is openened i want the first child to get focus(). `
0
votes
0 answers

Grid in angular

I have 3 columns in which I am trying add list of users for view and edit, list of admins. But as I have added 2-3 names of users, all names appears in vertical format, I want them to place in horizontal position. Below is my code :
0
votes
0 answers

Accessibility issue on Mat-chip-list- aria attributes does not match their roles

For mat-chip-list as per the document the aria-role for chiplist as listbox with each chip has option as role,even I gave those two role as mentioned in the below code,
Hestia
  • 11
  • 1
0
votes
1 answer

override the mat-chip-remove positioning styles

On mat-chip documentation i read that: MatChipRemove Applies proper (click) support and adds styling for use with the Material Design "cancel" icon available at https://material.io/icons/#ic_cancel. You may use a custom icon, but you may need to…
0
votes
1 answer

How to show selected name in angular material multi select checkbox and chips component

I'm using multi select checkbox with angular material chip. I have array objects with name and id, name is supposed to be displayed if user select options and id must be sent to backend. When I assign [value]="topping.id", its showing selected id…
Johnny
  • 261
  • 7
  • 22
0
votes
1 answer

Angular- How to limit multiple mat-chip and unable to disable the input

This is my stackblitz recreation of a small part of my project. In here I am facing 4 problems:- I want to limit user to just one mat-chip. I tried [disabled]="selectedOption >=1" even though this one works, I do not want to disable the remove…
0
votes
3 answers

Read the json with sub array values and display on the html using ngFor

Hi I am developing a web app where I am display a student data received in json format. Here is the typescript code snippet export interface studentData{ ID : number; Name :string; Class : string; Languages: string; …
Devops_Dev
  • 21
  • 3
0
votes
1 answer

How to display angular material chips in bootstrap themed project?

Mat chip Display Based on the image above, I am facing issues to display mat chips in the bootstrap themed project. It only displays as a full chip after I click or tap on some keys. I've installed angular material and imported mat chip in my…