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']

Last updated