Angular 4 from 4.0.0 and above.
Angular 5 from 5.0.0 and above.

We have the following methods you can use to notify message and message passed can be a SafeHTML or string.
  
  success: for success alert. Accepts SafeHtml | string
  warning: for warning alert. Accepts SafeHtml | string
  info: for information alert. Accepts SafeHtml | string
  error: for error alert (This can accept default message and optional backend error, if backend response error is passed, this will be used). Accepts Object | Array<SafeHtml | string> | Array<Object> 
  clear: to destroy current open alert but alert disappears based on configured time.
  

NgPopAlert can be used as an:
 
 Overlay: This is best used while the <ng-pop-alert></ng-pop-alert> is reference in a top level component that is always visible throughout the entire state of the angular app. such as usage in app.component and header layout component of your application.
 No Overlay: This is best used if you need to override the overlay approach for a specific component and render it in that current component content.  <ng-pop-alert [overlay]="false"></ng-pop-alert>. you can also choose to use this alert in every component like this but it is not advisable to do so. 

import {Component, OnInit} from '@angular/core';
import {NG_POP_ALERT_CONF} from 'ng-pop-alert';
import {NgPopAlertService} from 'ng-pop-alert';
import {SafeHtml} from "@angular/platform-browser";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  styles = {
    border: '2px solid red'
  };

  constructor(private ngAlertService: NgPopAlertService) {
    NG_POP_ALERT_CONF.duration = 5000; // milliseconds
  }

  success() {
    const msg: SafeHtml = `<b>Hello world</b>`;
    this.ngAlertService.success(msg);
  }

  info() {
    this.ngAlertService.info('Hello world');
  }

  warning() {
    this.ngAlertService.warning('Hello world');
  }

  error() {
    this.ngAlertService.error('Hello world');
  }

  clear() {
    this.ngAlertService.clear();
  }

  errorWithData() {
    const response = {
      errors: ['Username not filled', 'Email field is empty'], // can be SafeHtml | String | Array<Object> | Array<SafeHtml | String> | Object
      status: 400,
      message: 'Unable to process information'
    };
    this.ngAlertService.error('Error encountered', response['errors']);
  }

  ngOnInit() {
  }
}

<div style="text-align:center">
<h1>
  Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo"
     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some test scenario </h2>

<!-- input [overlay] is by default true and you can also customize the behaviour by passing down css rules with input [styles]  -->
<ng-pop-alert></ng-pop-alert>

<ul>
<li>
  <h2><button type="button" role="button" (click)="success()">Success Alert</button></h2>
</li>
<li>
  <h2><button  type="button" role="button" (click)="info()">Info Alert</button></h2>
</li>
<li>
  <h2><button  type="button" role="button" (click)="warning()">Warning Alert</button></h2>
</li>
<li>
  <h2><button  type="button" role="button" (click)="error()">Error with no error Data Alert</button></h2>
</li>
<li>
  <h2><button  type="button" role="button" (click)="errorWithData()">Error with error Data Alert</button></h2>
</li>
<li>
  <h2><button  type="button" role="button" (click)="clear()">Clear alert</button></h2>
</li>
</ul>