DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

4 1

Angular Directive Selector

Image description

All Angular Directives have a selector, which specifies which HTML elements will the directive work with.

Most often, the selector is an attribute selector, which means that the directive will essentially be a custom HTML attribute.

However, Angular directives can be much more than just custom attributes:
⭐ Non-custom attribute selectors
⭐ Attribute selectors with values
⭐ Class selectors
⭐ Combining selectors
⭐ etc

But it can not ⛔ target child-parent relations. Angular Directive selector is impossible to target elements that are children of some specific parents only.

Angular just picked the last element from the confusing (from its perspective) selector and applied the directive to it.

So, no complex parent-child (or sibling, ancestor, descendant, etc.) relations for directive selectors. Remember, Angular directive selectors are not exactly CSS selectors.


I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay