Routing link is not working in dynamic html angular 8

Question

this is my typescript code

getFeatureMenu()
  {
    this.featureService.getAllFeatures().subscribe(data =>
    {

        this.featureData=data;
        for(var i=0;i<data.length;i++)
         {
             this.theHtmlString+="<li class='nav-item'><a [routerLink]='['/admin/feature']' ng-reflect-router-link='/admin/feature' routerLinkActive='active' class='nav-link'  (click)='show()'><i class='flaticon-dashboard'></i><span>Feature 1</span></a></li>";
         }
     
      });
  }

this is my Component.html

   <div class="sidebar-menu-content"  id="MainMenuList">

       <ul class="nav nav-sidebar-menu sidebar-toggle-view" [innerHtml]="theHtmlString" >

</ul>
</div>

Scenrio is i am calling getallfeature api and it gives me features list.now i am creating this dynamically and set to innerhtml in .Feature shown in my list but i cannot see the routerlink in html so please kindly do let me know how can i achieve this? Also i donot want to use this

template:
<Div>
<a [routerLink]=["/comp11"]> Crisis Center </a>
<a <routerLink]=["/comp12"]> Heroes </a>
<a [routerLink]=["/comp21"]> Heroes </a>
<a <routerLink]=["/comp22"]> Heroes </a>
</ Div>
,})