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">×</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?
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;
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)
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.