Render a dialog using ng-template in Angular Dialog component

26 Feb 20261 minute to read

Provide HTML elements as the dialog header, footer, and content using ng-template directives. For more details, refer to the Angular Documentation.

In this example, the dialog header, footer, and content are rendered using ng-template directives.

Destroy the dialog component when navigating pages using Angular routing

By default, the dialog component appends to the body element when no target is specified. When navigating between pages using Angular routing, the elements inside routing pages are destroyed, but the dialog elements may not be destroyed properly, causing a memory leak in the DOM.

Avoid this problem using one of the following solutions:

Solution 1

Set the target property to the dialog component to resolve the destroy issue in the DOM. When you specify a target, the dialog appends inside the target element placed on the routing page, and both the dialog component and its elements are destroyed when switching between routing pages.

Refer to this sample.

Solution 2

If you prefer not to set the target property, destroy the dialog elements using the ngOnDestroy lifecycle hook in your application. The ngOnDestroy hook is called before Angular destroys the component or directive.