One challenge I'm facing involves creating an image modal that appears when an image is clicked. Currently, I have it set up so that the child component loads upon clicking the image. However, the issue is that it can only be clicked once and then disappears as it sets to display: none.
In order to close the modal, there is a close button within the child component. The problem is that I have only been able to achieve this by using display: none in the CSS, which makes the component invisible but still operational.
My ultimate goal is to find a way to completely unload the child component when the close button is pressed, or to set opacity: 1 if the parent image is clicked again.
HTML Structure:
<app-image-modal
*ngIf="clicked"
[slice] = "slice"
[clicked] = "clicked">
</app-image-modal>
<img src"img.png" (click)="imageClicked()"/>
Typescript (TS) for Parent Component:
export class ImageComponent {
public clicked = false;
public imageClicked() {
this.clicked = true;
}
}
Child Component HTML:
<section [ngClass]="{'hide': hide}">
<div [ngClass]="{'active': show}">
<img src"img.png" />
<div class="close" (click)="hideModal()">
<button>X</button>
</div>
</div>
</section>
TS Child Component:
export class ImageModalComponent implements OnInit {
public show = false;
public hide = false;
@Input() clicked: boolean;
public ngOnInit() {
this.show = true;
}
public hideModal() {
this.show = false;
this.hide = true;
}
}