angular 5 display nested questions and answer show item under it parent item

Question

this is my server response for quetions and answers.. its a array.

[
    {
        \"id\": 1,
        \"product\": 1,
        \"user\": \"alex\",
        \"text\         


        

Answer 1

Try this HTML, where responses is as follows

responses = [
    {
        "id": 1,
        "product": 1,
        "user": "alex",
        "text": "is it ok?",
        "parent_id": null,
    },
    {
        "id": 2,
        "product": 1,
        "user": "john doe",
        "text": "yes its ok.",
        "publish": true,
        "parent_id": 1,
    },
      {
        "id": 3,
        "product": 1,
        "user": "shiva",
        "text": "how can i .. . .",
        "publish": true,
        "parent_id": null,
    },
]


  

    Ques : {{res.text}}
    

    Answers :
    

       

         {{res2.text}}
       
    
  

Check this fiddle