Скачать или смотреть Solving the angular Overlay Compilation Error when Using *ngIf

Discover how to resolve compilation errors in Angular when using the `cdk overlay` with `*ngIf` directives effectively.
---
This video is based on the question https://stackoverflow.com/q/73953198/ asked by the user 'Thomas Perrin' ( https://stackoverflow.com/u/5367939/ ) and on the answer https://stackoverflow.com/a/73954050/ provided by the user 'Thomas Perrin' ( https://stackoverflow.com/u/5367939/ ) 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: error on cdk overlay when used with *ngIf

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 Fix the Angular Overlay Compilation Error When Using *ngIf

Angular is a powerful framework that allows developers to create dynamic web applications. However, integrating some features, like CDK overlaid elements, can lead to unexpected complications—especially when combined with structural directives like *ngIf. If you're facing a compilation error related to cdk overlay when trying to make a button conditionally visible, you're not alone! Let's break down the problem and find a clear way to resolve it.

The Problem

You started with a functional implementation of a contextual menu using Angular Material's cdk overlay. Here’s a simplified version of the initial implementation that worked fine without *ngIf:

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

What Changed

When you attempted to conditionally display the button using the *ngIf directive, an error cropped up during compilation:

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

This error indicates that the trigger variable is not defined when the button is wrapped with the *ngIf. Essentially, Angular can't access trigger because the button itself is not part of the DOM when the condition is false.

The Solution

The solution to this issue involves reorganizing the placement of your *ngIf. Instead of wrapping the button with ng-container, you should wrap both the button and the overlay template within the same ng-container. Here's a corrected version:

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

Breakdown of the Solution

Wrap Both Elements: The key is to encapsulate both the button and the overlay ng-template within the same ng-container that includes the *ngIf. This way, when the condition is true, both elements are rendered, maintaining access to the trigger variable.

Using cdkOverlayOrigin: With this structure, when you click the button, the overlay can correctly reference the trigger since it's finally in the DOM, avoiding the compilation error.

Testing the Implementation: After implementing this solution, test your application to ensure that the button appears and the menu functions correctly based on the accessMenu condition.

Conclusion

In conclusion, dealing with conditional rendering in Angular using *ngIf can impact the binding of certain properties if not structured properly. By ensuring that both the button and its associated overlay are wrapped within the same parent container, you can avoid common pitfalls and maintain proper function in your application's UI components. With this structure, your contextual menu should now work seamlessly, enabling a dynamic user experience.

If you encounter other issues or have further questions about Angular, feel free to ask!