Tips for successfully sending dynamic values to a modal with Angular 2

Greetings! I am currently working with dynamic data that is being displayed in the form of buttons. Below you will find the code snippet:

              <ng-container *ngFor="let data of mapData">

                <div *ngIf="data.OrderState==='1'" class="ds">
                  <button [id]="data.DrId" class="btn btn-outline secondary">
                    {{data.Name}}
                  </button>
                </div>
              </ng-container>

Now, after clicking the dynamically generated button, I want to send the data.Drid and data.Name to the modal input fields. How can I call the modal on a dynamic button click, pass these as two parameters, and retrieve that data on the modal's submit button?

Here is the Bootstrap 4 modal code. How can I apply it to send parameters to this modal?

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Answer №1

When working with templates, you can utilize the (click) event to call a method. For example:


      <ng-container *ngFor="let data of mapData">

        <div *ngIf="data.OrderState==='1'" class="ds">
          <button [id]="data.DrId" class="btn btn-outline secondary"
(click)="buttonClicked(data.DrId, data.Name)">
            {{data.Name}}
          </button>
        </div>
      </ng-container>

In your component, create variables named drId and drName. Then, implement a method called buttonClicked, where you assign values from the method arguments to these variables. Here's an example:


buttonClicked(id, name) {
  this.drId = id;
  this.drName = name;
  `$('#exampleModal').modal('show')`
  // You now have access to id and name for display purposes.
}

If you need guidance on handling modals using JavaScript, you can refer to this link: https://getbootstrap.com/docs/4.0/components/modal/#via-javascript

You can bind these variables in the bootstrap modal template as shown below:

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input class="" id ="" [value]="drId"/>
        <input class="" id ="" [value]="drName">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

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

Automatic completion of absolute paths in VS Code with the ability to click and view definitions through the configuration file js/tsconfig.json

In order to ensure that absolute paths function correctly, I have found that there are two key steps involved: the compilation process and configuring the code editor. I successfully managed the compilation aspect by utilizing babel-plugin-module-resolver ...

Mobile Device Experiencing Constant Resizing Issues on Website

I have been working on my website for almost a year now, and I am facing an issue with its responsiveness on mobile devices. Despite using Bootstrap 4 and Ajax to load pages and modals, I can't seem to figure out what's causing the problem. Befor ...

Using Observable and EventEmitter to efficiently transfer data between parent and child components in Angular

I am struggling with the following structure: Main component (displays items using item-service) Panel component (includes search components) SearchByTitle component (with input field for title of items) SearchBySomething component (with input field ...

A comparison of parent and child components

To implement a child-parent component relationship in Angular, first create two JSON files: parent.json and child.json. The parent.json file should contain the following data: "Id":10001, "name":"John" "Id":10002, ...

Observable<void> fails to trigger the subscriber

I am currently facing a challenge with implementing a unit test for an Observable in order to signal the completion of a process. While there is no asynchronous code in the logout function yet, I plan to include it once the full logic is implemented. The m ...

Issue with Angular email form validation not functioning correctly

My form is quite basic, consisting of just one input field: this.form = this.fb.group({ emailAddress: ['', [Validators.required, Validators.email]], }); HTML Code: <input type="email" class="form-control" formControlName="emailAddress"> ...

Issue arose while attempting to use Jest on a React Native application integrated with TypeScript (Jest has come across an unforeseen token)

Seems like everyone and their grandmother is facing a similar issue. I've tried everything suggested on Stack Overflow and GitHub, but nothing seems to work. It should be a simple fix considering my project is basic and new. Yet, I can't seem to ...

What is the best way to handle updating an npm package that is not the desired or correct version?

I've been experimenting with querying data on Firebase using querying lists. My attempt to implement functionality similar to the documentation resulted in this code snippet: getMatchesFiltered(matchId: string, filter: string, sortDirection: string, ...

The NestJs provider fails to inject and throws an error stating that this.iGalleryRepository.addImage is not a recognized function

I'm currently working on developing a NestJS TypeScript backend application that interacts with MySQL as its database, following the principles of clean architecture. My implementation includes JWT and Authorization features. However, I seem to be enc ...

The GUI does not reflect changes observed in Angular

Even though I have subscribed in names.component to a subject that triggers when the subject is changed, my GUI does not react to the "lang" change. Why is this happening? This component resides in fields.module.ts and the CacheService is provided by the ...

How to Eliminate Vertical Line in Primeng's Vertical Stepper

https://i.sstatic.net/Y8PQeqx7.pngPresently, I am utilizing primeng vertical stepper. I require assistance in removing the vertical lines for all steps. Attached is a screenshot of the primeng vertical stepper for reference. Is it possible to use ::ng-dee ...

Can you explain the significance of { 0: T } in this particular type definition?

I stumbled upon this type declaration in my codebase which is meant for non-empty arrays: type NonEmptyArray<T> = T[] & { 0: T } and it functions as expected: const okay: NonEmptyArray<number> = [1, 2]; const alsoOkay: NonEmptyArray<n ...

Issues with modals functionality in Bootstrap on Rails 7

I'm currently implementing the Bootstrap gem within my Rails 7 project. My main focus right now is to successfully set up a basic Bootstrap modal. The dropdowns in my application are functioning properly, leading me to believe that the JavaScript co ...

failure of pipe during search for art gallery information

Hi, I've created a filter pipe to search for imagenames and imageids among all my images. However, it seems to only find matches in the first image. There seems to be something wrong with my code. This is my FilterPipe class in filter.pipe.ts where I ...

A guide to submitting forms within Stepper components in Angular 4 Material

Struggling to figure out how to submit form data within the Angular Material stepper? I've been referencing the example on the angular material website here, but haven't found a solution through my own research. <mat-horizontal-stepper [linea ...

Retrieve the additional navigation information using Angular's `getCurrentNavigation()

I need to pass data along with the route from one component to another and retrieve it in the other component's constructor: Passing data: this.router.navigate(['/coaches/list'], { state: { updateMessage: this.processMessage }, ...

The issue encountered is when the data from the Angular form in the login.component.html file fails to be

I am struggling with a basic login form in my Angular project. Whenever I try to submit the form data to login.components.ts, it appears empty. Here is my login.component.html: <mat-spinner *ngIf="isLoading"></mat-spinner> & ...

I'm attempting to integrate Angular Material into my project but I'm struggling to figure out how to resolve the issue

npm ERR! code ERESOLVE npm ERR! ERESOLVE was unable to find a resolution npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/tslint npm ERR! dev tslint@"~6.1.0" from the root projec ...

How to resolve the issue of checkbox not binding the value of an object field in Angular 4?

Can anyone help me with binding the field value in the current object and switching the checkbox based on its value? This is my checkbox: <label class="checkbox-inline checbox-switch switch-success"> <input #livingRoom type="checkbox" name ...

Encountering the issue: "Error: The mat-form-field must include a MatFormField

Working on an Angular form, attempting to validate a reactive form with Material design template. Encountering an error when trying to use ngIf condition for validation in the textbox: Error: ERROR Error: mat-form-field must contain a MatFormFieldContr ...