New to Kendo UI for Angular? Start a free 30-day trial

Visibility

Updated on Oct 27, 2026

By default, the Kendo UI for Angular Dialog is visible whenever you render it.

To control its visibility, conditionally render the Dialog with the @if control flow block based on a component property. When the condition is falsy, the Dialog is removed from the view.

To hide the Dialog based on user interaction, handle its close event, which fires when users click the titlebar Close button or press Esc while focus is on the Dialog wrapper, the titlebar Close button, or an action button. Update the property that controls its rendering in the handler.

The following example demonstrates how to show and hide the Dialog based on its state. The Dialog renders while the state is true and closes when you click the Close button or Got It. Clicking Show Dialog renders it again.

Example
View Source
Loading ...
In this article
Suggested Links
Not finding the help you need?
Contact Support