Handling groups of checkboxes/categories in angular

Goal is to set up the alerts subscription feature for different categories for a single user.

I have multiple groups of check boxes as shown in the below pic. when i click on submit button on a category, it should make a post service call with the appropriate data (checked or unchecked elements).

here is the mock data (flexible to change the data or schema). Note : max, both, clear are the categories.

alertsData = {
    customerDetails: {
      name:'John',
      age:'25',
      phone: ['12345677891', '2345678919'],
      email: ['srk@gmail.com', 'xyz@gmail.com'],
    },
    alerts: {
      max: {
        type: 'max',
        phone: ['12345677891'],
        email: ['xyz@gmail.com'],
      },
      clear: {
        type: 'clear',
        phone: ['12345677891'],
        email: ['srk@gmail.com'],
      },
      both: {
        type: 'both',
        phone: ['12345677891'],
        email: ['srk@gmail.com', 'xyz@gmail.com'],
      },
    },
  };

so the question is what is the best practice to send the appropriate data(checkboxes) to the service. and best schema for alerts data (mock)?

I have already created the sample application with all the components and service class. please guide me if am missing anything here ?

here is stackblitz link, please check the browser console while testing the application.