Ngx-ssc-popover NPM

NgxSscPopover

Angular Scania Shared Components Popover

This library was generated with Angular CLI version 12.2.0 & build on Angular Material.

Installation

Run npm install ngx-ssc-popover --save in your Angular project.

Note: Don't forget to install ng add @angular/materialnpm if you don't have it in your project

Import NgxSscPopoverModule in your app.module.ts file.

Import @import "../node_modules/ngx-ssc-popover/ngx-ssc-popover.scss" in your global style file styles.scss/less/css file.

Usage

<mat-icon
        headerTitle="Popover Title"
        placement="above"
        
        [headerIcon]="ngxSscPopoverHeaderIcon"
        [sscPopoverErrorMessage]="ngxSscPopoverErrorMessage"
        [sscPopover]="ngxSscPopoverContent"
       
        (reFetchContent)="onFetchPopoverContent()"
>info</mat-icon>

Development workflow

First Header	type	default	usage
placement	PopoverPlacementleft, right, above, below, auto	above	To defined the popover placement.
delay	number	500	Popover delay when opening.
headerIcon	SSCIcon, undefined	undefined	To add an icon in the header of the popover that emits an event.
headerTitle	string, undefined	undefined	To add a title in the header of the popover.
sscPopover	string, undefined	undefined	Popover content
sscPopoverErrorMessage	string, undefined	undefined	Popover error message if an error happened during fetching the content
(reFetchContent)	Event		Emit an event if the header icon got clicked.

SSCIcon class that is used as a type for headerIcon take two properties

Properties	types	default	usage
name	string, undefined	undefined	The icon name, can add find the list of icons under https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list
color	success, info, danger, warning	info	The icon color