在使用 getElementById 的元素上使用 ngClass，元素为 null

Question

I've got an html element with overflow: auto , but I want to give it a border only when it's scrollable.

How do I evaluate the element's size from within ngClass without getting any kind of null errors?

Note: The element's enclosing div doesn't get rendered until after getting a response from an observable.

Attempt 1:

The html element is set up like this:

<div ngIf="!loading">
    <div id="{{someID}}" [ngClass]="{'border-class': isScrollable}"> ... </div>
</div>

In my ngOnInit, I call a function to see if the given element can be scrolled.

ngOnInit() {

     // this.loading gets set to false after an observable is returned

    /* ... */

    // scroll check
    let e = document.getElementById(`${this.someID}`);

    if (element !== null) {
        this.isScrollable = e.scrollHeight > e.clientHeight;
    }
}

If I don't check for null, I get errors. If I do check for null, then even if I have scrollable content, when the page is loaded, the border doesn't show up.

I thought the issue might be with this.loading, so I added the scroll check within the observable response, but after loading was set to false. Still no border.

Attempt 2:

<div #textDiv [ngClass]="{'border-class': isScrollable}"> ... </div>

@ViewChild('textDiv') element: ElementRef;

/* ... */

ngAfterViewInit() {
    this.isScrollable = this.element.scrollHeight > this.element.clientHeight;
}

But the border still doesn't show up on scrollable content when the page is loaded.

Attempt 3:

The only thing that has worked, is this hot mess:

setTimeout( () => {
    this.isScrollable = this.element.scrollHeight > this.element.clientHeight;
});

Is there a way I can get this to work without calling setTimeout?

Answer 1

The problem is here:

<div ngIf="!loading">
    <div id="{{someID}}" [ngClass]="{'border-class': isScrollable}"> ... 
</div>

The isScrollable is not updating the value after it changes.

You can fix this, using a get and returning the value when ngAfterViewInit was already executed:

export class CustomComponent implements AfterViewInit {
    private afterViewInitExecuted = false;
    @ViewChild('textDiv') element: ElementRef;

    public get isScrollable() {
      if(this.afterViewInitExecuted) {
         return this.element.scrollHeight > this.element.clientHeight;
      }
      return false;
    }
    ngAfterViewInit() {
       this.afterViewInitExecuted = true;
    }
}

Then in your html:

<div ngIf="!loading">
    <div id="{{someID}}" [ngClass]="{'border-class': isScrollable() }"> ... 
</div>

With that, it should work.