Issue
I have a component where I have created a group of buttons. The user should be able to select multiple buttons - when selected the value of those buttons is added to an array and when deselected removed from the array. If the user selects the 'all' button the other buttons are unselected.
I have a running version of this code on stackblitz however the full functionality is not as expected.
https://stackblitz.com/edit/angular-ivy-je18ji?file=src%2Fapp%2Fapp.component.html
Mock Data used retrieved by service
{
"name": "mockClass",
"label": "mockLabel",
"attributes": [
{
"name": "Button1"
},
{
"name": "Button2"
},
{
"name": "Button3"
},
{
"name": "Button4"
},
{
"name": "Button5"
},
{
"name": "Button6"
}
]
}
Data Service component
@Injectable({
providedIn: 'root'
})
export class DataClassService {
getMockDataClass() {
return metadata;
}
}
Exported const is just a simple string
export const SEARCH_BUTTON_GROUP_ALL = 'all';
TS Component
export class AppComponent implements OnInit {
@Input() dataClassName: string;
lame = "Angular " + VERSION.major;
selectedAttributes = ["all"];
dataClass: DataClass;
searchButtonGroupAttributes: any;
constructor(private dataClassService: DataClassService) {}
ngOnInit() {
this.dataClass = this.dataClassService.getMockDataClass();
this.searchButtonGroupAttributes = this.dataClass.attributes;
}
searchButtonGroupClick(attributeName: string) {
if (this.selectedAttributes.indexOf(CONST.SEARCH_BUTTON_GROUP_ALL) >= 0) {
this.selectedAttributes =
attributeName === CONST.SEARCH_BUTTON_GROUP_ALL ? [] : [attributeName];
} else if (this.selectedAttributes.indexOf(attributeName) >= 0) {
const index = this.selectedAttributes.indexOf(attributeName);
if (index >= 0) {
this.selectedAttributes.splice(index, 1);
}
// debugger;
// this.selectedAttributes = this.selectedAttributes.filter(
// a => a !== attributeName && a !== CONST.SEARCH_BUTTON_GROUP_ALL);
} else {
if (attributeName === CONST.SEARCH_BUTTON_GROUP_ALL) {
this.selectedAttributes = [CONST.SEARCH_BUTTON_GROUP_ALL];
} else {
this.selectedAttributes.push(attributeName);
}
}
}
}
Html Component
<hello name="{{ lame }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<div class="btn-toolbar">
<button
type="button"
class="btn btn-outline-info m-1"
(click)="searchButtonGroupClick('all')"
[ngClass]="{active: selectedAttributes.indexOf('all') >= 0}"
>
All
</button>
<div *ngFor="let attribute of searchButtonGroupAttributes">
<button
type="button"
class="btn btn-outline-info m-1"
(click)="searchButtonGroupClick(attribute.name)"
[ngClass]="{active: selectedAttributes.indexOf(attribute.name) >= 0}"
>
{{attribute.name}}
</button>
</div>
</div>
The desired outcome would be to be able to deselect and select buttons in groups and store their value. I have debugged the code and the functionality of adding and removing values to array is working however this is not reflecting in the dom as buttons are not being selected deselected properly
EDIT
Error was in html condition of ngClass should be [ngClass]="{active: selectedAttributes.indexOf(attribute.name) >= 0}
Solution
You just have a typo at the template where you add/remove class for selected button.
Here should be >=
:
[ngClass]="{active: selectedAttributes.indexOf(attribute.name) >= 0}"
Answered By - MysterX
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.