按角度处理复选框/类别组

目标是为单个用户的不同类别设置警报订阅功能。

我有多组复选框,如下图所示。 当我点击某个类别上的submit按钮时,它应该使用适当的数据(选中或未选中的元素)进行售后服务呼叫。

下面是模拟数据(可以灵活地更改数据或模式)。 笔记 :麦克斯,两个都是明确的类别。

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'],
      },
    },
  };

所以问题是,向服务发送适当数据(复选框)的最佳实践是什么。 警报数据的最佳模式(模拟)?

我已经创建了包含所有组件和服务类的示例应用程序。 如果我遗漏了什么,请引导我?

这是 stackblitz 链接,请在测试应用程序时检查浏览器控制台。

application flow: app.component >> parent.component >> child.component