Skip to content

feedback.md

Latest commit

 

History

History
149 lines (110 loc) · 5.01 KB

feedback.md

File metadata and controls

149 lines (110 loc) · 5.01 KB

Feedback & Overlay Components

Part of the igniteui-angular-components skill hub. For app setup, providers, and import patterns — see setup.md.

AGENT INSTRUCTION: All components in this file rely on Angular animations and the Ignite UI overlay system. Before using any of them, ensure provideAnimations() (or provideAnimationsAsync()) is present in app.config.ts. If it is missing, add it — these components will throw runtime errors or silently fail to animate without it.

Contents

Dialog

Docs: Dialog Component

import { IgxDialogComponent, IgxDialogTitleDirective, IgxDialogActionsDirective } from 'igniteui-angular/dialog';
import { IgxButtonDirective } from 'igniteui-angular/directives';
<igx-dialog
  #confirmDialog
  [isModal]="true"
  [closeOnEscape]="true"
  [closeOnOutsideSelect]="false"
  title="Confirm Delete"
  (closed)="onDialogClosed()">
  <igx-dialog-title>Confirm Delete</igx-dialog-title>
  <p>Are you sure you want to delete this item? This action cannot be undone.</p>
  <div igxDialogActions>
    <button igxButton="flat" (click)="confirmDialog.close()">Cancel</button>
    <button igxButton="contained" (click)="deleteItem(); confirmDialog.close()">Delete</button>
  </div>
</igx-dialog>

<button igxButton="contained" (click)="confirmDialog.open()">Delete Item</button>

Programmatic control:

dialog = viewChild.required<IgxDialogComponent>('confirmDialog');

open() { this.dialog().open(); }
close() { this.dialog().close(); }

Events: (opening), (opened), (closing), (closed), (leftButtonSelect), (rightButtonSelect).

Snackbar

Docs: Snackbar Component

import { IgxSnackbarComponent, IgxSnackbarActionDirective } from 'igniteui-angular/snackbar';
import { IgxButtonDirective } from 'igniteui-angular/directives';
<igx-snackbar
  #snackbar
  [displayTime]="3000"
  [autoHide]="true"
  (animationDone)="onSnackbarDone()">
  Item saved successfully
  <button igxButton="flat" igxSnackbarAction (click)="undo()">UNDO</button>
</igx-snackbar>

Trigger in TypeScript:

snackbar = viewChild.required<IgxSnackbarComponent>('snackbar');

save() {
  this.dataService.save(this.item);
  this.snackbar().open('Item saved');  // optional: pass message text
}

Toast

Docs: Toast Component

import { IgxToastComponent } from 'igniteui-angular/toast';
<igx-toast #toast [displayTime]="2000">Operation complete</igx-toast>

<button igxButton (click)="toast.open()">Trigger Toast</button>

Toast vs Snackbar: Toast is non-interactive (no action button), always auto-hides. Snackbar supports an action button and can be persistent.

Banner

Docs: Banner Component

import { IgxBannerComponent, IgxBannerActionsDirective } from 'igniteui-angular/banner';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxButtonDirective } from 'igniteui-angular/directives';
<igx-banner #banner (closed)="onBannerClosed()">
  <igx-icon igxBannerIcon>wifi_off</igx-icon>
  You are offline. Some features may not be available.
  <div igxBannerActions>
    <button igxButton="flat" (click)="banner.dismiss()">Dismiss</button>
    <button igxButton="flat" (click)="retry()">Retry</button>
  </div>
</igx-banner>

Trigger in TypeScript:

banner = viewChild.required<IgxBannerComponent>('banner');

showOfflineWarning() { this.banner().open(); }
hideWarning() { this.banner().close(); }

Events: (opening), (opened), (closing), (closed).

Banner always renders inline (not overlaid) — it pushes page content down when open.

Key Rules

  • provideAnimations() is required — add it to app.config.ts before using Dialog, Snackbar, Toast, or Banner
  • Dialog uses the Ignite UI overlay system — set [isModal]="true" for blocking modals
  • Snackbar vs Toast: Snackbar supports action buttons and can be persistent; Toast is always auto-hiding and non-interactive
  • Banner renders inline (pushes content), not as an overlay — use Dialog for blocking prompts

See Also

  • setup.md — App providers, architecture, all entry points
  • form-controls.md — Input Group, Combo, Select, Date/Time Pickers, Calendar, Checkbox, Radio, Switch, Slider
  • layout.md — Tabs, Stepper, Accordion, Splitter, Navigation Drawer
  • data-display.md — List, Tree, Card and other display components
  • directives.md — Button, Ripple, Tooltip, Drag and Drop