Angular — добавить раскрывающийся список в div

Я пытаюсь добавить раскрывающийся список в div. HTML-код (например, раскрывающийся список) является динамическим кодом. Несмотря на то, что при нажатии на него отображается кнопка раскрывающегося списка, но раскрывающийся список не работает. Ниже приведен мой код из файла компонента

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
@ViewChild('showfilters') el:ElementRef;


this.el.nativeElement.innerHTML = this.el.nativeElement.innerHTML + `
<div class="dropdown " dropdown>
   <a class="dropdown-toggle  text-light" dropdownToggle> New Dropdown</a>
   <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
     <a class="dropdown-item"> Profile</a>
     <a class="dropdown-item" href="#">Another action</a>
     <div class="dropdown-divider"></div>
       <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
   </div>
</div>
`;

Мой HTML <div class="showfilters" #showfilters>

Я создал пример на StackBlitz< /а> тоже.