将数据从自定义模式传递到组件中的 html 表 - 角度

Question

I wrote a custom modal as given below...
modal.component.ts:

import { Component } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.scss']
})
export class ModalComponent {
    closeResult: string;
    constructor(private modalService: NgbModal) { }

    open(content: any) {
        this.modalService.open(content, { size: 'lg' }).result.then((result) => {
            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}`;
        }
    }

}  

modal.component.html:

<div class="row">
    <div class="col-sm-12">
        <button class="btn btn-primary mb-4" (click)="open(content)">Add new user</button>
        <ng-template #content let-c="close" let-d="dismiss">
            <div class="modal-header">
                <h4 class="modal-title">Add new user</h4>
                <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form ngsubmit="saveUserDetails(items)" name="userDetailsForm">
                    <div class="form-group row">
                        <label for="inputPassword3" class="col-sm-3 col-form-label">Name</label>
                        <div class="col-sm-9">
                          <input type="text" class="form-control" id="inputName3" placeholder="Name" ngModel="name" >
                        </div>
                    </div>
                    <div class="form-group row">
                      <label for="inputEmail3" class="col-sm-3 col-form-label">Email</label>
                      <div class="col-sm-9">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email" ngModel="email">
                      </div>
                    </div>
                    <div class="form-group row">
                      <div class="col-sm-3">Role</div>
                      <div class="col-sm-9">
                        <div class="">
                            <select class="browser-default custom-select">
                                <option selected>Administrator</option>
                                <option value="1">User</option>
                              </select>
                        </div>
                      </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" (click)="c('Ok click')">Ok</button>
                <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
            </div>
        </ng-template>
    </div>
</div>  

Then I called it in my compoent as shown below:

 <div class="row">
              <div class="col-md-12 col-lg-12">
                <div class="col-lg-12-col-md-12">
                  <!-- <button class="btn btn-primary mb-4 posBtn" data-toggle="modal" data-target="#myModal">Add new user</button> -->
                  <app-modal class=""></app-modal>
                  <!-- <jw-modal>Add new user</jw-modal> -->
                </div>
                <div class="card">
                  <!-- Default panel contents -->
                  <div class="card-header"><b>User Management</b></div>
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>  

Now I want to pass form data in modal to table in the component. How do I add action listeners to Ok button in modal to accomplish this?

Answer 1

To add data to the modal:

const modalRef = this.modalService.open(ConfirmModalComponent);
modalRef.componentInstance.data = data;

And in the modal component I use @Input:

@Input() data:any = null;

Answer 2

This is like passing data from child to parent component when event gets triggered for which you can use @output like below:

Parent.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
Message: {{message}}
<app-child (messageEvent)="receiveMessage($event)"></app-child>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}

child.component.ts (In your case, its modal.component.ts)

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<button (click)="sendMessage()">Send Message</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hola Mundo!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}