Having trouble retrieving multiple parameter values with ng bootstrap modal in Angular 4

In this section, I am creating dynamic buttons that send values to an ng bootstrap modal. Currently, I am able to send and retrieve only one value. How can I modify the code to send multiple values and display them in the input field within the modal? Below is the sample code snippet:

Note: Although I am sending both name and id, only the ID is being displayed in the modal.

HTML File

<ng-container *ngFor="let info of Data">

                <div *ngIf="info.State==='1'" >
                  <button [id]="info.Id" class="btn btn-outline-secondary" (click)=onOne(info.Id,info.Name)>
                    {{info.Name}}
                  </button>
                </div>


              </ng-container>

Below is my TypeScript code

onOne(content,data) {
    this.modalService.open(content,data).result.then((result) => {
      debugger;

      this.closeResult = `Closed with: ${result}`;

    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

Answer №1

It is important that the second option is treated as an object and not just a variable.

const modalInstance = this.modalService.open(content);
modalInstance.data= data;
modalInstance.result.then((data) => {....

This approach should hopefully be successful.

Answer №2

To proceed, simply submit the required information

<ng-container *ngFor="let info of Data">

                <div *ngIf="info.State==='1'" >
                  <button [id]="info.Id" class="btn btn-outline-secondary" (click)=puchInfo(info)>
                    {{info.Name}}
                  </button>
                </div>


              </ng-container>

Next, you can store the data on the backend

infoList=[];
puchInfo(info){

this.infoList.push(info);

}

Finally, execute your function within 'info'

If you have any questions, feel free to ask in the comments

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

Running my Angular Single Page Application on a self-hosted ServiceStack service

Currently, I am utilizing ServiceStack to construct a small self-hosted RESTApi service with a NoSQL database and the setup is working perfectly fine (without using .Net Core). My next step involves creating some maintenance screens using Angular. Howeve ...

Creating an Angular Universal Dockerfile and docker-compose.yml file: A step-by-step guide

After struggling to Dockerize my Angular universal app and integrate it with an existing dockerized Spring Boot REST backend, I found myself hitting a wall in terms of available resources and assistance online. Despite making various adjustments, the Docke ...

Having difficulty testing an Angular/NGXS action that triggers after an unsuccessful API request

Struggling with writing tests for an NGXS action that calls an http request? Want to add tests for both successful and failed requests? Here is the code for my Action: @Action(SearchChuckNorrisJokes) searchChuckNorrisJokes({ getState, setState }: StateCo ...

What is the best method for resetting the user state to null?

I'm currently utilizing VueX in Nuxt with Typescript. My goal is to set the initial state of my user to null. When I try setting state.authenticatedUser:null, everything works smoothly. However, when I attempt to assign an IAuthenticatedUser type to i ...

Update your mappings for the city of Istanbul when utilizing both TypeScript and Babel

Currently, I am facing the challenge of generating code coverage for my TypeScript project using remap Istanbul. The issue arises due to the usage of async/await in my code, which TypeScript cannot transpile into ES5 directly. To circumvent this limitation ...

Angular 5 - Keeping track of variable updates

I've searched various topics on this issue, but none seem to address my specific problem. I need a way to detect changes in the properties of a component without having to convert the variable into an array or iterable. I tried using Subject, but coul ...

Ensuring that a TypeORM column has been updated

Currently, I am utilizing TypeORM with the ActiveRecord design pattern and have created this entity: @Entity() export class User { @PrimaryGeneratedColumn() public id: number; @Column() public username: string; @Column() public password: stri ...

Issue with bundling project arises post upgrading node version from v6.10 to v10.x

My project uses webpack 2 and awesome-typescript-loader for bundling in nodejs. Recently, I upgraded my node version from 6.10 to 10.16. However, after bundling the project, I encountered a Runtime.ImportModuleError: Error: Cannot find module 'config ...

Ensuring a Promise is Fulfilled Before Navigating with Angular's routerLink

Looking for guidance on implementing async/await in an Angular project? I'm facing an issue where I have a button triggering an API call and then loading the next page. I want to ensure that the next page doesn't load until the API call is compl ...

Leverage Component class variables within the Component hosting environment

Is there a way to utilize a class variable within the @Component declaration? Here is the method I am aiming for: @Component({ selector: "whatever", host: { "[class]":"className" } }) export class MyComponent { @Input() className: ...

What is the best method for retrieving GET parameters in an Angular2 application?

Is there a way in Angular2 to retrieve GET parameters and store them locally similar to how sessions are handled in PHP? GET Params URL I need to obtain the access_token before navigating to the Dashboard component, which makes secure REST Webservice cal ...

Is there a ReactNode but with greater specificity?

In setting up the properties for a component, I have defined them as follows: interface HeaderProps{ title: string; image: string; link: ReactNode; } The 'link' property is meant to refer to another component, specifically <Link /> ...

Protractor can be quite tricky as it tends to throw off errors in the first it block, causing

After writing a protractor test for an Angular application with a non-angular login page, I decided to include the login process in a separate file using browser.waitForAngularEnabled(false);. I then created a describe block with a series of it blocks to ...

The WebSocket connection attempt to 'ws://localhost:5000/notificationHub' was unsuccessful due to an error encountered during the WebSocket handshake, resulting in an unexpected response code of 307

I have successfully integrated SignalR on both my Angular client and ASP.NET Core WebAPI. However, I am encountering an error when the client attempts to connect to the server: WebSocket connection to 'ws://localhost:5000/notificationHub' failed: ...

I'm curious if it's possible to superimpose a png image and specific coordinates onto a map by utilizing react-map

I am attempting to showcase a png graphic on a react-map-gl map, following the approach outlined here. Unfortunately, the image is not appearing as expected and no error messages are being generated for me to troubleshoot. Below is the snippet of code I&a ...

Mocked observables are returned when testing an Angular service that includes parameters

I'm currently exploring various types of unit testing and find myself struggling with a test for a service once again. Here is the function in my service that I need to test: Just to clarify: this.setParams returns an object like {name: 'Test&ap ...

Issue with JQuery Promise: fail() being invoked before promise resolution

In my TypeScript code, I encountered a peculiar issue with a jQuery promise. The fail() function is being executed immediately, logging an error message to the console, despite the promise resolving successfully afterwards. Here is the code snippet: ...

Building a hybrid application in Angular using UpgradeModule to manage controllers

I am currently in the process of upgrading a large AngularJS application using UpgradeModule to enable running AngularJS and Angular 6 simultaneously without going through the preparation phase, which typically involves following the AngularJS style guide. ...

Choosing options using an enum in Angular 2

In my TypeScript code, I have defined an enum called CountryCodeEnum which contains the values for France and Belgium. export enum CountryCodeEnum { France = 1, Belgium = 2 } Now, I need to create a dropdown menu in my form using this enum. Each ...

The combination of mat-icon-button and mat-raised-button is not rendering properly in Angular Material 15

After upgrading to Angular v15 + Angular Material v15, the previous code that used Angular v14 + Angular Material v14 looked like this: https://i.sstatic.net/GjC30.png The code for the icon button is shown below: <button *ngIf="admin" ...