It is posible to put a component into a body component? - html

Question

I have this problem.
I have a component calls navbar and it is fix for all app.
<div class="wrapper" fixed>
<nav id="sidebar" [ngClass]="{'active':!navbarOpen}">
<div [ngClass]="{'sidebar-header':navbarOpen,'sidebar-header-active':!navbarOpen}" >
<h3 align="left">CHROMAE PROJECT</h3>
</div>
</nav>
<div id="content" [ngClass]="{'active':!navbarOpen}">
<nav class="navbar navbar-default fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div>
<button class="btn btn-info navbar-btn" type="button" (click)="myClickEvent()" >
<i class="glyphicon glyphicon-align-left"></i>
<span>MENÚ</span>
</button>
</div>
</div>
<div align="right">
<button class="btn btn-info navbar-btn" align="right" type="button" (click)="logOut()" >
<span>LOGOUT</span>
</button>
</div>
</div>
</nav>
</div>
</div>
So in other component calls home i have this:
<app-navbar>
<div>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
<div *ngIf="getIsModerator()">
hola Admin
</div>
<div *ngIf="getIsUser()">
hola Admin
</div>
</div>
Can i put the "div" with ngIf like that?
<app-navbar>
navbar.div with id = content = {
<div>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
<div *ngIf="getIsModerator()">
hola Admin
</div>
<div *ngIf="getIsUser()">
hola Admin
</div>
</div>
}
Because im trying too add inside navbar div class with id="content" that divs with *ngIf.
I dont know if i can explain my self :D

Answer 1

It looks like you are trying to use something like <ng-content> and content projection. Here is a useful article explaining it a little.
Here is a Stackblitz demoing a very small ng-content example.
For quick reference, in your "parent" component (in your case your nav-bar) you will tell angular where you want nested content to go:
nav-bar.component.html
<div class="wrapper" fixed>
<!-- your nav-bar code -->
<!-- nested content will go here -->
<ng-content></ng-content>
</div>
Then when you use your nav-bar, you can "project" content into that ng-content tag:
app.component.html (or any other component)
<nav-bar>
Here is some content to project into the nav-bar's ng-content
</nav-bar>
See the stackblitz for the full code. There is also a way to have multiple ng-content tags using selectors. The article explains those if you need to have more projected slots.
It looks like you have some complex logic in your nav-bar so I didn't try to reproduce your code. The small demo should get you started in the right direction, though.

Answer 2

You can control the getIsAdmin in the own app-nav
Or you can use <ng-content> in your app-navbar
<div class="wrapper" fixed>
....
<ng-content></ng-content>
</div>
So, in your main.html you can do
<app-navbar>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
...
</app-navbar>