Динамический меню на Angular 7

Передо мной вот такая задача создать динамический меню на Angular 7. У меня вот такой JSON

{
  "menu": [
    {"id": "1", "parent_id": null, "url": "who-we-are", "desc": "Who we are"},
    {"id": "2", "parent_id": "1", "url": "our-mission", "desc": "Our mission"},
    {"id": "3", "parent_id": "1", "url": "our-history", "desc": "Our History"},
    {"id": "4", "parent_id": "1", "url": "leadership", "desc": "Leadership"},
    {"id": "5", "parent_id": "1", "url": "members", "desc": "Members"},
    {"id": "6", "parent_id": "1", "url": "join-aahpo", "desc": "Join AAHPO"},
    {"id": "7", "parent_id": "6", "url": "members", "desc": "Become a member"},
    {"id": "8", "parent_id": "6", "url": "renew-your-membership", "desc": "Renew your membership"},
    {"id": "9", "parent_id": "7", "url": "pay-your-dues", "desc": "Pay your dues"},
    {"id": "10", "parent_id": "8", "url": "renew-your-membership", "desc": "Pay your dues"},
    {"id": "11", "parent_id": "1", "url": "faqs", "desc": "FAQs"},
    {"id": "12", "parent_id": "1", "url": "contact-us", "desc": "Contact Us"},
    {"id": "13", "parent_id": "1", "url": "partnerships", "desc": "Partnerships"},
  ]
}

Обработаю его с помощью рекурсивной функции

menuPush(content, pid = null) {
    let menu = [];
    for (let i = 0; i < content.length; i++) {
      if (content[i]['parent_id'] === pid) {
        menu.push({
          id: content[i]['id'],
          url: content[i]['url'],
          desc: content[i]['desc'],
          dropdown: this.menuPush(content, content[i]['id'])
        });
      }
    }
    return menu;
  }

А вот html

<ul class="rd-navbar-nav">
  <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a routerLink="/who-we-are">Who we are</a>
    <!--RD Navbar Dropdown-->
    <ul class="rd-navbar-dropdown">
      <li><a routerLink="/members">Members</a></li>
      <li>
        <a routerLink="/join-aahpo">Join AAHPO</a>
        <!-- RD Navbar Dropdown -->
        <ul class="rd-navbar-dropdown">
          <li>
            <a routerLink="/become-a-member">Become a member</a>
            <ul class="rd-navbar-dropdown">
              <li>
                <a routerLink="/pay-your-dues">Pay your dues</a>
              </li>
            </ul>
          </li>
        </ul>
        <!-- END RD Navbar Dropdown -->
      </li>
      <li><a routerLink="/partnerships">Partnerships</a></li>
    </ul>
    <!--END RD Navbar Dropdown-->
  </li>
</ul>

Проблема в том что я не знаю сколько будет длина и сколько parent в одном меню. Можете помочь в написании.