I am testing out a simple use case, wherein i have created a directive(selector being a class name), while everything runs as expected when i try to target simple classes, the directive doesn't get initialised incase of Angular Material elements, for the test case i have used a simple MatMenu, while it is open it renders a div with the class cdk-overlay-container which is my target and source of the problem that is the directive doesn't get called.

Any help would be great,

Link to Code: StackBlitz

CodePudding user response：

Angular's directive with a class selector can only target static element in the DOM. It can't target class names that are dynamically inserted into the DOM.

In your case, cdk-overlay-container is dynamically inserted into the DOM when you click on the menu. Hence, a simple static class worked.