Angular 11 Directive Questions

Asked Jul 02 '21 at 14:15

Active Jul 02 '21 at 14:20

Viewed 69 times

I am trying to understand how Directives work. I am trying to use a Directive to scroll to an alert dialog when it pops up.

HTML

<div *ngIf="errorMsg" class="alertContainer" ScrollTo>
  {{ errorMsg }}
</div>

ScrollToDirective.ts

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

@Directive({
  selector: '[ScrollTo]'
})
export class ScrollToDirective implements AfterViewInit {

  constructor(private elRef:ElementRef) { }
  ngAfterViewInit() {
    this.elRef.nativeElement.scrollIntoView();
  }

}

I searched Stackoverflow and found this solution Angular2 scroll to element that has *ngIf

I tried to replicate it and had no luck. Can anyone shed some light as to why the page isn't scrolling?

edited Jul 02 '21 at 14:20

R. Richards

24,603
10
64
64

asked Jul 02 '21 at 14:15

Kaasim Shaikh

Did you add the directive to the declarations array in your module? – Mikkel Christensen Jul 02 '21 at 14:39
@MikkelChristensen I'm not sure. I read the API from https://angular.io/guide/attribute-directives I typed ng generate directive ScrollTo – Kaasim Shaikh Jul 02 '21 at 14:42
Just confirmed "ScrollTo" is declared in my app.module.ts – Kaasim Shaikh Jul 02 '21 at 14:55
Must be something else then, since I tried the code in a stackblitz exactly as you've got it in your question and it worked. – Mikkel Christensen Jul 02 '21 at 16:18
@MikkelChristensen Thanks for double checking. I'll see if I can figure it out – Kaasim Shaikh Jul 02 '21 at 16:47

Angular 11 Directive Questions

0 Answers0