Posts

Showing posts with the label modaldialog

Angular 2/4/5/6/7-Custom Table component with Sort,Filter,Pagination with data from a complex JSON Array-Complete Guide(code snippet)

-
Image
Table GUI //step 1 install ngb bootstrap npm package npm install --save @ng-bootstrap/ng-bootstrap main.module.ts import { NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap/'; @NgModule({ declarations:[], imports: [ NgbPaginationModule.forRoot() ] }) sample.component.html <div class="row" style="padding-top:3px;"> <div class="col-sm-5"> <label class="control-label"> Records per page <label> <input [(ngModel)]="itemsPerPage" style="width:50px" class="form-control" type="text"> </label> </label> <label class="control-label"> Total records: <label class="info-text"> {{TotalCount}} </label> </label> </div> <div *ngIf="count > itemsPerPage" class="col-sm-7 "> <div class=" pull-right...
6 comments
Read more

Angular 2/4/5/6/7-Reusable Custom Bootstrap Modal Dialog Angular Component(3 ways)

-
//step 1 install ngb bootstrap npm package npm install --save @ng-bootstrap/ng-bootstrap main.module.ts import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap/'; import { ModalComponent} from '/modal-dialog.component'; @NgModule({ declarations:[ModalComponent], imports: [ NgbModalModule.forRoot() ] }) modal-dialog.component.ts import { Component, Input, Output, EventEmitter } from '@angular/core'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';@Component({ selector: 'modal-dialog', template: ` <div class="confirm" [handle]="modalHandle" *ngIf="show" ngDraggable> <div class="modal-dialog" > <div class="modal-content"> <div class="modal-header cursor" #modalHandle> <button type="button" class="close" data-dismiss="modal" (click)="closePopUp()" aria-hidden=...
3 comments
Read more