How Collapse Palette Using External Button in Angular Diagram?

In this article, you can learn about how to collapse a palette using an external button. In our Syncfusion_® Angular Diagram, symbol palettes can be expanded or collapsed by clicking the palette header. To control this behavior using an external button, update the expanded property of the palettes to true or false when the button is clicked.

app.component.html

<button id="collapseFlow" (click)="collapseFlow()">Collapse flowshape</button>
<br/><br/>
<button id="expandFlow" (click)="expandFlow()">Expand flowshape</button> 

app.component.ts

public collapseFlow() {
   this.palette.palettes[0].expanded = false;
 }
 public expandFlow() {
   this.palette.palettes[0].expanded = true;
 } 

Refer the below sample for reference

Sample: Click here

Conclusion

I hope you enjoyed learning about how to collapse the palette using an external button in Angular Diagram.

You can refer to our Angular Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our Angular Diagram example to understand how to create and manipulate data.

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

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