Скачать или смотреть How to Show/Hide Div Based on Toggle Button Changes in Angular 9

Learn how to use a toggle button in Angular 9 to control the visibility of div elements across separate components easily and effectively.
---
This video is based on the question https://stackoverflow.com/q/63240194/ asked by the user 'Iqbal_kk' ( https://stackoverflow.com/u/13853651/ ) and on the answer https://stackoverflow.com/a/63242063/ provided by the user 'Jens Alenius' ( https://stackoverflow.com/u/3302004/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Show/Hide div according toggle button change in Angular 9

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Managing Component Visibility with a Toggle Button in Angular 9

In Angular applications, it is common to have multiple components that interact with each other. A frequent requirement is to show or hide certain elements based on user actions, like clicking a toggle button. In this guide, we'll explore how to seamlessly control the visibility of div elements within a Dashboard component based on a toggle button in a separate Top Navigation Bar component.

The Challenge

Imagine you have two components in your Angular application:

Top Navigation Bar Component: This component contains the toggle button.

Dashboard Component: This component houses two div elements that must be displayed or hidden based on the state of the toggle button.

The goal is to switch between showing div 1 or div 2 based on whether the toggle button is checked or unchecked. Let's break down how to implement this functionality effectively.

The Solution

To achieve this behavior, we will utilize a shared service and Angular's reactive programming features. Here’s a step-by-step guide:

Step 1: Create a Shared Service

First, we need to create a service that will allow communication between the Top Navigation Bar and the Dashboard components. This service will hold the state of the toggle button and enable both components to access and modify it.

Service Creation:

Create a new service, for example, toggle.service.ts:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Inject the Service into Components

Next, we will inject the ToggleService into both the Top Navigation Bar component and the Dashboard component.

Top Navigation Bar Component:

[[See Video to Reveal this Text or Code Snippet]]

Dashboard Component:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Add Toggle Button Design

It's important to ensure the toggle button is implemented correctly in the Top Navigation Bar. Rather than using an anchor link, we use a button to perform the toggle action, which is accessible and semantically correct.

Step 4: Adding Query Parameters (Optional)

If you want to enhance user experience further, consider adding a query parameter (e.g., ?toggle=true) to the URL that reflects the state of the toggle. This allows users to bookmark or share URLs with the current toggle state.

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you can effectively control the visibility of div elements in your Angular application based on a toggle button. This approach not only simplifies component interaction but also enhances user experience through dynamic visibility management. For a working sample, you can view or modify the code in a StackBlitz project to see the solution in action.

Now you are equipped with a practical solution to manage component visibility using Angular 9. Happy coding!