Hihow can i unhide section tag based on image clickHTMLltsection hidden class34slidercontainer34gt ltsection class34slider34gt ltdiv class34slide one34gt ltimg src34assetsimagespropertyNamepropertyImage134 alt3434gt ltdivgt ltdiv class34slide two34gt ltimg src34assetsimagespropertyNamepropertyImage234 alt3434gt ltdivgt

Hide and Show Section Tag in Angular

ramitahe...

SOLVED CLOSED ACTIVE ANSWERED
User: ramitaherwahdan1978
Posted: on Nov 15, 2023 09:50 PM
Forum: Angular
Answer: 1
Views: 599

Hi,

how can i unhide section tag based on image click?

HTML

<section hidden class="slider_container">
    <section class="slider">
        <div class="slide one">
            <img src="assets/images/{{property.Name}}/{{property.Image1}}" alt="">
        </div>
        <div class="slide two">
            <img src="assets/images/{{property.Name}}/{{property.Image2}}" alt="">
        </div>
        <div class="slide three">
            <img src="assets/images/{{property.Name}}/{{property.Image3}}" alt="">
        </div>
        <div class="slide four">
            <img src="assets/images/{{property.Name}}/{{property.Image4}}" alt="">
        </div>
        <div class="slide four">
            <img src="assets/images/{{property.Name}}/{{property.Image5}}" alt="">
        </div>
    </section>
</section>
<div id="image1" class="carousel-item active" (click)="showImage(property.Image1)"
        style="background-image:url('assets/images/{{property.Name}}/{{property.Image1}}')">
        <div class="container">          
        <p *ngIf="property.SellRent ==1">For Sale / Price:{{property.Price}}AED</p>
        <p *ngIf="property.SellRent ==2">For Rent / Price:{{property.Price}}AED</p>
        </div>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

ramitahe...

7 4

Reply
ANSWER
User: ramitaherwahdan1978
Replied: on Nov 16, 2023 01:27 AM
Report

I found a solution:

in ts file:

visable1: boolean = false;
visable2: boolean = true;

showImage(){
    this.visable1 = true;
    this.visable2 = false;
}

hideImage(){
    this.visable1 = false;
    this.visable2 = true;
}

and in the html we will toggle between the 2 sections:

for hiding the images and showing the slider:

<div *ngIf="visable2"

for closing slider and showing images:

<section*ngIf="visable1"

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Hide and Show Section Tag in Angular

Company

Explore

Follow us

Contact Us