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:
1
{
2
icon: 'check', // FontAwesome icon name
3
iconColor: 'success' | 'failure', // icon color
4
title: "Here's a message!", // Title of the modal
5
text: 'The content, // Text of the modal
6
options: false, // True will display yes or no buttons
7
input: false, // True will show a text input
8
button: 'Good', // Texto of the modal button
9
time: undefined // Time you want the modal to live (ms)
10
}
Copied!
  • 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:
1
this.mySnackBarRef =
2
this.snackBar.openFromComponent(NotificationComponent, {
3
data: {
4
message: 'This is a nice notification positioned in the ' + vpos + ' ' + hpos,
5
icon,
6
type,
7
dismissible: true
8
// you can add everything you want here
9
},
10
duration: 3000,
11
horizontalPosition: hpos, // 'start' | 'center' | 'end' | 'left' | 'right'
12
verticalPosition: vpos, // 'top' | 'bottom'
13
extraClasses: ['notification-wrapper']
14
});
Copied!
Last modified 2yr ago