1

Tengo un menu con tres botones y según el botón al que hago click muestro un componente o otro. Son tres botones por lo tanto no me sirve un boolean con true o false.

Gracias de antemano.

Actualmente el fichero html de menu es:

<div class="p-2">menu works!<br>
    <button type="button" class="btn btn-primary" (click) = activarComponente() >Gestión de usuarios</button>
    <button type="button" class="btn btn-danger" (click) = activarComponente()>Gestión de productos</button>
    <button type="button" class="btn btn-primary" (click) = activarComponente()>Gestión de pedidos</button>

    <div *ngIf="option == 0">
        <gestion-usuarios></gestion-usuarios>
    </div>
      
      <div *ngIf="option == 1">
        <gestion-productos></gestion-productos>
      </div>
      
      <div *ngIf="option == 2">
        <gestion-pedidos></gestion-pedidos>
      </div>

</div>

Fichero gestion-productos.component.ts(gestion pedidos y usuarios es igual pero cambiando el valor de option):

   import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'gestion-productos',
     templateUrl: './gestion-productos.component.html',
     styleUrls: ['./gestion-productos.component.css']
  })
 export class GestionProductosComponent implements OnInit {

  opcion:number =1;

  constructor() { }

  ngOnInit(): void {
  }

}

menu.component.ts:

 import { Component, OnInit, Output } from '@angular/core';



@Component({
  selector: 'menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})


export class MenuComponent implements OnInit {
  option:number;
  @Output() opcion:number;

 activarComponente(){
   this.option = this.opcion;
 }


  constructor() { }

  ngOnInit(): void {
  }

}

¡Muchísimas gracias de antemano! ¡Saludos!

2
  • Debes usar la directiva *ngIf.
    – VRoxa
    el 13 jun. 2020 a las 16:24
  • He actualizado la pregunta con mi código pero no se porque no funciona...
    – Airsa97
    el 13 jun. 2020 a las 22:25

2 respuestas 2

1

Si quieres activar diferentes vistas de componentes, puedes realizar comprobaciones con *ngIf donde al cumplirse la condición hagas una llamada al selector del componente que quieres mostrar.

Por ejemplo, creando una variable opcion que almacene 0, 1 o 2 según lo que deseas mostrar:

<div *ngIf="opcion == 0">
  <app-Componente0></app-Componente0>
</div>

<div *ngIf="opcion == 1">
  <app-Componente1></app-Componente1>
</div>

<div *ngIf="opcion == 2">
  <app-Componente2></app-Componente2>
</div>

Esto hará que depende lo que elijas ejecutará el componente.

3
  • ¿Y donde le doy valor a la variable opción? Gracias por la respuesta!
    – Airsa97
    el 13 jun. 2020 a las 21:08
  • opcion podrías declararla en tu typescript como public opcion para poder usarla en tu html. Cada vez que pulses el botón le cambias el valor a opcion con la que necesites.
    – Juan José
    el 13 jun. 2020 a las 21:24
  • Acabo de editar y actualizar la pregunta con el codigo segun lo que me has comentado pero sigo sin entender porque no funciona... ¡Gracias!
    – Airsa97
    el 13 jun. 2020 a las 21:31
1

Yo te recomiendo usar ngSwitch

<div [ngSwitch]="conditionExpression">
    <div *ngSwitchCase="expression">output</div>
    <div *ngSwitchDefault>output2</div>
</div>

Pero lo que más te recomiendo en todo caso sería usar el router-outlet. Es más fácil a mi pensar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.