Скачать или смотреть How to Check for a Specific Child Element in Angular 11: Remove Parent Div of ng-content

Learn how to conditionally display the `modal-footer` in Angular 11 based on the presence of a footer element in your modal component.
---
This video is based on the question https://stackoverflow.com/q/67949967/ asked by the user 'Milad Ashrafi' ( https://stackoverflow.com/u/4907683/ ) and on the answer https://stackoverflow.com/a/67950946/ provided by the user 'AliF50' ( https://stackoverflow.com/u/7365461/ ) 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: Angular 11: how to check if specific child element is applied to remove parent div of ng-content?

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.
---
How to Check for a Specific Child Element in Angular 11: Remove Parent Div of ng-content

In the world of Angular development, especially when working with modals and dynamic content, you may encounter situations where certain elements should only be displayed if specific conditions are met. For example, in Angular 11, you might want to dynamically hide or show the modal-footer based on whether the footer content is provided. This guide will guide you through the process of checking if a specific child element is present, and subsequently controlling the visibility of its parent div.

The Problem

In this scenario, we are using Angular 11 to create a modal component (bs-modal) that accepts dynamic content via ng-content. One requirement is to check whether a footer is included within the modal. If no footer child element is present, we want to hide the entire modal-footer section. Let's dive into how we can achieve that.

The Initial Setup

Here's a simple structure of the modal in bs-modal.component.html:

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

And here's how you might use it in app.component.html:

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

The Challenge

When you remove the <div footer>...</div> from app.component.ts, you're left with an empty modal-footer in the modal. The key challenge is to determine if this footer is genuinely "applied" (i.e., has any content) and conditionally hide it using Angular's template features, such as *ngIf.

The Solution

To solve this issue, we will modify the modal component to check for child elements in the footer. Here’s how:

Step 1: Update the Modal HTML

First, we’ll need to add a reference variable to our modal-footer div and conditionally display it based on a flag.

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

Step 2: Implement Logic in the Component Class

Next, let’s implement the logic in bs-modal.component.ts to manage the visibility of the footer.

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

Step 3: How It Works

ViewChild Decorator: The @ ViewChild decorator lets us reference the modal-footer div in our component class after the view initializes.

Flag Initialization: The displayFooter boolean is initialized as true, which means the footer will be displayed by default.

AfterViewInit Lifecycle Hook: Once the view initializes, we use a timeout to check if the modalFooter has any child nodes. If it doesn't, we set displayFooter to false, which hides the footer.

Conclusion

By applying the above steps, you can effectively control the visibility of the modal-footer in your Angular 11 application. This method ensures that your modal remains clean and user-friendly by only displaying relevant content when necessary.

Don't forget to test your modal with and without footer content to ensure that the desired functionality works seamlessly. Happy coding!