diff --git a/docs/core/services/notification.service.md b/docs/core/services/notification.service.md index 98ae83c1ca..eeb6f8df1d 100644 --- a/docs/core/services/notification.service.md +++ b/docs/core/services/notification.service.md @@ -120,6 +120,40 @@ export class MyComponent implements OnInit { } ``` +By providing a `templateRef` property in the `SnackBarData`, it is possible to render a custom [`TemplateRef`]( https://angular.io/api/core/TemplateRef) in place of the text message. +The message is made available within the template through a context property (eg: `let-message`). + +```ts +import { NotificationService } from '@alfresco/adf-core'; +import { MatSnackBarConfig } from '@angular/material/snackbar'; + +@Component({ + template: ` + Custom content: {{ message }} + `, + providers: [NotificationService] +}) +export class MyComponent implements OnInit { + + snackBarConfig: MatSnackBarConfig = new MatSnackBarConfig(); + + @ViewChild('customTemplate', { read: TemplateRef }) customTemplate: TemplateRef; + + constructor(private notificationService: NotificationService) { + } + + ngOnInit() { + this.snackBarConfig.data = { templateRef: this.customTemplate }; + this.notificationService + .openSnackMessageAction('Do you want to report this issue?', 'send', snackBarConfig) + .afterDismissed() + .subscribe(() => { + console.log('The snack-bar was dismissed'); + }); + } +} +``` + The default message duration is 5000 ms that is used only if you don't pass a custom duration in the parameters of openSnackMessageAction/openSnackMessage methods. You can also change the default 5000 ms adding the following configuration in the app.config.json: