Interactive Modal Featuring Image Slider - Capture Names and Sequential Numbers

Question

Interactive Modal Featuring Image Slider - Capture Names and Sequential Numbers

I successfully created a modal with an image slider using the bootstrap ngb-carousel.

Is there a way to dynamically display the current image's name in the modal header and the numbering of images in the modal footer?

For example, I want the modal header to show the name of the current image, and the footer to display the image number out of total images. So, if I have 3 images and I am on the first one, the footer should display '1/3'. This should update as I change images on the slider.

If anyone has suggestions or solutions for implementing this functionality, it would be greatly appreciated! I haven't been able to figure out how to achieve this so far.

DEMO

Code

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Show images Modal
</button>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Name Image !</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <ngb-carousel id="carousel" #carouse *ngIf="data" (slide)="change($event)">
                    <ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
                        <div class="picsum-img-wrapper">
                            <img [src]="imgIdx.image" [alt]="">
                          </div>
                            <div class="carousel-caption">
                                <h3>{{imgIdx.head}}</h3>
                                <p>{{imgIdx.data}}</p>
                            </div>
                    </ng-template>
                </ngb-carousel>
            </div>
            <div class="modal-footer">
                Number images (1/3)
            </div>
        </div>
    </div>
</div>

https://i.sstatic.net/HzKsn.png

angular typescript twitter-bootstrap bootstrap-4 ng-bootstrap

Answer 1

Answer №1

To begin, simply declare three variables:

  // Make sure to manually assign initial values first

  imgName:string=this.data[0].name
  imgNumber:number=1
  imgLength:number=this.data.length

In the change function, update these variables like so:

  change(data){
    this.imgNumber=data.current+1;
    this.imgName=this.data[data.current].name
  }

Your .html file can utilize these variables as follows:

<div class="modal" id="myModal">
            ...
        <h4 class="modal-title">{{imgName}}!</h4>
            ....
        <div class="modal-footer">
            Number images ({{imgNumber}}/{{imgLength}})
        </div>
        ...
</div>

For more information on displaying data and interpolation, refer to the official documentation.

Answer 2

To begin, simply declare three variables:

  // Make sure to manually assign initial values first

  imgName:string=this.data[0].name
  imgNumber:number=1
  imgLength:number=this.data.length

In the change function, update these variables like so:

  change(data){
    this.imgNumber=data.current+1;
    this.imgName=this.data[data.current].name
  }

Your .html file can utilize these variables as follows:

<div class="modal" id="myModal">
            ...
        <h4 class="modal-title">{{imgName}}!</h4>
            ....
        <div class="modal-footer">
            Number images ({{imgNumber}}/{{imgLength}})
        </div>
        ...
</div>

For more information on displaying data and interpolation, refer to the official documentation.

Interactive Modal Featuring Image Slider - Capture Names and Sequential Numbers

Answer №1

Similar questions

"Exploring the Power of WebSocket Proxies in Angular 5.0

Property finally is missing in the Response type declaration, making it unassignable to type Promise<any>

When using Angular mat select, the selected text should be displayed instead of the default dropdown text

What could be causing the issue with the conditional validation in my zod and react-hook-form integration?

Just starting out with Angular and encountering an issue where my variables are not recognized even though they are clearly defined

Creating a stream of observables in RxJs and subscribing to only the latest one after a delay: A comprehensive guide

Incorporating properties of the parent class through Mixin techniques

Is there a way to differentiate between a plain object and a class instance in Typescript?

Converting a JSON array stored in a local file to a TypeScript array within an Angular 5 project

Difficulty in monitoring the present machine status through XState in a React application

Creating a visually appealing stacked bar chart using Chart.js in Angular 9 with multiple bars

The "ngx-places" directive does not have an "exportAs" setting

I am encountering a strange error in the console when trying to implement a custom navigation system tailored to each user using the core UI Angular

Using Primeng to implement pagination and lazy loading in a dataView

Tips for implementing [disabled] directive with dual options in Ionic Angular

Querying: What is preventing me from accessing a button within a modal?

Previewing multiple images in multiple divs before uploading using jQuery

Splitting a td tag into multiple columns dynamically with Angular

What steps do I need to take to enable the about page functionality in the angular seed advance project?

Angular 6 Error: Failed to parse template. Unable to establish a connection with 'routerLink' as it is not recognized as a valid property of 'a'