gh-ui

GoldenHippo UI components.

Installation

To use the gh-ui library in your Angular project, follow these steps: Install the gh-ui library by running the following command npm install --save @a15-ghm/gh-ui

GhUiSnackbarComponent

This component allows you to display customizable snackbars in your Angular application.

Importing the GhUiSnackbarComponent

Once you have installed the gh-ui library, you can import the GhUiSnackbarComponent in your Angular application.

1. Open the module file (app.module.ts) where you want to use the GhUiSnackbarComponent.
2. Import the necessary modules and components:
3. Use the GhUiSnackbarComponent in your Angular application

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GhUiLibModule, GhUiSnackbarComponent } from '@a15-ghm/gh-ui';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GhUiLibModule, MatToolbarModule, BrowserAnimationsModule, MatCardModule, MatButtonModule],
  providers: [GhUiSnackbarComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Using the GhUiSnackbarComponent

To show a custom snackbar using the GhUiSnackbarComponent, you can call the show() method and pass the necessary data.

import { Component, OnInit } from '@angular/core';
import { GhUiSnackbarComponent } from '@a15-ghm/gh-ui';
import { GhUiSnackbarConfig } from './app.config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(private snackbarComponent: GhUiSnackbarComponent) {}

  ngOnInit(): void {}

  showSnackbar() {
    this.snackbarComponent.show(GhUiSnackbarConfig);
  }
}

In the example above, the show() method in the AppComponent class demonstrates how to use the GhUiSnackbarComponent to show a custom snackbar with a header, message, and delay, that are saved in GhUiSnackbarConfig.

import { ISnackBarData } from '@a15-ghm/gh-ui';

export const GhUiSnackbarConfig: ISnackBarData = {
  header: 'Header', //Header text of snackbar component
  message: 'Main text', //Message text of snackbar component
  showWithDelay: false, //On or off showing snackbar component after delayTimeMs (not necessary)
  delayTimeMs: 12000, //Number of ms after which we should show component again (not necessary)
};

GhUiSpinnerComponent

This component allows you to display customizable spinners in your Angular application.
This component contains two types of spinners:

1. Default spinner from angular material.
2. Gif spinner.

There are two options for these spinners:

1. Common Spinner. It's placed in the center of the screen and has overlay.
2. Local spinner. It's located wherever you put it.

Using the GhUiSpinnerComponent

Importing the GhUiSpinnerComponent

Once you have installed the gh-ui library, you can import the GhUiSpinnerComponent in your Angular application.

1. Open the module file (app.module.ts) where you want to use the GhUiSpinnerComponent.
2. Import the necessary modules and components:
3. Use the GhUiSpinnerComponent in your Angular application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GhUiLibModule, GhUiSpinnerComponent } from '@a15-ghm/gh-ui';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GhUiLibModule, MatToolbarModule, BrowserAnimationsModule, MatCardModule, MatButtonModule],
  providers: [GhUiSpinnerComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Using in HTML:

1. Default spinner. Customization includes choice of color, diameter, as well as displaying strictly in the center of the screen or freely configurable location in your application.

API:

All inputs are optional.

• @Input() color: string. - spinner color. The default is blue.
• @Input() diameter: string- The diameter of the spinner. The default is 100.
• @Input() isCommonSpinner: boolean - Whether the spinner should be positioned in the center of the screen. The default is true.

2. Gif spinner. Customization includes passing an url for the gif, and choosing to display strictly in the center of the screen or a freely configurable location in your application.

API:

• @Input() spinnerUrl: string - Required parameter. If not specified, the default spinner will appear.
• @Input() isCommonSpinner: boolean - Not a required parameter.
  Whether the spinner should be positioned in the center of the screen. The default is true.

Using in TS\JS

API:

The spinner is immediately shown when added to the HTML.
Show/hide the spinner with *ngIf.

Examples:

TS\JS:

import { Component, OnInit } from '@angular/core';
import { GhUiSpinnerComponent } from '@a15-ghm/gh-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  public isShown = false;

  showBaseSpinner() {
    this.isShown = true;
  }

  hideBaseSpinner() {
    this.isShown = false;
  }
}

HTML:

1. Default spinner

<gh-ui-spinner *ngIf="isShown"></gh-ui-spinner>
<gh-ui-spinner *ngIf="isShown" [color]="black"></gh-ui-spinner>
<gh-ui-spinner *ngIf="isShown" [color]="rgb(59, 15, 59)" [diameter]="150"></gh-ui-spinner>
<gh-ui-spinner *ngIf="isShown" [color]="#46a35e" [diameter]="30" [isCommonSpinner]="false"></gh-ui-spinner>

2. Gif spinner

<gh-ui-spinner *ngIf="isShown" [spinnerUrl]="'https://test.com'"></gh-ui-spinner>
<gh-ui-spinner *ngIf="isShown" [spinnerUrl]="'https://test.com'" [isCommonSpinner]="false"></gh-ui-spinner>

GhUiToastComponent

This component allows you to display standard toast message types (Success, Error and Warn) and customize them by passing styles as incoming parameters.

Importing the GhUiToastComponent and GhUiToastService

Once you have installed the gh-ui library, you need to import the GhUiToastComponent and GhUiToastService into your Angular application.

1. Open the module file (app.module.ts) in which you want to use the GhUiToastComponent and GhUiToastService.
2. Import the required modules and components
3. Use the GhUiToastComponent in your Angular application

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GhUiLibModule, GhUiToastComponent, GhUiToastService } from '@a15-ghm/gh-ui';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GhUiLibModule, BrowserAnimationsModule],
  providers: [GhUiToastComponent, GhUiToastService],
  bootstrap: [AppComponent],
})
export class AppModule {}

Using the GhUiToastComponent

Standard toast message

To display a standard toast message using the GhUiToastComponent, you need to inject GhUiToastService (or import it in the constructor), and call the showToast() method with your options

import { Component, inject } from '@angular/core';

import { GhUiToastService, ToastType } from '@a15-ghm/gh-ui';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
  private toastService = inject(GhUiToastService);

  showToast() {
    this.toastService.showToast({ message: 'success', type: ToastType.Success });
  }

  clearToasts() {
    this.toastService.clearToasts();
  }
}

The next step is to use the GhUiToastComponent's selector () as a directive in template. You can add it anywhere

<gh-ui-toast></gh-ui-toast>

In the example above, the showToast() method in the AppComponent class demonstrates the use of the GhUiToastComponent to display a standard toast with the basic required options. You can also use the clearToasts() method to close ALL toast messages

Below is an example of all the possible options that can be changed and passed to showToast():

import { IToastOptions, ToastType, ToastPosition } from '@a15-ghm/gh-ui';

const config: IToastOptions = {
  message: 'message', // Text of toast message (required), HTML support
  type: ToastType.Success, // Type of toast message (required)
  position: ToastPosition.Bottom, // Position of toast message (not necessary, by default is ToastPosition.Top)
  isAutoClose: true, // Automatic or manual closing toast message (not necessary, by default is false)
  duration: 3000, // Duration in ms of showing toast message (not necessary, by default is 5000ms). If it is passed, the isAutoClose option will be true
  header: 'HEADER', // Header's text of toast message (not necessary, by default is missing and not show), HTML support
  customCss: {
    // Css styles for custom toast (not necessary, by default is missing and not using)
    main: { color: 'white', backgroundColor: 'black' }, // Css styles for main content
    header: {
      // Css styles for header if it exists
      fontSize: '30px',
      border: '1px solid red',
    },
    button: { color: 'yellow' }, // Css styles for close button of toast message
  },
};

All possible toast options can be found in the interface (IToastOptions), positions (ToastPosition) and types (ToastType) in the enums exported from the gh-ui library

Custom toast message

In addition, you can customize the toast message with your own styles. To do this, just pass the css styles to the customCss option

import { ToastType, IToastOptions } from '@a15-ghm/gh-ui';

const config: IToastOptions = {
  message: 'Custom toast',
  type: ToastType.Custom,
  customCss: {
    main: { color: 'white', backgroundColor: 'black' },
    header: {
      color: 'blue',
      border: '1px solid red',
    },
    button: { color: 'yellow' },
  },
};

In the example above, the ToastType.Custom type was used, it removes all standard styles, but you can add customCss option for standard toast types as well (ToastType.Success, etc.) if desired