Component inside app.component.html not updating

Question

I want to make the layout of the app in app.component.html

I made a menu component with selector

and now my code looks like :

<app-menu></app-menu>
<router-outlet></router-outlet>

The menu pages hide and show by checking if the user is logged in but if I put the menu inside the app.component it doesn't update, only if I refresh the page from browser

if you share some of the controller code, I might be able to help — The Fabio, Oct 19 '19 at 10:31
https://stackoverflow.com/questions/46047854/how-to-update-a-component-without-refreshing-full-page-angular — Andrei Mîndru, Oct 19 '19 at 10:40

score 1 · Accepted Answer · answered Oct 19 '19 at 12:45

Like the post that you comment: How to Update a Component without refreshing full page - Angular

You should use a BehaviorSubject.

Let's says that you had a Service that has the BehaviorSubject.

CustomService:

@Injectable()
export class CustomService {
   public isLoggedIn$: Observable<boolean>;
   private _sourceUserLoggedIn = new BehaviorSubject<boolean>(false);

   constructor() {
     this.isLoggedIn$ = this._sourceUserLoggedIn.asObservable();
   }

   setLoggedIn(value: boolean): void {
     this._sourceUserLoggedIn.emit(value);
   }
}

Then in the AppComponent.ts

export class AppComponent {
   constructor(private customService: CustomService) {}
   public get isLoggedIn$(): Observable<boolean> {
     return this.customService.isLoggedIn();
   }
}

Finally in the AppComponent.html

<app-menu *ngIf="this.isLoggedIn$ | async"></app-menu>
<router-outlet></router-outlet>

That's should work.

Component inside app.component.html not updating

1 Answers1