Reactive forms - Adding dynamic checkboxes to the expansion panel component

Question

I have created a simple movie list app and I am using a checkbox list to filter my movie list by genre.

I succeeded without the reactive forms approach. I was wondering how I could continue it using the reactive forms approach.

The code below shows how my expected functionality looks (without reactive forms):

demo-link

I've tried implementing reactive forms, but I'm not sure how to do it:

try-link

Thanks.

Answer 1

You have to watch the from, when its value changes do your job.

this.form.valueChanges.subscribe({
    next: (value) => {
        // do your job here
    },
});