Having a problem with setting a class via custom pipe that I wrote.
I use signal Store that I map over to check if the value is matched with id in the store and if the condition is true, then if it’s true return one class, if not then return different class.
Store:
const initialState: LightboxState = {
isActive: [
{ id: 'singleSided', status: false },
{ id: 'doubleSided', status: false },
{ id: 'illuminated', status: false },
{ id: 'notIlluminated', status: false },
{ id: 'standing', status: false },
{ id: 'hanging', status: false },
],
Pipe:
@Pipe({
name: 'setClass',
standalone: true,
pure: false,
})
export class setClassPipe implements PipeTransform {
private store = inject(LightboxStore);
transform(value: string) {
this.store.isActive().map((id) => {
console.log(id.id);
if (value === id.id && id.status === true) {
console.log(id.status);
return 'btn-active';
}
console.log(id.status);
return 'btn-not-active';
});
}
}
template:
<button
type="button"
class="shadow"
(click)="changeStatus('singleSided', 'doubleSided')"
[class]="'singleSided' | setClass"
>
JEDNOSTRONNY
</button>
The function reads properly value, id.id and id.status, but does not set any kind of class to the buttons even if initially it’s false