fix(toast): add toast to banner.service and enable the close event

src/banner/banner.component.ts

@@ -73,7 +73,7 @@ export class Banner {
 
 	@ViewChild("banner") banner;
 
-	constructor(private bannerService: BannerService) {}
+	constructor(protected bannerService: BannerService) {}
 
 	/**
 	 * Emits close event.

src/banner/banner.module.ts

@@ -4,23 +4,25 @@ import { TranslateModule } from "@ngx-translate/core";
 
 import { StaticIconModule } from "./../icon/static-icon.module";
 
-import { Banner } from "./banner.component";
 import { Toast } from "./toast.component";
+import { Banner } from "./banner.component";
+import { BannerService } from "./banner.service";
 
 export { BannerService } from "./banner.service";
 export { Banner } from "./banner.component";
 export { Toast } from "./toast.component";
 
 @NgModule({
 	declarations: [
-		Banner,
-		Toast
+		Toast,
+		Banner
 	],
 	exports: [
 		Banner,
 		Toast
 	],
 	entryComponents: [Banner, Toast],
-	imports: [CommonModule, TranslateModule, StaticIconModule]
+	imports: [CommonModule, TranslateModule, StaticIconModule],
+	providers: [BannerService]
 })
 export class BannerModule {}

src/banner/banner.service.ts

@@ -9,8 +9,8 @@ import {
 	OnDestroy
 } from "@angular/core";
 
-import { Banner } from "./banner.component";
 import { BannerContent, NotificationContent, ToastContent } from "./banner-content.interface";
+import { Banner, Toast } from "./banner.module";
 
 /**
  * Provides a way to use the banner component.
@@ -31,15 +31,6 @@ export class BannerService implements OnDestroy {
 	public bannerRefs = new Array<ComponentRef<any>>();
 	public onClose: EventEmitter<any> = new EventEmitter();
 
-	/**
-	 * Used to create banners.
-	 *
-	 * @private
-	 * @type {ComponentFactory<any>}
-	 * @memberof BannerService
-	 */
-	private componentFactory: ComponentFactory<any>;
-
 	/**
 	 * Constructs BannerService.
 	 *
@@ -85,14 +76,15 @@ export class BannerService implements OnDestroy {
 	 * @param {any} [bannerComp=null] If provided, used to resolve component factory
 	 * @memberof BannerService
 	 */
-	showBanner(bannerObj: BannerContent | NotificationContent | ToastContent, bannerComp = null): Banner {
+	showBanner(bannerObj: BannerContent | NotificationContent | ToastContent, bannerComp = null) {
+		let componentFactory;
 		if (!bannerComp) {
-			this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(Banner);
+			componentFactory = this.componentFactoryResolver.resolveComponentFactory(Banner);
 		} else {
-			this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(bannerComp);
+			componentFactory = this.componentFactoryResolver.resolveComponentFactory(bannerComp);
 		}
 
-		let bannerRef = this.componentFactory.create(this.injector);
+		let bannerRef = componentFactory.create(this.injector);
 		bannerRef.instance.bannerObj = bannerObj;
 		this.bannerRefs.push(bannerRef);
 
@@ -106,7 +98,7 @@ export class BannerService implements OnDestroy {
 
 			// get or create a container for alert list
 			let bannerClassName = "banner-overlay";
-			let bannerList = body.querySelector("." + bannerClassName);
+			let bannerList = body.querySelector(`.${bannerClassName}`);
 			if (!bannerList) {
 				bannerList = document.createElement("div");
 				bannerList.className = bannerClassName;
@@ -142,6 +134,10 @@ export class BannerService implements OnDestroy {
 		return bannerRef.instance;
 	}
 
+	showToast(bannerObj: BannerContent | NotificationContent | ToastContent, bannerComp = Toast) {
+		return this.showBanner(bannerObj, bannerComp);
+	}
+
 	/**
 	 * Programatically closes banner based on `bannerRef`.
 	 *

src/banner/banner.stories.ts

@@ -7,8 +7,7 @@ import { Component } from "@angular/core";
 
 import { TranslateModule } from "@ngx-translate/core";
 
-import { BannerModule, BannerService } from "../";
-
+import { BannerModule, BannerService } from "./banner.module";
 
 @Component({
 	selector: "app-banner-story",
@@ -32,11 +31,35 @@ class BannnerStory {
 	}
 }
 
+@Component({
+	selector: "app-toast-story",
+	template: `
+		<button class="bx--btn bx--btn--primary" (click)="showToast()">Show info toast</button>
+		<div class="banner-container"></div>
+	`,
+	providers: [BannerService]
+})
+class ToastStory {
+
+	constructor(private bannerService: BannerService) { }
+
+	showToast() {
+		this.bannerService.showToast({
+			type: "info",
+			title: "Sample toast",
+			subtitle: "Sample subtitle message",
+			caption: "Sample caption",
+			target: ".banner-container"
+		});
+	}
+}
+
 storiesOf("Banner", module)
 	.addDecorator(
 		moduleMetadata({
 			declarations: [
-				BannnerStory
+				BannnerStory,
+				ToastStory
 			],
 			imports: [
 				BannerModule,
@@ -62,9 +85,14 @@ storiesOf("Banner", module)
 		template: `
 			<ibm-toast [bannerObj]="{
 				type: 'error',
-				title: 'Sample banner',
+				title: 'Sample toast',
 				subtitle: 'Sample subtitle message',
 				caption: 'Sample caption'
 			}"></ibm-toast>
 		`
+	}))
+	.add("Dynamic toast", () => ({
+		template: `
+			<app-toast-story></app-toast-story>
+		`
 	}));

src/banner/toast.component.ts

@@ -1,8 +1,8 @@
 import { Component, Input } from "@angular/core";
 
-import { Banner } from "./banner.component";
 import { BannerService } from "./banner.service";
 import { ToastContent } from "./banner-content.interface";
+import { Banner } from "./banner.component";
 
 /**
  * Banner messages are displayed toward the top of the UI and do not interrupt user’s work.
@@ -22,7 +22,10 @@ import { ToastContent } from "./banner-content.interface";
 			<p class="bx--toast-notification__subtitle" [innerHTML]="bannerObj.subtitle"></p>
 			<p class="bx--toast-notification__caption" [innerHTML]="bannerObj.caption"></p>
 		</div>
-		<button class="bx--toast-notification__close-button" type="button">
+		<button
+			class="bx--toast-notification__close-button"
+			type="button"
+			(click)="onClose()">
 			<svg
 				class="bx--toast-notification-icon"
 				aria-label="close"