Utils

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

Modals

• There are 2 different modals with login and signup examples

• We use Material Dialog component

Alerts

• 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.

Notifications

• 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,
       icon,
       type,
       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']
  });

​