Angular cs-modal

This library was generated with [Angular CLI].

Getting started

Step 1: Install cs-modal:

NPM

npm install --save @cargos/cs-modal

Step 2: Import the CsModalModule:

import { CsModalModule } from '@cargos/cs-modal';

@NgModule({
  declarations: [AppComponent],
  imports: [CsModalModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Import the csModal in AppComponent and initialize the settings:

import { csModal, Modal } from '@cargos/cs-modal';

export class AppComponent {

  public settingsModal: Observable<Modal>;

  constructor() {
    this.settingsModal = csModal.getSettings();
  }

}

Step 4: Declare cs-modal component in app.component.html:

<cs-modal [settings]="settingsModal"></cs-modal>

Step 5: Include style dependencies and a theme:

@import "~material-icons/iconfont/material-icons.css";
@import "~@cargos/cs-modal/styles/modal.css";

//theme
@import "~@cargos/cs-modal/styles/sprintpass.theme.css";

Note: Only sprintpass.theme is available at the moment.

Settings

| Key | Type | Default | Description | | ------------- | ------------- | ------------- | ------------- | | title | string | '' | ... | | titleClass | string | '' | ... | | titleAlign | 'left' ⎮ 'center' ⎮ 'right' | 'center' | ... | | content | ModalContent | '' | ... | | contentAlign | 'left' ⎮ 'center' ⎮ 'right' | 'center' | ... | | type | 'default' ⎮ 'warning' ⎮ 'error' ⎮ 'success' ⎮ 'info' | 'default' | ... | | spinner | 'dots' ⎮ 'circle' | 'dots' | ... | | buttons | ButtonOptions[] | [] | ... | | buttonsAlign | 'left' ⎮ 'center' ⎮ 'right' ⎮ 'space-evenly' | 'center' | ... | | iconName | string | '' | ... | | iconFontClass | string | 'material-icons' | ... | | iconAlign | 'left' ⎮ 'center' ⎮ 'right' | 'center' | ... | | bgTheme | 'black' ⎮ 'white' | 'black' | ... | | theme | 'sprintpass' | 'sprintpass' | ... | | animation | 'scale' ⎮ 'fade' | 'fade' | ... | | closeAnimation | 'scale' ⎮ 'fade' | 'fade' | ... | | closeIcon | boolean ⎮ (modal?: Modal) => Observable<any> | null | ... | | closeIconName | string | 'close' | ... | | columnClass | 'xsmall' ⎮ 'small' ⎮ 'medium' ⎮ 'large' ⎮ 'cover' | 'small' | ... | | fontSize | 'small' ⎮ 'medium' ⎮ 'large' | 'small' | ... | | autoClose | number | 0 | ... | | autoCloseAction | (modal?: Modal) => Observable<any> ⎮ string | '' | ... | | backgroundDismiss | boolean ⎮ (modal?: Modal) => Observable<any> | null | ... | | backgroundDismissAnimation | 'none' ⎮ 'shake' | 'shake' | ... | | escapeKey | boolean ⎮ (modal?: Modal) => Observable<any> | null | ... | | maximize | boolean | false | ... | | onContentReady | (modal?: Modal) => Observable<void> | null | ... | | zIndex | number | 1000 | ... |

Methods

| Name | Settings | Description | | ------------- | ------------- | ------------- | | confirm | | | | success | | | | warning | | | | error | | | | close | N/A | `` |

How to use

import { csModal } from '@cargos/cs-modal';

export class MyComponent {

  constructor() { }

  /* Optional if you want to close the modal when the component is destroyed */
  ngOnDestroy() {
    csModal.close();
  }

  showModal() {
    csModal.confirm({
        //...custom settings
    });
  }

}

Further help

Coming soon.