5.2.0 • Published 2 years ago

@craftsjs/modal v5.2.0

Weekly downloads
11
License
MIT
Repository
github
Last release
2 years ago

craftsjs modal

craftsjs modal is a library for angular

See demo

Getting Started

To get started, let's install the package through npm:

Choose the version corresponding to your Angular version:

Angular@craftsjs/modal
155.x
134.x
123.x
112.x
101.x
npm i @craftsjs/modal --S

Install peer dependencies

npm i
@craftsjs/perfect-scrollbar
perfect-scrollbar
@angular/material
@angular/cdk
@angular/animations --S

How to use

  • Import the module AlertModule into the AppModule
import { ModalModule } from '@craftsjs/modal';
@NgModule({
  imports: [ModalModule.forRoot({ width: '800px' })]
})
export class AppModule { }
  • Create a component modal
@Component({
...
})
export class FormModalComponent {

  constructor(
    private _dialogRef: MatDialogRef<FormModalComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data: any
  ) { }

  close() {
    this._dialogRef.close();
  }

}
<craftsjs-modal>
  <modal-header>
    <h3 class="text-accent">Title</h3>
    <button mat-icon-button (click)="close()">
      <mat-icon suffix>close</mat-icon>
    </button>
  </modal-header>
  <modal-body>
    //modal body
  </modal-body>
  <modal-footer>
    <button type="submit" mat-raised-button color="accent">
      Save
    </button>
    <button type="button" mat-raised-button (click)="close()">Close</button>
  </modal-footer>
</craftsjs-modal>
import { ModalModule } from '@craftsjs/modal';

@NgModule({
  imports: [ModalModule],
  entryComponents: [
    FormModalComponent // this line is important
  ]
})
export class OtherModule { }
@Component({
...
})
export class ProductListComponent {

  constructor(
    private _modalService: ModalService
  ) { }

  showModal() {
    this._modalService.show(FormModalComponent);
  }
}
5.2.0

2 years ago

5.1.0

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.0.0

3 years ago

3.0.0

4 years ago

2.0.0

5 years ago

1.0.0

5 years ago