Positioning gallery images in Angular Modal Gallery

I'm currently working on implementing an image modal, but I've run into several issues.

My goal is to have the first image fill the entire large box (class drop), with the rest displayed below it, as illustrated in the image.

I've experimented with various solutions, but I'm struggling to display only a single image from the array, such as showing only the first one :(

Is there a way to achieve this setup?

Thank you!

Access My StackBlitz

Check out Stackblitz

HTML

<div class="drop">
    <div class="abc">
    <!-- Display 1 image here  -->
        <section>
            <ks-modal-gallery [id]="3" [modalImages]="imagesMixedSizes"></ks-modal-gallery>
        </section>
    </div>
</div>
<div class="row">
    <div class="Upcard">
    <!-- Display 2, 3, 4, 5 images here !!!  -->
    </div>
</div>

Component.ts

 imagesMixedSizes: Image[] = [
    new Image(0, {
      // modal
      img: 'https://raw.githubusercontent.com/Ks89/angular-modal-gallery/master/examples/systemjs/assets/images/gallery/pexels-photo-135230.png',

    }),
    new Image(1, {
      // modal
      img: 'https://raw.githubusercontent.com/Ks89/angular-modal-gallery/master/examples/systemjs/assets/images/gallery/pexels-photo-547115.jpeg'
    })]

Image Problem/Explanation

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

angulartypescriptmodal-dialog

Answer №1

If you're considering splitting the variables, one option could be to divide them into two separate variables.

For example, you could do something like this: https://example.com

Alternatively, if you'd rather not create a new variable unnecessarily, you could simply slice the existing array:

Here's an example:

<my-component [id]="3" [data]="myArray.slice(0,1)"></my-component>

<my-component [id]="4" [data]="myArray.slice(1)"></my-component>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for broadcasting a router event

Currently, I am working with 2 modules - one being the sidenav module where I can select menus and the other is the content module which contains a router-outlet. I am looking for the best way to display components in the content module based on menu selec ...

javascriptangularroutereventemitterrouter-outlet

Configuring Jest for Typescript with Module Resolution

The current project utilizes ReactJS, Typescript, Webpack, and Jest. To optimize import and achieve module resolution, certain configurations were adjusted: TSConfig.js: "compilerOptions": { "baseUrl": "src",} Webpack.config.js alias: { Common: path. ...

typescriptwebpackjestjs

Get rid of the TypeScript error in the specified function

I am currently working on implementing a "Clear" button for a select element that will reset the value to its default state. Here is a snippet of my code: const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => { onChange( ...

reactjstypescript

Is there a way to toggle or collapse a table row with a unique identifier using Angular and Bootstrap?

Currently handling Angular and Bootstrap in my work, but facing challenges with table manipulation and collapsing rows. I fetch data from a database and showcase it in a dynamically generated table using *ngFor and two rows within an ng-container. My goal ...

htmlangulartypescriptdatatablesangular-ui-bootstrap

Steps for creating a TypeScript project for exporting purposes

Forgive me for my lack of experience in the js ecosystem. Transitioning from static languages to typescript has been a positive change, though I still find myself struggling to grasp the packaging/module system, especially when coupled with typescript defi ...

javascriptnode.jstypescriptnpm

Tips for updating TypeScript aliases during compilation

To define a typescript alias in tsconfig.json, you can use the following syntax: "paths": { "@net/*":["net/*"], "@auth/*":["auth/*"], }, After defining the alias, you can then use it in you ...

typescript

What is the proper method for transferring a JWT token to an external URL?

I currently have two REST endpoints set up: accounts.mydomain.com/login - This is an identity provider that sends a JWT token as a response once a user is authenticated with their username and password. api.mydomain.com/users - This endpoint accepts the ...

angularjwthttp-redirect

Storing Angular 4 Http Post response data in an object

I'm currently working with Angular 4 in conjunction with an Asp.net web API. I am facing difficulties in reading the properties of my response. This is how my response appears: https://i.stack.imgur.com/NDJCo.png Here is my post request: postLogi ...

angularangular-http

Converting a Promise to an Observable in Angular using Typescript

I have a working method that functions as intended: getdata(): Promise<any> { let query = `SELECT * FROM table`; return new Promise((resolve, reject) => { this.db.query(query, (error, rows) => { if(error) reject(error); ...

angulartypescriptrxjsobservablees6-promise

Converting European date format to a standard format

THE ISSUE: The dates retrieved from the API are in European format: 01-06-2018 This means day - month - year (1 June 2018). I want to display these dates in a more visually appealing way - the 'd MMM y' format seems perfect for this purpose ...

angular

Contrast between utilizing form data versus base64 encoding for transmitting images to a .NET API

Currently tackling an angular 2 project where I need to transmit images along with data to a .NET Core API. How can this be accomplished effectively? Utilizing a cropper that produces base64 output. In previous requests, sending a single image as for ...

angularmetadataasp.net-core-webapi

Nested asynchronous functions in TypeScript

profile.page.ts: username: string; totalScore: number; ... loadUserData() { this.spinnerDialog.show(); this.firebaseServie.loadUserData().then(() => { this.username = this.sessionData.getUser().getUsername(); this.totalSco ...

typescriptasynchronous

Exploring methods to verify a service subscription to a topic provided by a different service

My services provide the following functionalities: @Injectable({ providedIn: 'root' }) export class Service1 { dataHasChanged = new Subject(); private data1; private data2; constructor() {} getData() { return { data1: th ...

javascriptangularangular-testangular-testing-library

What is the best way to navigate between multiple pages in an Angular 7 application using ngIf?

In my Angular 7 app, I am facing an issue with switching between three different pages. While I have managed to switch between two of them successfully, the messages page loads in the documents section whenever I click on it. Even though I have attempted ...

angular

Executing multiple instances of the cascading dropdown fill method in Angular 7

I am currently working on an Angular app that includes cascading comboboxes for country and state selection. However, I have noticed that the get states() method in my state.component.ts file is taking a long time to run. What could be causing this issue? ...

angulartypescriptangular7

a helpful utility type for extracting a union from a constant array of strings

I create string arrays using const assertions and then use them to generate union types. const elements = ["apple", "banana", "orange"] as const; type elementsUnion = typeof elements[number]; // type elementsUnion = "appl ...

typescriptunion-types

The creation of the Angular project was unsuccessful, with the error message "npm ERR! path AngularappTwo ode_modulesacorninacorn" causing the issue

These are the steps I took to create my first Angular application: First, I installed NodeJS Next, I installed VSCode I then checked my NodeJS and npm versions https://i.stack.imgur.com/lj6pI.png After that, I ran the command npm install -g @angular/c ...

node.jsangularnpm

What is the best way to ensure the website theme remains consistent after a refresh in React?

I am currently enhancing a weather forecast website by incorporating a theme toggler feature. The functionality has been successfully implemented, but I am facing an issue where the selected theme does not persist after reloading the page. Can someone he ...

javascriptreactjstypescript

How can the `!` operator be utilized in MikroORM Typescript entities?

How can I declare a key in a JS object with an ! before the colon? MikroORM syntax for class @Entity() export class Post { // Using @PrimaryKey() decorator to designate primary key @PrimaryKey() id!: number; @Property({ type: "date", de ...

typescriptmikro-orm

Having trouble with subscribing to a template in Ionic framework

I'm attempting to showcase an image from Firebase storage using the following code: Inside my component : findImg(img) { this.storage.ref('/img/' + img).getDownloadURL().subscribe( result => { console.log(result); ...

angulartypescriptobservablesubscribeionic5