Algolia RefinementList - Add widget is undefined

Open Q&A
#1

Hello everyone, i’m trying to add custom UI styling to my refinement list so I can have them as pills. Currently I’m getting this error

image
image755×227 8.98 KB

I have copied exactly how they are doing it on the website on their documentation, and i still am having no luck. Here is my code:

image
image622×793 28.5 KB

image

Does anyone have a solution for this?

#2

I don’t know anything about Angular but I did something similar with CSS:

input.ais-RefinementList-checkbox {
	position:absolute;
	visibility: hidden;
}
.ais-RefinementList-item {
	padding: 0 5px;
	background: #eee;
	border-radius: 9999px;
	float: left;
	margin: 2px 16px 8px 0px;
}
.ais-RefinementList-item--selected {
	background: #9400ff;
	color: white;
}
.ais-RefinementList-labelText {
	margin-left:3px;
	margin-top:-2px;
}