search

MurhafSousli / ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism
https://ngx-scrollbar.netlify.app/
MIT License
618 stars 99 forks source link

Input binding does not work for many properties #503

Closed Butterblume654 closed 1 year ago

Butterblume654 commented 1 year ago

What are you trying to do?

I'm switching from perfect scrollbar to ngx scrollbar. Before I already had a facade for perfect scrollbar, so that I now only have one place to change. But it seems that the properties of ng-scroller are only accessible when used as attributes.

But I want to use variables to set e.g. autoHeightDisabled instead of hardcode its value to either true or fase. Same for appearance and some other properties. I always get "Can't bind to 'appearance' since it isn't a known property of 'ng-scrollbar'".

What troubleshooting steps have you tried?

I tried to use: <ng-scrollbar [appearance]="appearance"> <ng-scrollbar [attr.appearance]="appearance" >

I also tried many different versions of ngx-scrollbar.

Reproduction

Steps to reproduce:

  1. Just try to use property or attribute binding to bind the value dynamically.

Environment

EDIT

It works when I disable strictTemplates in my tsconfig. But I think it should also work with strictTemplates.

MurhafSousli commented 1 year ago

It works fine with strictTemplates on, but you have to use ScrollbarAppearance as the variable type!

https://github.com/MurhafSousli/ngx-scrollbar/blob/c265c3c9f9889d0c9231f121db1faf12ac114419/projects/ngx-scrollbar/src/lib/ng-scrollbar.model.ts#L3-L7

This will get the same behavior with Material like in mat-card <mat-card [appearance]="appearance"></mat-card>

Butterblume654 commented 1 year ago

Hey, thanks. But this is not working. Also the other input properties like reachedOffset, autoHeightDisabled or autoWidthDisabled do not work.

They are accepting a primitive number or boolean/string type. And they do not work either. I mean, I can't even bind to [disabled] for some reason.

Edit

I also tried it with a fresh angular 15 project and I got the same error. But it works in an angular 16 project. But upgrading is not an option for me right now.

MurhafSousli commented 1 year ago

Those were fixed in v12.0.1 which was the last update before the upgrade to Angular 16, check the changelog

But it seems there is a problem between Angular 15 and strictTemplates, because in Angular 16 it was fixed by itself, I did not change the code or anything! so I really don't what we can do about it!

Butterblume654 commented 1 year ago

That's strange. But okay, thanks for your help anyway. I appreciate it.

Until I'm able to update to angular 16 I access NgScrollbar with ViewChild and set then my props.