Я пытаюсь загрузить компонент Angular 2 рекурсивно с рекурсивным массивом (plunk:http://plnkr.co/edit/3npsad?p=preview).

Учитывая этот рекурсивный массив:

[
  {
    "id": 1,
    "text": "abc"
  },
  {
    "id": 2,
    "text": "def",
    items: [
      {
        "id": 21,
        "text": "def-1",
        items: [
          {
            "id": 211,
            "text": "def-1-1"
          },
          {
            "id": 212,
            "text": "def-1-2"
          }
        ]
      },
      {
        "id": 22,
        "text": "def-2"
      }
    ]
  }
]

Мне нужен следующий вывод:

<my-item>
    <div id="1" text="abc"></div>
</my-item>
<my-item>
    <div id="2" text="def"></div>
    <my-item>
        <div id="21" text="def-1"></div>
        <my-item>
            <div id="211" text="def-1-1"></div>
        </my-item>
        <my-item>
            <div id="212" text="def-1-2"></div>
        </my-item>
    </my-item>
    <my-item>
        <div id="22" text="def-2"></div>
    </my-item>
</my-item>

Я мог только визуализировать первый уровень ввода, как показано в моем плане. Как я могу заставить свой компонент рекурсивно повторять и выводить желаемый результат? Входной массив может содержать любое количество элементов и вложенности.

Спасибо!