CODEWITHSUNDEEP
angulartypescriptangular2-template
Swanand Taware
Swanand Taware

Reputation: 753

Angular2: Toggle image on Button click

I have a dynamic view of my component, where I have fetched some data from JSON.

Now I have a problem with toggle image using the button.

I am able to manage it using *ngIf for a single item, but as all data are dynamically generated there is more than one card on a page. In my case 3 cards are available.

VIEW:

<ng-container *ngFor='let html of templateData'>
    <h1 [innerHTML]="html.heading | safe:'html'"></h1>
    <div class='col-lg-12 col-md-12 col-xs-12 col-sm-12' [innerHTML]="html.description | safe:'html'"></div>
    <ng-container *ngFor='let data of html.cards;let i = index;'>
        <div class="container" [ngClass]="'data-'+i" >
            <img [src]="data.image" [alt]="data.alt" [title]="data.title" class="img-responsive" [ngClass]="'image-'+i" *ngIf="toggleImage"/>
            <div [innerHTML]="data.description" [ngClass]="'desc-'+i"></div>
            <button class="btn btn-default flip" (click)="fntoggleImage(i)">Toggle Image</button>
        </div>

        <div class='flip-slide-text' [innerHTML]="data.slide_text"></div>
    </ng-container>
</ng-container>

JSON:

[
    {
        "heading": "<em><strong>Cards 2</strong></em>",
        "description": "<div><h2>What is Lorem Ipsum?</h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>",
        "cards": [
            {
                "index": 0,
                "heading": "Card Heading",
                "image": "/assets/images/1c215e1b2a3b82efab1d0a07afc31f81.jpg",
                "alt":"Alt text for image",
                "title": "Title for Image",
                "description": "<div><h2>What is Lorem Ipsum?</h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>",
                "slide_text": "<p>Slide text...</p><ol><li>Please enter your text here...Ple</li><li>ase enter your text </li></ol>",
                "audio_path": "path"
            },
            {
                    "index": 1,
                    "heading": "Card Heading",
                    "image": "/assets/images/1c215e1b2a3b82efab1d0a07afc31f81.jpg",
                    "alt":"Alt text for image",
                    "title": "Title for Image",
                    "description": "<div><h2>What is Lorem Ipsum?</h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>",
                    "slide_text": "<p>Slide text...</p><ol><li>Please enter your text here...Ple</li><li>ase enter your text </li></ol>",
                    "audio_path": "path"
                }
        ]
    }
]

COMPONENT:

toggleImage: boolean = true;  
  fntoggleImage(index){
            this.toggleImage = !this.toggleImage;
        }

This code works fine but it hides all the images of a section. I want to hide image with the same index as a button.

If I clicked on button 0 then only hide that image which has index 0.

I tried it using Host Listener but it not working correctly.

Upvotes: 0

Views: 1410

Answers (1)

Safiyya
Safiyya

Reputation: 1393

You could keep the state of the toggling in the component with a Map or an Array :

in component.ts

toggleMap: Array<boolean> = [];
toggle(i: number) {
    this.toggleMap.forEach(el => {
        el = false
    });
    this.toggleMap[i] = !this.toggleMap[i];
}

in component.html

<img [src]="data.image" [alt]="data.alt" [title]="data.title" class="img-responsive" [ngClass]="'image-'+i" *ngIf="toggleMap[i]"/>

Upvotes: 1

Related Questions