Angular Directive Selector

This article will go through how to use the different types of Angular directive selector. in Angular 11, every Directive has a selector, exactly as each component does. selectors are not restricted to directives they may also be used as selectors for Angular components.

Table of Contents

1 Angular directive selector
2 Further Reading

The Angular directive selector can be applied to HTML elements in your templates using its selector name. As per the angular documentation, selectors can be declared using any of the following syntaxes.

Before we get started, let’s go over the anatomy of an HTML element. Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between. Elements can also contain attributes that define their additional properties. For example.

Element name directive selector

Element name directive selector is the basic version of the selector where the selector name represents the directive as the directive element.

@Directive({
  selector: 'textEditor'
})
export class TextEditorDirective {
  constructor() { }
}

<textEditor></textEditor>

This is how the directive is represented as an element name selector property, so when the directive is rendered, the child content will be surrounded by the selector as an element name.

Attribute directive selector

Attribute directive selector are contained within square brackets [ ]. Let’s take a look at a basic example in which we use selector as the attribute.

import { Directive, ElementRef } from '@angular/core'

@Directive({
  selector: '[role]',
})
export class RoleDirective {
  constructor(elementRef: ElementRef) {
    const hasAdminRole = false; // check user role
    if (!hasAdminRole)
      elementRef.nativeElement.disabled = true;
  }
}

<button role>Delete</button>

Along with the attribute selector, the Button tag now acts as an element. This means that the directive selector we configured as an attribute rather than an element. We’ve just added an extra bracket to the selector value [], so we must now use the selector as an attribute rather than an element.

Class directive selector

The Class directive selector is prefixed by a ., as is the CSS syntax. The selector name is the class and the element will be converted to the class.

<div class = "whiteBackgroundColor">Demo text</div>

In this HTML file, we are using the class property to specify the class name, however as you can see, we have used the selector name as a class value. We’ve added a single dot operator (.<selector-name>) before the selector name so that we can use a selector like this as a class name.

import { Directive, ElementRef } from '@angular/core'

@Directive({
  selector: '.whiteBackgroundColor',
})
export class WhiteBackgroundColorDirective {
  constructor(elementRef: ElementRef) {
    elementRef.nativeElement.style.backgroundColor = '#fff'
  }
}

Exclusion directive selector

Exclusion Selectors use the keyword :not([<selector-name>]) with the specific selector inserted between the round brackets. This selector is used to set the style to every element that is not the specified by given selector.

@Directive({
  selector: 'textEditor:not([guest])'
})
export class RoleDirective {
  constructor() { }
}

<textEditor>hello</textEditor>
<textEditor guest>hello</textEditor>

The example above will select all HTML elements with an element name of textEditor but exclude those with an attribute guest.