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…

bts_dev
- 83
- 1
- 7
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

Rahul Mallah
- 11
- 1
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…

Rachel Karen Green
- 11
- 2
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().
`
…

Pim redrum
- 1
- 1
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 :

madhurika tiwari
- 1
- 2
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…

KeyserSoze_AN
- 9
- 1
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…

user18067747
- 19
- 1
- 6
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…

user17249158
- 1
- 1