Type Selector

Selects are based on the HTML tag name. Example app-root. This type of selector you would be already familiar with as it is the default for all components in Angular.


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    AttributeSelectorComponent,
    MultipleAttributeSelectorComponent,
    AttributeSelectorWithValueComponent,
    CssClassSelectorComponent
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {

}

Attribute Selector

component view code

<p>attribute-selector works!</p>

Attribute selector with value

component view code

<p>attribute-selector-with-value works!</p>

The selector with multiple attributes

component view code

<p>multiple-attribute-selector works!</p>

Key Points

Note. For attribute values, Angular supports matching an exact attribute value with the equals (=) operator. Angular does not support other attribute value operators.

CSS Class Selector

Class selector

A CSS class selector is used to target elements that have a specific class attribute. The class attribute is defined within the opening tag of an HTML element and is preceded by a dot (.).

import { Component } from '@angular/core';

@Component({
  selector: '.app-css-class-selector',
  standalone: true,
  imports: [],
  templateUrl: './css-class-selector.component.html',
  styles: ``
})
export class CssClassSelectorComponent {

}

component view code

<p>css-class-selector works!</p>

:not pseudo-class

The: not pseudo-class in CSS allows you to target elements that do not match a specific selector. You can leverage this in Angular component selectors to create more targeted components.

Explanation

component view code

<p>css-not-pseudo-selector works!</p>

Targeting elements that are not direct children of a specific element.

@Component({
  selector: 'div:not(.parent) > p'
})
export class MyComponent {
}

Targeting elements that do not have a specific attribute.

@Component({
  selector: 'button:not([disabled])'
})
export class MyButtonComponent {
}

Key Points

By understanding and utilizing the : not pseudo-class, you can create more flexible and targeted components in your Angular applications.

Combining selectors

You can combine selectors in Angular using CSS-like syntax to create more specific targeting rules. Here are some examples.

You can combine with Element, class, id, pseudo-class, attributes, comma-separated selectors, and so on.

Combining by Element, Class, and ID

TypeScript
@Component({
  selector: 'div.container#my-container'
})
export class MyComponent {
}

This component will only match elements that are.

Combining with Pseudo-Classes

TypeScript
@Component({
  selector: 'button:not(.disabled):hover'
})
export class MyButtonComponent {
}

This component will match buttons that.

Combining with Attributes

TypeScript
@Component({
  selector: '[data-type="product"][is-active]'
})
export class ActiveProductComponent {
}

This component will match elements that.

Combining Multiple Selectors

You can combine multiple selectors using commas.

TypeScript
@Component({
  selector: '.container, .card'
})
export class MyComponent {
}

This component will match elements that have either the class container or the class card.

Remember

By effectively combining selectors, you can create targeted components that accurately match the elements you intend to interact with in your Angular application.

Below is the output of the Selectors explained above.

Page Output

Output