How to properly manage a boolean signal input in a custom Angular element (v19)?

I have a web component created with Angular 19 prerelease version. It has a liked signal input, which can be set from a parent but can't be modified from within because signal inputs are read only. To manage toggling the state, I introduced a local signal _liked, which I can toggle and emit its value to the parent. This feels like an overkill, I'm not sure if this is a good way of handling the state.

Do you have any suggestions on improving the following code?

export class LikeButtonComponent {
liked = input(false, { transform: booleanAttribute });
_liked = signal(this.liked());

likedChange = output<boolean>({ alias: 'likedchange' });

constructor() {
effect(() => {
this._liked.set(this.liked());
});
}

toggleLike() {
this._liked.update(value => !value);
this.likedChange.emit(this._liked());
}
}


I looked into the model() and it doesn't seem to be suitable here because it doesn't expose a transform option. The problem is that when values are passed into a web component they are passed as strings, like this <like-button liked="true"></like-button>.

Continue reading...