create cascading dropdown on selecting node value from nested json using reactive form

Question

I am looking for a way to show dependent dropdowns using reactive form with the help of dynamic Json. Below is my main input json:

JsonObj = {
        'Desktop': {
            'pwdevices': {
                'pwsize': 777,
                'pwtype': 'mobile'
            },
            'pwid': 456,
            'pwrules': 'generate'
        },
        'Laptop': {
            'release': 'april',
            'service': 'provisioning',
            'sheerid': 123,
            'sprint': {
                'id': 990,
                'support': 'desktop'
            }
        }
    };

Dropdown should show the json keys like below: Val 1: Desktop(selected)/laptop > pwdevices(selected)/pwid/pwrules > pwsize(selected)/pwtype > number Val 2: Desktop/laptop(selected)> release/service/sheerid/sprint(selected)> id/support(selected) > string

And so on...

Each val/constructed dropdown row above will have a delete button. Clicking on it will delete corresponding val.