how to join two table in codeigniter easily[updated] | ci_model | ci_controller | codeigniter 3 -datainflow
Generate bootstrap modal
This tutorial will help you to simply create a Modal Window in Angular 6. Angular Bootstrap modal is a dialog box/popup window which can be used for display images and some more useful content. Create a dialog box/popup using an ng-bootstrap library, to make the management of bootstrap modal dialog easier in Angular.
First of all, you have to install an ng-bootstrap library.
Follow it to install ng-bootstrap-modal:
npm install --save @ng-bootstrap/ng-bootstrap
Here are the HTML elements, which elements I am followed to create a modal popup, you can apply these code. Copy the code and apply it.
Modal Body:
<ng-template #content let-modal> <div class="modal-header"> <h4 class="modal-title" id="modal-basic-title">My Modal</h4> <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="dateOfBirth">My Name</label> <div class="input-group"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> </form> </div> <!-- <div class="modal-footer"> <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button> </div> --> </ng-template>
Modal Button:
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Demo modal</button>
Open page.ts file which page you want to display modal and try with below code.
page.ts:
import {Component} from '@angular/core'; import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'ngbd-modal-basic', templateUrl: './modal-basic.html' }) export class NgbdModalBasic { closeResult: string; constructor(private modalService: NgbModal) {} open(content) { this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).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}`; } } }
Related posts
There is an error here!
Show your error?
It’s wonderful that you are getting ideas from this paragraph as well as from
our argument made at this time.