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']
  });
​

Layouts

Theming

Last modified 3yr ago