diff --git a/src/app/data-display/mask/mask-sample-1/mask-sample-1.component.ts b/src/app/data-display/mask/mask-sample-1/mask-sample-1.component.ts
index 904ffaff65..4533751995 100644
--- a/src/app/data-display/mask/mask-sample-1/mask-sample-1.component.ts
+++ b/src/app/data-display/mask/mask-sample-1/mask-sample-1.component.ts
@@ -18,7 +18,6 @@ export class MaskSample1Component {
     }
 
     private notify(snackbar, message, input) {
-        snackbar.message = message;
-        snackbar.open();
+        snackbar.open(message);
     }
 }
diff --git a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.html b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.html
index b26509e620..9de0630e66 100644
--- a/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.html
+++ b/src/app/interactions/dialog/dialog-styling-sample/dialog-styling-sample.component.html
@@ -1,6 +1,6 @@
 <div igxOverlayOutlet>
     <button igxButton="raised" igxRipple="white" (click)="openDialog()">Show Styled Dialog</button>
-    <igx-dialog #dialog1  message="This will create a new social media account.">
+    <igx-dialog #dialog1 message="This will create a new social media account.">
         <igx-dialog-title>
             <div class="dialog-container">
                 <igx-icon>account_box</igx-icon>
diff --git a/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.html b/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.html
index ebe640418b..44b1bad2b4 100644
--- a/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.html
+++ b/src/app/layouts/expansion-panel/expansion-sample-2/expansion-sample-2.component.html
@@ -12,4 +12,4 @@
     </igx-expansion-panel-body>
 </igx-expansion-panel>
 
-<igx-toast displayTime=1500 #eventToast></igx-toast>
+<igx-toast displayTime="1500" #eventToast></igx-toast>
diff --git a/src/app/scheduling/datepicker/datepicker-sample-7/datepicker-sample-7.component.ts b/src/app/scheduling/datepicker/datepicker-sample-7/datepicker-sample-7.component.ts
index 0909642751..19536fb254 100644
--- a/src/app/scheduling/datepicker/datepicker-sample-7/datepicker-sample-7.component.ts
+++ b/src/app/scheduling/datepicker/datepicker-sample-7/datepicker-sample-7.component.ts
@@ -36,7 +36,6 @@ export class DatepickerSample7Component {
     }
 
     private notify(message: string): void {
-        this.snackbar.message = message;
-        this.snackbar.open();
+        this.snackbar.open(message);
     }
 }
diff --git a/src/app/theming/default-theme-sample/default-theme-sample.component.html b/src/app/theming/default-theme-sample/default-theme-sample.component.html
index eceb541764..e02f400769 100644
--- a/src/app/theming/default-theme-sample/default-theme-sample.component.html
+++ b/src/app/theming/default-theme-sample/default-theme-sample.component.html
@@ -49,8 +49,6 @@
             </ng-template>
         </igx-column>
     </igx-grid>
-</div>
-<div class="snackbar_wrapper">
-    <igx-snackbar #snackbar [autoHide]="true" displayTime="2500" actionText="Undo" (clicked)="restoreRow()">
+    <igx-snackbar #snackbar [outlet]="outlet" displayTime="2500" actionText="Undo" (clicked)="restoreRow()">
     </igx-snackbar>
 </div>
diff --git a/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.html b/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.html
index 2d33b52885..1f52eba09e 100644
--- a/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.html
+++ b/src/app/tree-grid/tree-grid-conditional-cell-style-sample/tree-grid-conditional-cell-style-sample.component.html
@@ -21,5 +21,5 @@
             </ng-template>
         </igx-column>
     </igx-tree-grid>
-    <span id="message" >May contain allergens.</span>
+    <span id="message">May contain allergens.</span>
 </div>