title: Angular 5 table with drill-down feature
body: <p>I am working on angular 5 and have a requirement to create a table with drill down feature where there can n number parent child components and when you click on parent all the children will be displayed(drill-down). Please find the sample data below.</p>
  
  <pre><code>"[{"Id":1,
  "ClientName":null,
  "ProductName":"Product1",
  "CatagoryName":null,
  "Jsondata":"[{\"TKey\":\"hubname\",\"TValue\":\"XXXX\"},{\"TKey\":\"IPAddress\",\"TValue\":\"YYYY\"},{\"TKey\":\"Origin\",\"TValue\":\"ZZZZ\"},{\"TKey\":\"Domain\",\"TValue\":\"AAAA\"},{\"TKey\":\"Health\",\"TValue\":\"Running\"}]",
  "ParentName":"",
  "Name":"XXXX",
  "EntityType":null,
  "CreatedTime":"2018-02-09T13:20:23.253",
  "child":[  
     {  
        "Id":2,
        "ClientName":null,
        "ProductName":"Prod1",
        "CatagoryName":null,
        "Jsondata":"[{\"TKey\":\"AgentName\",\"TValue\":\"BBBB\"},{\"TKey\":\"AgentIP\",\"TValue\":\"YYYY\"},{\"TKey\":\"Agent_Address\",\"TValue\":\"ZZZZ\"},{\"TKey\":\"Response\",\"TValue\":null},{\"TKey\":\"Status\",\"TValue\":\"Running\"}]",
        "ParentName":"XXXX",
        "Name":"BBBB",
        "EntityType":null,
        "CreatedTime":"2018-02-09T13:20:23.257",
        "subChild":[  
           {  
              "Id":2,
              "ClientName":null,
              "ProductName":"CAUIM",
              "CatagoryName":null,
              "Jsondata":"[{\"TKey\":\"AgentName\",\"TValue\":\"CCCC\"},{\"TKey\":\"AgentIP\",\"TValue\":\"DDDD\"},{\"TKey\":\"Agent_Address\",\"TValue\":\"FFFF\"},{\"TKey\":\"Response\",\"TValue\":null},{\"TKey\":\"Status\",\"TValue\":\"Running\"}]",
              "ParentName":"BBBB",
              "Name":"CCCC",
              "EntityType":null,
              "CreatedTime":"2018-02-09T13:20:23.257"
           }
        ]
     }
  ]
  }
  ]"
  </code></pre>