npm package: @mediacologne/angular-modal-module
Latest version: 5.0.4

# @mediacologne/angular-modal-module


{:toc}

# News


# Installation

## Install the NPM Module

```bash
$ npm install @mediacologne/angular-modal-module
```

## Using the Library

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

```typescript
// 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>`

```xml
  ......
  <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
```typescript
ModalUtils.alert({
    title: "Alert Title",
    body: "Body Text"
}).then((result: any) => {
    console.log(result);
});
```


### Prompt
```typescript
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
```typescript
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
```typescript
ModalUtils.confirm({
    title: "Component Title",
    component: ModalableTestComponent,
    componentParams: {
        email: "tom@local.int"
    }
}).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
```typescript
// 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

```typescript
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

```typescript
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

```typescript
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.