DynamicDialog
NewThe right component, right when you need it. Open a dialog from code and bring the result back to your page.
Choose something good
Load a component with the dialog service. Select a product to return its value to this page.
Small details. Better days.
A few thoughtful essentials to make this space yours.
Your next workspace favorite is waiting.
Customization
Reuse Dialog options for positioning, responsive widths, maximization and backdrop dismissal.
Passing data and inputs
Use injectable config.data for context, or inputValues to initialize the loaded component's Angular inputs. This example passes the selected product and a quantity of two.
// ProductDetails declares product = input.required<Product>()
// and quantity = input(1).
this.dialogs.open(ProductDetails, {
header: 'Product details',
inputValues: { product: selectedProduct, quantity: 2 },
maximizable: true,
});Opening a dialog
Provide AvDialogService on the page and call open with a component and configuration. No dialog outlet is needed.
import { inject } from '@angular/core';
import { AvDialogService } from 'avero-ui';
// Add AvDialogService to this page's providers for automatic cleanup.
private readonly dialogs = inject(AvDialogService);
show() {
const ref = this.dialogs.open<ProductPicker, { message: string }, Product>(
ProductPicker, {
header: 'Choose a product',
width: '640px',
breakpoints: { '768px': '92vw' },
data: { message: 'Make yourself at home.' },
},
);
ref.onClose.subscribe(product => {
if (product) this.selected.set(product);
});
}Returning a result
Inject AvDynamicDialogRef in the loaded component. close(result) delivers the value to onClose; dismissing with Escape or the close button delivers undefined.
// Inside the dynamically loaded component:
readonly config = inject(AvDynamicDialogConfig<{ message: string }>);
readonly ref = inject(AvDynamicDialogRef<Product>);
select(product: Product) {
this.ref.close(product);
}