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>();
}
modal.component.ts
funciona correctamente al presionar el botón cerrar?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 componentemodal.component.ts
, solo ahora utilizando$modalMovil
en lugar de$modal