display component based on a conditional

Question

I have this field in app.component.ts

front: boolean = true;

And I am displaying this component template in app.component.html

<app-navbar></app-navbar>

That works, but I want to display that component (or not) based on the value of front, so i tried something like this which does not work:

<*ngIf="front" app-navbar></app-navbar>

How to achieve this?

Answer 1

Put ngIf after app-navbar(component name)

<app-navbar *ngIf="front"></app-navbar>

Answer 2

<app-navbar *ngIf="front"></app-navbar>

You have to open the tag (with app-nav) and then use the *ngIf