1

Estoy trabajando un proyecto simple de angular y he realizado un popup, en el cual al pulsar un botón referente a un producto, pues salga la descripción, imagen y nombre del mismo. Dentro de este contenededor del producto, he creado un botón nuevo, uno que simula la cruceta de una ventana para que esta sea cerrada.

He conseguido que el botón reaccione con el evento click, sin embargo no logro intuir o deducir cómo hacer que el botón funcione para que ÚNICAMENTE me cierre la ventana concreta en la que está, es decir, que si abro el producto "movil", pues al pulsar la cruceta del móvil, me lo cierre

movil.component.html

<div class="contenedor">
  <button class="boton_cerrar" (click)="closeMovil()">X</button>
  <p><u>Nombre:</u></p> {{nombre}}
  <p><u>descripción:</u></p> {{descripcion}}
  <p><u>Imagen:</u></p>
  <img src="{{imagen}}" alt="imagen de movil" class="imagen-movil">
</div>

movil.component.ts

import { Component, OnInit } from '@angular/core';
import { SwitchService } from 'src/app/service/switch.service';

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

  nombre = 'Nokia 3310';
  descripcion = 'Movil Nokia 3310 listo para comprar a un precio bastante economico.';
  imagen = '../../../assets/img/movil.JPG';

  closeMovil()
  {
    this.modalSS.$modalMovil.emit(false)
    console.log("Boton cerrar movil funciona correctamente");
  }

  constructor(private modalSS: SwitchService) { }

  ngOnInit(): void {
  }
}

modal.component.html

<div class="modal">
  <div class="modal_body">
    <button class="boton_cerrar" (click)="closeModal()">X</button>
    <div class="productos_tienda">
      <button class="boton-Movil" (click)="openMovil()">Movil</button>
      <div class="" *ngIf="modalMovil == true">
        <app-movil></app-movil>
      </div>
      <button class="boton-Bberry" (click)="openBlackberry()">Blackberry</button>
      <div class="" *ngIf="modalBlackBerry == true">
        <app-blackberry></app-blackberry>
      </div>
      <button class="boton-Vinilo" (click)="openVinilo()">Disco de Vinilo</button>
      <div class="" *ngIf="modalVinilo == true">
        <app-vinilo></app-vinilo>
      </div>
    </div>
  </div>
</div>

modal.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { SwitchService } from '../service/switch.service';

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

  @Input()
  modalMovil!: boolean;
  modalBlackBerry!: boolean;
  modalVinilo!: boolean;

  constructor(private modalSS: SwitchService) { }

  ngOnInit(): void {
  }

  closeModal()
  {
    this.modalSS.$modal.emit(false)
    console.log("Boton cerrar modal funciona correctamente");
  }

  openMovil()
  {
    this.modalMovil = true;
    console.log("Movil funciona correctamente");
  }

  openBlackberry()
  {
    this.modalBlackBerry = true;
    console.log("Blackberry funciona correctamente");
  }

  openVinilo()
  {
    this.modalVinilo = true;
    console.log("Vinilo funciona correctamente");
  }
}

app.component.html

<div class="contenido-pop">
  <img
    src="../assets/img/corteingles.png"
    alt="logo corte ingles"
    class="logo-corteingles"
  />
  <div class="contenedor">
    <h2><u>¡Bienvenido a la tienda!</u></h2>
    <div class="fondo-pop">
      <button class="boton-abrir" (click)="openModal()">Abrir modal</button>
      <div class="" *ngIf="modalSwitch == true">
        <app-modal></app-modal>
      </div>
    </div>
  </div>
  <footer>
    <img src="../assets/img/letracorteingles.png" alt="tipografia corte ingles" class="letra-corteingles">
  </footer>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SwitchService } from './service/switch.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'popup_anguloso';

  modalSwitch!: boolean;

  constructor(private modalSS:SwitchService){
  }
  ngOnInit(){
    this.modalSS.$modal.subscribe((valor)=>{this.modalSwitch = valor})
  }

  openModal()
  {
    this.modalSwitch = true;
  }
}

Switch.service.ts

import { Injectable, EventEmitter } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SwitchService {
  constructor() { }

  $modal = new EventEmitter<any>();
  $modalMovil = new EventEmitter<any>();
  $modalBlackBerry = new EventEmitter<any>();
  $modalVinilo = new EventEmitter<any>();
}
6
  • 1
    Según veo agregaste el código del popup del producto, creo que también seria necesario que agregues el código donde abres este popup. ;)
    – Israel-ICM
    Commented el 23 may. 2022 a las 13:26
  • Tienes razón :)! Listo, ya esta añadido todo lo necesario para su comprensión
    – Puntoycoma
    Commented el 23 may. 2022 a las 13:42
  • 1
    Acabo de darle una mirada a tu código y tengo una pregunta, ¿El componente modal.component.ts funciona correctamente al presionar el botón cerrar?
    – Israel-ICM
    Commented el 23 may. 2022 a las 14:05
  • Si, funciona correctamente. Los que no funcionan/no consigo establecer para que funcionen son los de los productos.
    – Puntoycoma
    Commented el 23 may. 2022 a las 14:09
  • 1
    Aunque bueno si vamos directo al grano, lo que podrías hacer según la lógica que utilizas según veo es reutilizar el servicio que tienes SwitchService para crear una nueva variable similar a la que tienes $modal, supongamos llamarlo $modalMovil y en tu componente movil utilizarlo en lugar de $modal ya que veo que en el constructor también instancias el servicio por lo que no será problema, debes hacer lo mismo que haces en tu componente modal.component.ts, solo ahora utilizando $modalMovil en lugar de $modal
    – Israel-ICM
    Commented el 23 may. 2022 a las 14:32

1 respuesta 1

1

Basándome en lo que tienes hecho.

Según comentas el popup modal funciona correctamente, entonces lo que podemos hacer es aplicar lo mismo que hiciste, en este caso ya tienes la mayor parte hecha solo te falta la parte donde se escucha el cambio de valor de la variable $modalMovil.

En el OnInit() del archivo modal.component.ts:

ngOnInit(): void {
  // Esto es para escuchar el evento (Cuando se ejecute el .emiter(false) que haces desde el componente movil.component)
  this.modalSS.$modalMovil.subscribe(valor => this.modalMovil = valor);
}
1
  • Disculpa la tardanza, muchas gracias por tu ayuda, soy nuevo en esto de Angular y estoy aprendiendo, me ha funcionado :)!
    – Puntoycoma
    Commented el 24 may. 2022 a las 7:29

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.