In the utils folder you will find different angular features such as modals, file uploader, alerts, notifications and more.


  • There are 2 different modals with login and signup examples

  • We use Material Dialog component


  • For alerts we created an Alert Component which is defined in shared module.

  • You can pass the following options to the alert component:

icon: 'check', // FontAwesome icon name
iconColor: 'success' | 'failure', // icon color
title: "Here's a message!", // Title of the modal
text: 'The content, // Text of the modal
options: false, // True will display yes or no buttons
input: false, // True will show a text input
button: 'Good', // Texto of the modal button
time: undefined // Time you want the modal to live (ms)
  • In src/app/utils/pages/alerts/alerts.page.component.ts you can find some of the different alerts you can create using this Alert Component.

File Uploader

  • We included different options to upload files, learn more in src/app/utils/pages/file-uploader/file-uploader.page.component.html

  • We created a FileUploaderDirective which you can find in Shared Module.

Auto Complete

  • We used Material AutoComplete component to create some nice autocomplete input examples.

  • Check src/app/utils/pages/auto-completer/auto-completer.component.html to learn more.


  • For notifications we created a Notification Component which is defined in shared module.

  • We use Material SnackBar component

  • In src/app/utils/pages/notifications/notifications.page.component.ts you can find some of the different notifications you can create using this Notifications Component.

  • You can pass the following options to the notifications component:

this.mySnackBarRef =
this.snackBar.openFromComponent(NotificationComponent, {
data: {
message: 'This is a nice notification positioned in the ' + vpos + ' ' + hpos,
dismissible: true
// you can add everything you want here
duration: 3000,
horizontalPosition: hpos, // 'start' | 'center' | 'end' | 'left' | 'right'
verticalPosition: vpos, // 'top' | 'bottom'
extraClasses: ['notification-wrapper']