# Visibility

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`](https://angular.dev/guide/templates/control-flow) 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`](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dialogs/dialog/visibility/source.txt)

## Suggested Links

* [API Reference of the Dialog](https://www.telerik.com/kendo-angular-ui/components/dialogs/api/dialogcomponent)
* [Dialog Events](https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/events)