@mediacologne/angular-modal-module

{:toc}

News

Installation

Install the NPM Module

$ npm install @mediacologne/angular-modal-module

Using the Library

Nach der Installation muss die Library durch das Importieren des ModalModule verfügbar gemacht werden.

// Import your library
import { ModalModule } from '@mediacologne/angular-modal-module';

@NgModule({
  imports: [
    ModalModule
  ]
})
export class AppModule { }

Documentation

Concepts

Es folgt eine kurze Erklärung über die Konzepte der einzelnen Komponenten dieser Library.

Next step is to add the Component <modal-container></modal-container> before closing </body>

  ......
  <modal-container></modal-container>
</body>

The Modal Container Component is holding a list of opened Modals (nested or rather child Modals are supported).

Opening Modals

Alert

ModalUtils.alert({
    title: "Alert Title",
    body: "Body Text"
}).then((result: any) => {
    console.log(result);
});

Prompt

ModalUtils.prompt({
    title: "Prompt Title",
    body: "Body Text"
}).then((result: any) => {
    console.log(result);
    if (result == false) {
        // Modal was canceled
    }
    else {
        // result => written text
    }
});

Confirm

ModalUtils.confirm({
    title: "Confirm Title",
    body: "Body Text"
}).then((result: any) => {
    console.log(result);
    if (result) {
        // Modal was closed positive
    }
    else {
        // Modal was closed negative
    }
});

Component

ModalUtils.confirm({
    title: "Component Title",
    component: ModalableTestComponent,
    componentParams: {
        email: "[e-mail]"
    }
}).then((result: any) => {
    console.log(result);
    if (result.closingResult) {
        // Modal was closed positive
        console.log(result.componentResult); // <-- this was returned by the Component
    }
    else {
        // Modal was closed negative
    }
});

Every Component which should be loadable inside a Modal must implements the Modalable Interface and it's onModalClose(closingResult: boolean) onModalOpen(params: any) Members. These Methods get's called on Modal opening and closing to pass data in or out.

Custom Templates

// xxx.component.ts file
@ViewChild('modalHeader') modalHeader: TemplateRef<any>;
@ViewChild('modalBody') modalBody: TemplateRef<any>;

ModalUtils.alert({
    template: {
        header: this.modalHeader,
        body: this.modalBody
    }
}).then((result: any) => {
    console.log(result);
});


// xxx.component.html file
<ng-template #modalHeader>            
    <h4 class="modal-title" style="color:red">Custom Modal Header!</h4>
</ng-template>

<ng-template #modalBody>            
    <div class="alert alert-danger" role="alert">
        <strong>Oh snap!</strong> This is a Custom Modal Body
    </div>
</ng-template>

<ng-template #modalFooter let-modalCtrl="modalCtrl">
    <button type="button" class="btn btn-primary" (click)="modalCtrl.close(true)">Custom Footer Button OK</button>
    <button type="button" class="btn btn-primary" (click)="modalCtrl.close(false)">Custom Footer Button CANCEL</button>
</ng-template>

If you provide a modalFooter, your custom Buttons are responsible for closing the Modal via modalCtrl (which is passed through ngTemplateOutletContext). Alternatively you can access your component e.g. public methods modalCtrl.component.customAction() which then is responsible for closing the Modal via the modalCtrl.

Accessing Modal from Content Component via ModalCtrl

If the onModalOpen Method defines a modalCtrl argument, the holding Modal will pass it's ControlUnit (Ctrl) to it

onModalOpen(params: any, modalCtrl: any) {
    // Show Modal Config
    conosole.log("Active Modal Config", modalCtrl.config);

    // Modify Modal Config
    modalCtrl.config.btnOk = "Speichern";

    // Close the Modal with a positive result
    modalCtrl.close(true);
}

Close Modal on Event

If the closeOn is defined inside config and is a subscribable object, the Model get's closed on an Event reception

openAlertWithCloseOnEvent() {    
    // Define the event for closing the Modal
    let event: EventEmitter<any> = new EventEmitter();

    ModalUtils.alert({
      title: 'Ein Alert',
      body: "Alert Body Text",
      closeOn: event
    }).then(function (result) {
      console.log("Alert Result", result);
    });

    setTimeout(() => {
        // Trigger the event so the Modal will be closed immediatly
        event.next(true);
    }, 3000);
  }

OnOpen Event

If the OnOpen Callback is defined it will be called immediatly after the Modal will be shown. As argument the callback receives the ModalCtrl which can be used to control the Modal

openAlertWithOpenEvent() {
    ModalUtils.alert({
      title: 'Ein Alert',
      body: "Alert Body Text",
      onOpen: (modalCtrl) => {
        console.log("onOpen => modalCtrl", modalCtrl);
      }
    }).then(function (result) {
      console.log("Alert Result", result);
    });
  }

Developing the Library

Während der Entwicklung an der Library muss diese getestet werden, gebuilded werden sowie gepublished werden können. Hier steht wie's geht:

---

Testing

Um die Library zu testen muss im ./example Ordner ein ng serve ausgeführt werden. Änderungen an der Library werden dann sofort in dem Example verfügbar.

Aus irgendeinem Grund kommt nach dem Start von ng serve sofort ein Fehler

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

Dieser Fehler kann ignoriert werden, denn er verschwindet bei der nächsten Quellcode Änderung. Grund des Fehlers ist unklar => https://github.com/angular/angular-cli/issues/3707

---

Building

Um die Library zu builden wird im ./ Verzeichnis ein npm run build ausgeführt. Dadurch wird die kompilierte Version im ./dist Verzeichnis erzeugt. Die Library wurde erstellt mittels yo a2lib libname von https://github.com/johannesjo/generator-angular2-lib

---

Publishing

Um eine neue Version der Library zu publishen wird im ./ Verzeichnis ein npm publish --access=public ausgeführt. Es ist zu beachten, dass vor dem publishen einer neuen Version unbedingt die Versionsnummer angehoben werden muss.

Generell empfiehlt es sich, zuerst die Versionsnummer anzuheben und anschließend ein build anzustoßen. Ist dies erfolgreich kann die Library gepublished und anschließend die Code Änderung commited werden.