css selector in angular directive

Question

Looking at the documentation for angular directives they list valid selectors. https://angular.io/api/core/Directive

element-name: Select by element name
.class: Select by class name.
[attribute]: Select by attribute name.
[attribute=value]: Select by attribute name and value.
:not(sub_selector): Select only if the element does not match the sub_selector.
selector1, selector2: Select if either selector1 or selector2 matches.

But the only selectors that seems to work in a directive for me is 3 and 6.

Here is a stackblitz where I try to select .test css class in a directive and it doesn't work. https://stackblitz.com/edit/angular-css-class-selector-in-directive

What am I missing?

Bahador Raghibizadeh · Accepted Answer · 2019-11-28 15:48:18Z

2

Please have a look at the working example. https://stackblitz.com/edit/angular-css-class-selector-in-directive-xqwriz

you need to register your directive into declaration in app.module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent, ComponentWithCssSelector, CssClassDirective } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, ComponentWithCssSelector, CssClassDirective],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

edited Nov 28, 2019 at 15:48

Bahador Raghibizadeh

1,29214 silver badges27 bronze badges

answered Nov 28, 2019 at 12:38

Ashot Aleqsanyan

4,4732 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css selector in angular directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related