Angular directive css class selector is not working when class added by ngClass directive

Question

Angular directive css class selector is not working when class added by ngClass directive.

This is my code example and I will also add playground at link

@Directive({
  selector: '.test',
  standalone: true,
})
export class TestDirective {
  constructor(public elementRef: ElementRef) {}
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, TestDirective],
  styles: `
      .prova {
        padding:30px;
        border: 5px solid black
      }
      .test {
        padding:30px;
        border: 5px solid red
      }
  `,
  template: `
  <button style="padding:5px; position:sticky; top:0" (click)="testScroll()"> test scroll</button>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div [ngClass]="{'test':true}">
    test
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  <div class="prova">
    ciao
  </div>
  Hello world!
    
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PlaygroundComponent implements OnInit {
  test = viewChildren(TestDirective, { read: ElementRef });
  ngOnInit(): void {
    console.log(this.test());
  }

  testScroll() {
    this.test()[0].nativeElement.scrollIntoView({ behavior: 'smooth' });
  }
}

I already tried to use @ViewChildren and change detection strategy onPush, but nothing works. My goal is to achieve the behavior to scroll to an element when it has a specific class added dynamically.

Alpine A110R · Accepted Answer · 2024-07-19 11:53:52Z

0

You can use attribute selector to select the target of HTML element that contain the specific attribute. Attributes selectors are contained within []

@Directive({
  selector: '.test',
  standalone: true,
})

Or you can change your template like that to call your directive:

<div class="test">test<div>

The directive is not call with your implementation.

Another approach:

You can use attribute selector :

@Directive({
  selector: '[test]',
  standalone: true,
})

Inject your directive in your template:

  <div test [ngClass]="{'test':true}">
    test
  </div>

edited Jul 19, 2024 at 11:53

answered Jul 19, 2024 at 11:31

Alpine A110R

4523 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Angular directive css class selector is not working when class added by ngClass 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