Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Styled byLS AlertsLS ToastsLS Position
Service usage depends on Notify Component at your layout.
<!--layout.component.html-->
<Notify></Notify>
<router-outlet></router-outlet>
Default
Blurry
Gradient
Outline
<button class="Btn Btn-success"
(click)="Alert.Default.Success('My Success message',5000,+Position)">Success</button>
<button class="Btn Btn-success"
(click)="Alert.Blurry.Success('My Success message',5000,+Position)">Success</button>
<button class="Btn Btn-success"
(click)="Alert.Gradient.Success('My Success message',5000,+Position)">Success</button>
<button class="Btn Btn-success"
(click)="Alert.Outline.Success('My Success message',5000,+Position)">Success</button>
Alert = this.notifyService.Alert;
Default
Blurry
Gradient
Outline
<button class="Btn Btn-success"
(click)="Pill.Default.Success('My Success message',5000,+Position)">Success</button>
<button class="Btn Btn-success"
(click)="Pill.Blurry.Success('My Success message',5000,+Position)">Success</button>
<button class="Btn Btn-success"
(click)="Pill.Gradient.Success('My Success message',5000,+Position)">Success</button>
<button class="Btn Btn-success"
(click)="Pill.Outline.Success('My Success message',5000,+Position)">Success</button>
Pill = this.notifyService.Pill;
<button class="Btn Btn-success"
(click)="Toast.Success({Title:'Success',Message:'My Success message'},5000,+Position)">Success</button>
Toast = this.notifyService.Toast.Default;
<div class="Col-12 Col-lg-6">
<div class="Btn-group M-2">
<button class="Btn Btn-primary" (click)="Show(Type,Position,SetItem(Theme))">Show</button>
<button class="Btn Btn-secondary" (click)="ShowAllPos()">All Pos</button>
</div>
</div>
<div class="Col-12 Col-lg-6">
<div class="Btn-group M-2">
<button class="Btn Btn-primary" (click)="Show(Type,Position,SetItem(Theme,true))">Show (FA)</button>
<button class="Btn Btn-secondary" (click)="ShowAllPos(true)">All Pos (FA)</button>
</div>
</div>
notifyService = inject(NotifyService);
Types = NotifyType;
IconSizes = NotifyIconSize;
Positions = NotifyPosition;
Animations = NotifyAnim;
Themes = NotifyTheme;
Backgrounds = NotifyBg;
Content: NotifyContent = {Title: 'Title', Message: 'My message default'};
ExpireIn = 6000;
Dismissible = true;
Titled = false;
ProgressBar = true;
Timer = true;
ShowIcon = true;
ListThemes: string[] = [];
ListAnimations: string[] = [];
ListTypes: string[] = [];
ListPositions: string[] = [];
ListIconSizes: string[] = [];
ListBackgrounds: string[] = [];
Theme: NotifyTheme = NotifyTheme.Success;
Anim: NotifyAnim = NotifyAnim.Grow;
Type: NotifyType = NotifyType.Alert;
Position: NotifyPosition = NotifyPosition.TopCenter;
IconSize: NotifyIconSize = NotifyIconSize.Normal;
Background: NotifyBg = NotifyBg.Blurry;
ngOnInit(): void {
this.ListThemes = Object.keys(NotifyTheme).filter(k => !isNaN(Number(k)));
this.ListAnimations = Object.keys(NotifyAnim).filter(k => !isNaN(Number(k)));
this.ListTypes = Object.keys(NotifyType).filter(k => !isNaN(Number(k)));
this.ListPositions = Object.keys(NotifyPosition).filter(k => !isNaN(Number(k)));
this.ListIconSizes = Object.keys(NotifyIconSize).filter(k => !isNaN(Number(k)));
this.ListBackgrounds = Object.keys(NotifyBg).filter(k => !isNaN(Number(k)));
}
Show = (Type: NotifyType, Position: NotifyPosition, Item: NotifyItem) => this.notifyService.Show(+Type, +Position, Item);
Alert = this.notifyService.Alert;
Pill = this.notifyService.Pill;
Toast = this.notifyService.Toast.Default;
Iconic = (Type: NotifyType, Position: NotifyPosition,
Theme: NotifyTheme, Content: NotifyContent, Icon: NotifyIcon, ExpireIn: number = 4000) => this.notifyService.Iconic(Type, Position, Theme, Content, Icon, ExpireIn);
SetIcon(innerHtml: string): NotifyIcon {
return {Size: +this.IconSize, InnerHtml: innerHtml};
}
SetItem(theme: NotifyTheme = this.Theme, withFaIcons: boolean = false): NotifyItem {
return {
Content: this.Content, Theme: +theme, Background: +this.Background, Anim: +this.Anim,
Icon: this.ShowIcon ? withFaIcons ? this.SetIcon(this.FaIcons(+theme)) : this.SetIcon('') : undefined,
Countdown: {ExpireIn: this.ExpireIn, Timer: this.Timer, ProgressBar: this.ProgressBar},
Titled: this.Titled, Dismissible: this.Dismissible
};
}
FaIcons(theme: NotifyTheme): string {
switch (theme as NotifyTheme) {
case NotifyTheme.Success:
return `<i class="fa-solid fa-check"></i>`;
case NotifyTheme.Error:
return `<i class="fa-solid fa-circle-xmark"></i>`;
case NotifyTheme.Warning:
return `<i class="fa-solid fa-circle-exclamation"></i>`;
case NotifyTheme.Info:
return `<i class="fa-solid fa-circle-info"></i>`;
case NotifyTheme.None:
default:
return `<i class="fa-solid fa-bell"></i>`;
}
}
WithFaIcon(Theme: NotifyTheme, Content: NotifyContent, Icon: NotifyIcon): NotifyItem {
return {
Content, Theme, Anim: +this.Anim, Icon,
Countdown: {ExpireIn: this.ExpireIn, Timer: false, ProgressBar: false},
Titled: false, Background: NotifyBg.Basic, Dismissible: this.Dismissible
};
};
ShowAllThemes(withFaIcons: boolean = false): void {
const position = withFaIcons ? NotifyPosition.BottomRight : NotifyPosition.BottomLeft;
Object.keys(NotifyTheme).filter(k => !isNaN(Number(k))).forEach((theme) => this.Show(+this.Type, +position, this.SetItem(+theme, withFaIcons)));
}
ShowAllPos(withFaIcons: boolean = false): void {
const themeRn = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
Object.keys(NotifyPosition).filter(k => !isNaN(Number(k))).forEach((pos) => this.Show(+this.Type, +pos, this.SetItem(themeRn(0, 4), withFaIcons)));
}
Comparison of Default and Fa Icons
Customized with Fa Icons
<Alert [Id]="'Cus_Youtube'"
[Item]="WithFaIcon(2, Content, SetIcon('<i class=\'fa-brands fa-youtube\'></i>'))"></Alert>
<button class="Btn Btn-sm Btn-danger" (click)="Iconic(0,1,2,Content,SetIcon('<i class=\'fa-brands fa-youtube\'></i>'))">
Youtube-ish
</button>
Content: NotifyContent = {Title: 'Title', Message: 'My message default'};
Iconic = (Type: NotifyType, Position: NotifyPosition,
Theme: NotifyTheme, Content: NotifyContent, Icon: NotifyIcon, ExpireIn: number = 4000) => this.notifyService.Iconic(Type, Position, Theme, Content, Icon, ExpireIn);
SetIcon(innerHtml: string): NotifyIcon {
return {Size: +this.IconSize, InnerHtml: innerHtml};
}
WithFaIcon(Theme: NotifyTheme, Content: NotifyContent, Icon: NotifyIcon): NotifyItem {
return {
Content, Theme, Anim: +this.Anim, Icon,
Countdown: {ExpireIn: this.ExpireIn, Timer: false, ProgressBar: false},
Titled: false, Background: NotifyBg.Basic, Dismissible: this.Dismissible
};
};