Merge pull request #3343 from IgniteUI/ganastasov/fix-3342

fix(toast): add element ref to the outlet property to apply the custom theme
IgniteUI · Jun 8, 2023 · a920d1f · a920d1f
2 parents 3ee5d93 + 7f75e67
commit a920d1f
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/app/notifications/toast/toast-style/toast-style.component.html b/src/app/notifications/toast/toast-style/toast-style.component.html
@@ -26,5 +26,5 @@ <h5 class="title"> Top Position</h5>
         </article>
     </section>
 
-    <igx-toast #toast [autoHide]="false">This message will self-destruct in 4 seconds.</igx-toast>
+    <igx-toast #toast [autoHide]="false" [outlet]="elem">This message will self-destruct in 4 seconds.</igx-toast>
 </div>
diff --git a/src/app/notifications/toast/toast-style/toast-style.component.ts b/src/app/notifications/toast/toast-style/toast-style.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
 import { IgxToastComponent, VerticalAlignment } from 'igniteui-angular';
 
 @Component({
@@ -10,6 +10,8 @@ export class ToastStyleComponent {
     public toast: IgxToastComponent;
     public position = VerticalAlignment;
 
+    constructor(public elem: ElementRef) { }
+
     openToast(toast: IgxToastComponent, pos: VerticalAlignment) {
         toast.positionSettings.verticalDirection = pos;
         toast.open();