I'm starting with ionic and I have a menuToggle that is shown only if the user is logged in, the conditional is in the template of the menu and I use the * ngIf="login" to determine if it is displayed or not, but I could not Once the user logs in, the menu is displayed. I come from the world of react, where when making a change in the state of the component it was rendered according to its changes, but in angular, as an achievement that when changing the values, the view was updated?
Something similar happened to me, when I needed the navbar to hide in the login, I solved it by defining a component and instantiating it in the template of the root controller where you want to use it (usually) app.component.html
To keep the configuration alive and to be able to handle the visualization (I went a bit further and added configurable buttons, etc.) define a service together with the variables that you want to keep, afterwards you will only call the service from the controller you defined to consult the variables as well as call the service from any controller to modify the status of the same, which will automatically be reflected.
// navbar.component.ts
import { Component, OnInit } from '@angular/core';
import { NavbarService } from './navbar.service';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.scss']
})
export class NavbarComponent implements OnInit {
constructor (private navbarService: NavbarService) {}
public mostrarPanel() {
return this.navbarService.mostrarPanel;
}
}
the template
// navbar.component.html
<div *ngIf="mostrarPanel()">
</div>
the service
// navbar.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class NavbarService {
public mostrarPanel: boolean;
}
I do not know if it's the best way, but from here you can work with a very dynamic component, and you manage it through modifying the variables in the service