Docs
Sonner
Sonner
An opinionated toast component for Angular.
Loading...
Loading...
import { UbButtonDirective } from '@/components/ui/button'
import { ToasterComponent } from '@/components/ui/sonner'
import { Component } from '@angular/core'
import { toast } from 'ngx-sonner'
@Component({
standalone: true,
selector: 'sonner-demo-new-york',
imports: [ToasterComponent, UbButtonDirective],
template: `
<ub-toaster />
<button ubButton variant="outline" (click)="onClick()">Show Toast</button>
`,
})
export class SonnerDemoNewYork {
protected onClick(): void {
toast('Event has been created', {
description: 'Sunday, December 03, 2023 at 9:00 AM',
action: {
label: 'Undo',
// eslint-disable-next-line no-console
onClick: () => console.log('Undo'),
},
})
}
}import { UbButtonDirective } from '@/components/ui/button'
import { ToasterComponent } from '@/components/ui/sonner'
import { Component } from '@angular/core'
import { toast } from 'ngx-sonner'
@Component({
standalone: true,
selector: 'sonner-demo-default',
imports: [ToasterComponent, UbButtonDirective],
template: `
<ub-toaster />
<button ubButton variant="outline" (click)="onClick()">Show Toast</button>
`,
})
export class SonnerDemoDefault {
protected onClick(): void {
toast('Event has been created', {
description: 'Sunday, December 03, 2023 at 9:00 AM',
action: {
label: 'Undo',
// eslint-disable-next-line no-console
onClick: () => console.log('Undo'),
},
})
}
}About
ngx-sonner is built and maintained by tutkli.
Installation
Run the following command:
npx shadcn-ng@latest add sonner
npm
yarn
pnpm
bun
Add the Toaster component
import { Component } from '@angular/core'
import { ToasterComponent } from '@/components/ui/sonner'
@Component({
standalone: true,
selector: 'app-root',
imports: [ToasterComponent],
template: `
<ub-toaster />
`,
})
export class AppComponent {}Install the following dependencies:
npm install ngx-sonner
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import type { ToasterProps } from 'ngx-sonner'
import { booleanAttribute, Component, input, numberAttribute } from '@angular/core'
import { NgxSonnerToaster } from 'ngx-sonner'
@Component({
standalone: true,
selector: 'ub-toaster',
imports: [NgxSonnerToaster],
template: `
<ngx-sonner-toaster
class="toaster group"
[invert]="invert()"
[theme]="theme()"
[position]="position()"
[hotKey]="hotKey()"
[richColors]="richColors()"
[expand]="expand()"
[duration]="duration()"
[visibleToasts]="visibleToasts()"
[closeButton]="closeButton()"
[toastOptions]="toastOptions()"
[offset]="offset()"
[dir]="dir()"
[class]="_class()"
[style]="_style()"
/>
`,
})
export class ToasterComponent {
invert = input<ToasterProps['invert'], boolean | string>(false, {
transform: booleanAttribute,
})
theme = input<ToasterProps['theme']>('system')
position = input<ToasterProps['position']>('bottom-right')
hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT'])
richColors = input<ToasterProps['richColors'], boolean | string>(false, {
transform: booleanAttribute,
})
expand = input<ToasterProps['expand'], boolean | string>(false, {
transform: booleanAttribute,
})
duration = input<ToasterProps['duration'], number | string>(4000, {
transform: numberAttribute,
})
visibleToasts = input<ToasterProps['visibleToasts'], number | string>(
3,
{ transform: numberAttribute },
)
closeButton = input<ToasterProps['closeButton'], boolean | string>(false, {
transform: booleanAttribute,
})
toastOptions = input<ToasterProps['toastOptions']>({
classes: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton:
'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton:
'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
},
})
offset = input<ToasterProps['offset']>(null)
dir = input<ToasterProps['dir']>('auto')
_class = input('', { alias: 'class' })
_style = input<Record<string, string>>({}, { alias: 'style' })
}import type { ToasterProps } from 'ngx-sonner'
import { booleanAttribute, Component, input, numberAttribute } from '@angular/core'
import { NgxSonnerToaster } from 'ngx-sonner'
@Component({
standalone: true,
selector: 'ub-toaster',
imports: [NgxSonnerToaster],
template: `
<ngx-sonner-toaster
class="toaster group"
[invert]="invert()"
[theme]="theme()"
[position]="position()"
[hotKey]="hotKey()"
[richColors]="richColors()"
[expand]="expand()"
[duration]="duration()"
[visibleToasts]="visibleToasts()"
[closeButton]="closeButton()"
[toastOptions]="toastOptions()"
[offset]="offset()"
[dir]="dir()"
[class]="_class()"
[style]="_style()"
/>
`,
})
export class ToasterComponent {
invert = input<ToasterProps['invert'], boolean | string>(false, {
transform: booleanAttribute,
})
theme = input<ToasterProps['theme']>('system')
position = input<ToasterProps['position']>('bottom-right')
hotKey = input<ToasterProps['hotkey']>(['altKey', 'KeyT'])
richColors = input<ToasterProps['richColors'], boolean | string>(false, {
transform: booleanAttribute,
})
expand = input<ToasterProps['expand'], boolean | string>(false, {
transform: booleanAttribute,
})
duration = input<ToasterProps['duration'], number | string>(4000, {
transform: numberAttribute,
})
visibleToasts = input<ToasterProps['visibleToasts'], number | string>(
3,
{ transform: numberAttribute },
)
closeButton = input<ToasterProps['closeButton'], boolean | string>(false, {
transform: booleanAttribute,
})
toastOptions = input<ToasterProps['toastOptions']>({
classes: {
toast:
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton:
'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton:
'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
},
})
offset = input<ToasterProps['offset']>(null)
dir = input<ToasterProps['dir']>('auto')
_class = input('', { alias: 'class' })
_style = input<Record<string, string>>({}, { alias: 'style' })
}Add the Toaster component
import { Component } from '@angular/core'
import { ToasterComponent } from '@/components/ui/sonner'
@Component({
standalone: true,
selector: 'app-root',
imports: [ToasterComponent],
template: `
<ub-toaster />
`,
})
export class AppComponent {}Usage
import { toast } from "ngx-sonner"toast("Event has been created.")