Home / Questions / 91806
Accepted
Johnny Pachecp
Asked: 2020-08-01 08:57:00 +0800 CST 2020-08-01 08:57:00 +0800 CST

How to re-render an Angular 4 component?

  • 772

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 menu template and I use *ngIf="login" to condition whether it is shown or not, but I haven't been able to make a 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, how do I get the view to update when changing values?

ionic

1 Answers

  1. Best Answer

    Something similar happened to me, when I needed the navbar to be hidden on login, I solved it by defining a component and instantiating it in the root controller template of where you want to use it (usually)app.component.html

    To keep the configuration alive and be able to handle the display (I went a little further and added configurable buttons, etc.) define a service along with the variables you want to keep, then it will only be calling the service from the controller you defined to query the variables as well as calling the service from any controller to modify its state, 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;
    }
}

    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 don't know if it's the best way, but from here you can work with a fairly dynamic component, and you manage it by modifying the variables in the service

    • 1