Angular - Show content from component if checkbox checked. Each checkbox has separate component

Let say I have 4 checkboxes.

<mat-checkbox>1</mat-checkbox>
<component-1></component-1>
<mat-checkbox>2</mat-checkbox>
<component-2></component-2>
<mat-checkbox>3</mat-checkbox>
<component-3></component-3>
<mat-checkbox>4</mat-checkbox>
<component-4></component-4>

Each checkbox has a separate component that contains form or content. When the user checked any of 3 checkboxes it will load and show/load the component content, but if the user checked 4th checkbox it will uncheck all above checkbox also discard and show only content of component-4

** User can check 1 or all 3 first checkboxs