Style not rendering in innerHTML in Angular2 - html

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

Answer 1

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>