Toaster Service

Toaster service is similar to Ace's $.toaster function.
You can show toast messages by specifying options such as title etc or you can use TemplateRef:

import { NgAceToasterService } from 'ng-ace-admin';

export class SomeComponent {
    constructor(private toasterService: NgAceToasterService) {

    }

    someMethod() {
        this.toasterService.show({
            placement: 'tr',
            className: '...',

            headerClass: '...',
            bodyClass: '...',
            closeClass: '...',

            header: 'Notification message!',
            body: '...'
        }).then((result: any) => {
            // console.log(result)
        })
    }
}

Or by TemplateRef:

import { NgAceToasterService } from 'ng-ace-admin';

export class SomeComponent {
    constructor(private toasterService: NgAceToasterService) {

    }

    @ViewChild(TemplateRef) toastTemplate;
    someMethod() {
        this.toasterService.show({
            templateRef: toastTemplate,

            placement: 'center',
            className: 'bgc-info-tp1'
        })
    }
}

html

<ng-template #toastTemplate>
    <div class="d-flex m-n1 text-white">
        <div class="toast-ico">
         <i class="fas fa-exclamation-triangle fa-3x text-yellow-l5 mx-3"></i>
        </div>

        <div class="pos-rel">
            <div class="toast-header bg-transparent border-0 text-120 text-white font-bolder pl-0">
               ...
            </div>

            <div class="toast-main">
               ...
            </div>
        </div>
    </div>
</ng-template>

Methods

show

The following options can be passed to show function.
Mostly used with the non-TemplateRef version.

The option values are similar to Ace's toaster options

`placement`:

`belowNav`

`sticky`

`delay`

`className`

`width`

`body`

`headerClass`

`bodyClass`

`titleClass`

`closeClass`

`progress`

`progressReverse`

`templateRef`

You can also pass a templateRef like the above example.

Elements with .close-btn class in body or headers will hide/close the toast when clicked:

this.toasterService.show({
    placement: 'tr',
    className: '...',

    headerClass: '...',
    bodyClass: '...',
    closeClass: '...',

    header: 'Notification message!',
    body: `
        Message Here
        <a role="button" class="close-btn text-red">Close</a>
    `
}).then((result: any) => {
    // console.log(result)
})

remove

You can remove a specific toast like this:

this.toasterService.show({
    // options here
}).then((result: any) => {
    let $toast = result.toast
    this.toasterService.remove($toast)
})

removeAll

The following options are available:

`placement`:

If specified removes all toasts only from this position

`instant`

If true will instantly remove toasts, no fade animation

this.toasterService.removeAll('tr')
this.toasterService.removeAll()

this.toasterService.removeAll('tr', true)