I installed bootstrap using the npm install --save bootstrap command and now I have an Angular component called navigation.component.html:
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
<li class="nav-header">
<div class="dropdown profile-element">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<span class="block m-t-xs font-bold">Example user</span>
<span class="text-muted text-xs block">menu <b class="caret"></b></span>
</a>
<ul class="dropdown-menu animated fadeInRight m-t-xs">
<li><a class="dropdown-item" href="login.html">Logout</a></li>
</ul>
</div>
<div class="logo-element">
IN+
</div>
</li>
<li class="active">
<a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">Main view</span></a>
</li>
<li>
<a href="minor.html"><i class="fa fa-th-large"></i> <span class="nav-label">Minor view</span> </a>
</li>
</ul>
</div>
</nav>
When I run the application, the code looks like this:
<body>
<div id="wrapper">
<ws-root _nghost-pqf-c14="" ng-version="9.0.0">
<ws-navigation _ngcontent-pqf-c14=""> <!--- ISSUE HERE --->
<nav role="navigation" class="navbar-default navbar-static-side">
Putting ws-root and ws-navigation tags inside the div#id tag is causing the CSS to not display the application correctly.
https://i.sstatic.net/V4gjU.png
vs
https://i.sstatic.net/37mDO.png
What am I missing here? How can I prevent ws-root and ws-navigation tags from affecting the layout?