How to show and hide overview panel dynamically in Angular Diagram?

An overview control is a feature in Diagramming software that provides a scaled-down view of the entire content, allowing you to preview the entire Angular Diagram at a glance.

Show/hide the overview dynamically.

In Angular, you can create a functionality to show or hide an overview panel by clicking a button. To implement this, you can follow these steps:

• Add a button element to your HTML code. This button will be used to toggle the visibility of the overview panel.
• Create an overview panel element in your HTML code. This could be a <div> element that contains the content you want to show or hide.
• In your component's TypeScript file, create a function that will be triggered when the button is clicked. In this function, you can manipulate the display style of the overview panel element by setting its "display" property to "block" or "none" to show or hide the panel, respectively.

Please refer to the following code example to show or hide the overview panel.

<input type="button" value="Showandhide" (click)="show()" id="show" />
 
<div id="overviewDiagram" style=" width:50%; height: 200px padding:0px;right:5px;bottom:5px;background:#f7f7f7;position:absolute">
      <ejs-overview id="overview" width="100%" sourceID="diagram"></ejs-overview>
 </div>
 

public show() {
    showhide = document.getElementById('overviewDiagram').style.display;
    if (showhide === 'block' || showhide === '') {
      document.getElementById('overviewDiagram').style.display = 'none';
    } else {
      document.getElementById('overviewDiagram').style.display = 'block';
    }
}

Sample:

https://stackblitz.com/edit/angular-ruv7j2-whdkgs?file=app.component.html,app.component.ts

Conclusion:

Hope you enjoyed learning about how to show and hide overview panel dynamically.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations. You can explore our Angular Diagram documentation to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our Angular Diagram and other Angular components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!