How to Hide div element only after all checkbox gets unchecked

I have a table which has a column Bill which has checkbox as values. So when I click the check box I have written code in such a way that two new columns(named Ratio and Revasst) get added to the table.

Mytable

Table on checkbox click

What I need is that I want to hide it again. But the condition here is it can be hidden only if all checkboxes in the column are unchecked.

So for example if I have 4 values as checkboxes in that Bill column. If I check one it opens. If I check the other three it should stay open. It should be hidden again only if all values gets unchecked.Kindly help if u know

Note:Please do that without changing my original functionality

My stackblitz link: https://stackblitz.com/edit/angular-ivy-qwwntr?file=src%2Fapp%2Fapp.component.ts