Style not rendering in innerHTML in Angular2

Question

I am developing a page in Angular2/4 which has a left navigation bar. I put this left menu in a separate component and nesting this in the main component. Reason being I need to reuse this left menu in multiple pages/ components, however, different page will have different menu items. So, I am trying to pass the menu items from the main component through @Input() binding:

sidebar.component.ts:

@Component({
selector:'sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent{
@Input() innerContent:string;

....

sidebar.component.html:

<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow' 
    [class.sideBarHide]='!isSideBarShow' >

    <ul class='goo-collapsible' style="margin-bottom:0px" >

        <li class='header'><!--Common header in left menu-->
            <div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
            <div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
            <div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
    </li>
   </ul>
  <ul class="goo-collapsible" style="margin-bottom:0px" [innerHTML] = "innerContent"><!--This should hold menu items depending upon main page-->
  </ul>

   </div>

   mainpage.component.html:
   -------------------------

   sidebar [isSideBarShow]="isSideBarShowShared" [innerContent] = 
   "viewLayout" (notify) ="onNotify($event)"></sidebar>

   mainpage.component.ts
   -----------------------

  ....

 ngOnInit() {
      //this.nav.hide();  

    this.viewLayout = `<!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
        <ul>
            <li ><a href='#'>Content</a></li>
            <li ><a href='#'>Comments</a></li>
            <li ><a href='#'>Tags</a></li>
        </ul>
    </li>
    <li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
    <li  class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
        <ul>
            <li ><a href='#'>Group</a></li>
            <li ><a href='#'>User</a></li>
        </ul>
    </li>
    <li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
    </li>`;


   }

What I am seeing is that the style is being dropped from the innerHTML. I followed following instructions, but no luck:

Angular2 innerHtml binding remove style attribute

I learned that accessing DOM directly is not recommended in angular2 but any better/ recommended approach for this scenario? Any help would be very much appreciated!!

regards

How many different side menus will you have? If it's 2 or 3 I may have a solution that I recently tried out with success. — penleychan, Aug 01 '17 at 21:13
Also if you are doing something like innerHTML, maybe have a look at content projection.. @ContentChild /@ContentChildren.. That may give you what you want. — JGFMK, Aug 01 '17 at 21:15
@JGFMK Looks interesting. Thanks for the pointer. I will look into it. — jine, Aug 01 '17 at 21:20

score 0 · Accepted Answer · answered Aug 01 '17 at 21:32

The thing you are trying to achieve by innerHTML can also be done using ng-content which will enclose the specific component html in your sidemenu html.

Your sidemenu.html should look like this

<div id='mySidebar' class='sidebar-primary sidebar-animate' [class.sideBarShow]='isSideBarShow' 
    [class.sideBarHide]='!isSideBarShow' >

    <ul class='goo-collapsible' style="margin-bottom:0px" >

        <li class='header'><!--Common header in left menu-->
            <div class='glyphicon glyphicon-arrow-left' style='float: left; width: 33%;padding-left:5px;cursor:pointer;' (click)='editTheme()'></div>
            <div class='glyphicon glyphicon-search' style='float: left; width: 34%;cursor:pointer;'></div>
            <div class='glyphicon glyphicon-remove' style='float: left; width: 33%;cursor:pointer;' (click)='sideBarClose()'></div>
    </li>
   </ul>
  <ul class="goo-collapsible" style="margin-bottom:0px">
   <!--This should hold menu items depending upon main page-->
   <ng-content></ng-content>
  </ul>

   </div>

You application-main.component.html or any file where you want to include sidemenu comeponent should be like this :-

<div> 
 ..... Blah Blah whatever page component html

 <sidebar [isSideBarShow]="isSideBarShowShared"  (notify)="onNotify($event)">
   <!---- Whatever goes inside the component tag , is part of ng-content ---->
   <!li class='dropdown'><a (click)='changeHeaderTextAlign()'><span class='icon-table'></span> Top Navigation Bar</a>
    <ul>
        <li ><a href='#'>Content</a></li>
        <li ><a href='#'>Comments</a></li>
        <li ><a href='#'>Tags</a></li>
    </ul>
   </li>
   <li><a href='#'><span class='icon-folder-open'></span><input type='color' value='#999999' (input)='headerColorChange($event)'> Header Image with Text</a></li>
   <li  class='dropdown'><a><span class='icon-user'></span><input type='range' min='0.1' max='1' step='0.1' (change)='setHeaderOpacity($event)'> Page Section</a>
    <ul>
        <li ><a href='#'>Group</a></li>
        <li ><a href='#'>User</a></li>
    </ul>
   </li>
   <li><a (click) = 'addDynamicComponent()'><span class='icon-cogs'></span> Footer and Social Media</a>
   </li>
  </sidebar>
</div>

Also you can put multiple ng-content in a component using [select] attribute.

<ng-content select="[header]"></ng-content>

And in the other component file using it, just on the parent html tag give the name assigned in select as an attribute to the tag like this..

<div header> Blah blah..... </div>

Style not rendering in innerHTML in Angular2

....

1 Answers1