[Fixed] Angular Notifier not showing

Issue

I am trying to show a notification after a button click by using angular-notifier(version : 4.1.1) .

I referred from this site to do this.

Even after button click the notification is not showing.

Could you please help what i am missing.

Following are files I used :

In app.module.ts:

const customNotifierOptions: NotifierOptions = {
    position: {
        horizontal: {
            position: 'left',
            distance: 12
        },
        vertical: {
            position: 'bottom',
            distance: 12,
            gap: 10
        }
    },
    theme: 'material',
    behaviour: {
        autoHide: 5000,
        onClick: false,
        onMouseover: 'pauseAutoHide',
        showDismissButton: true,
        stacking: 4
    },
    animations: {
        enabled: true,
        show: {
            preset: 'slide',
            speed: 300,
            easing: 'ease'
        },
        hide: {
            preset: 'fade',
            speed: 300,
            easing: 'ease',
            offset: 50
        },
        shift: {
            speed: 300,
            easing: 'ease'
        },
        overlap: 150
    }
};
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatExpansionModule,
    NotifierModule.withConfig(customNotifierOptions),
    NgbModule,
    PageHeaderModule,
    Ng2SmartTableModule,
    LanguageTranslationModule,
    DemoMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In app.component.ts:

@Component({
    selector: 'app-comp',
    templateUrl: './apps.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    notifier: NotifierService;

    constructor( notifier: NotifierService) {
        this.notifier = notifier
    }
    show() {
        this.notifier.notify('success', 'Notification successfully opened.');
    }
    ngOnInit() {
    }
}

In app.component.html

<button class="pull-right btn top-search-btn"  (click)="show()">Show</button>

Solution

As per your source code you haven’t added <notifier-container></notifier-container> in app.component.html, so your app.component.html should be something like this

<notifier-container></notifier-container>
<button class="pull-right btn top-search-btn" (click)="show()">Show</button>

You have to add container for notifications as they describe in https://github.com/dominique-mueller/angular-notifier#2-use-the-notifier-container-component

They have different versions compatible with different versions of angular please check this list here https://github.com/dominique-mueller/angular-notifier#angular-versions

Note: please import their style sheets as well as they described here https://github.com/dominique-mueller/angular-notifier#3-import-the-styles