ajaysinghj8 / angular-inport Goto Github PK

Is your feature request related to a problem? Please describe.

I'm evaluating various similar solutions. The README is fairly light on what the module does and the purpose of the different components. A demonstration page would be extremely helpful.

Describe the solution you'd like

Stackblitz or codesandbox would be ideal so I can see it working and quickly toggle to the source.

Describe alternatives you've considered

I was thinking of reading the source code in order to understand this component better. Haven't done that quite yet.

Additional context

None.

It's not wokring.

What is the unit used for viewport offset? My problem is, that the inview would work great on desktop - but the smaller it gets, the more conflicts existing with the viewport offset ... is it possible to use a relative unit like rem or even percentage?

• Resizing doesn't effect when in-view-item is inside the "in-view-container"
• Not properly working when the "in-view-container" itself clipped or hidden.

I keep getting this error, I have all the basic code. Nothing new.

"Uncaught (in promise): TypeError: rxjs_1.fromEvent is not a function\nScrollObservable.prototype._getGlobalObservable@webpack-internal:///../../../../angular-inport/dist/utils/scroll-observable.js:19:29\nScrollObservable@webpack-internal:///../../../../angular-inport/dist/utils/scroll-observable.js:11:50\n_createClass@webpack-internal:///../../../core/esm5/core.js:11107:20\n_createProviderInstance$1@webpack-internal:///../../../core/esm5/core.js:11081:26\nresolveNgModuleDep@webpack-internal:///../../../core/esm5/core.js:11066:17\nNgModuleRef_.prototype.get@webpack-internal:///../../../core/esm5/core.js:12303:16\nresolveDep@webpack-internal:///../../../core/esm5/core.js:12793:12\ncreateClass@webpack-internal:///../../../core/esm5/core.js:12663:32\ncreateDirectiveInstance@webpack-internal:///../../../core/esm5/core.js:12500:37\ncreateViewNodes@webpack-internal:///../../../core/esm5/core.js:13958:53\ncallViewAction@webpack-internal:///../../../core/esm5/core.js:14392:13\nexecComponentViewsAction@webp…

Hi, is there a way that I can pass the ElementRef back to my component's class through the @output() "inview"?

What I'm trying to do is to call a function and reference to the component that has the directive.
(inview)="isElementInViewport($event)"

This breaks with the Ivy Compiler:

ERROR in node_modules/angular-inport/dist/inview.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

    This likely means that the library (angular-inport) which declares NgInviewModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

    1 export declare class NgInviewModule {
                           ~~~~~~~~~~~~~~

Is there going to be a release for the newer Angular versions? Or is there another library that is compatible?

[Angular 7]
I've done everyting like it should be - but it doesn't work at all. No errrors etc.
Anyone got same problem?

.edit
InviewContainer and InviewItem Directive - seems like, it doesn't work with nested div.
Is it possible to add [scrollELement] to those directives?

It would be great for the library to support Angular 9 and the Ivy compiler. I will make a PR for this

Without errors. I install this by npm. Include in my modules as in example and after inject this code

<div class="tbody" in-view-container (inview)="test($event)">
<my-component in-view-item *ngFor="let item of [1,2,3 ... 10]></my-component>
</div>

But test() function never invoked. On .tbody have overflow auto max height 500px; This not working.

using this module is only possible if you disable angular ivy in tsconfig.app.json:

"angularCompilerOptions":
{ "enableIvy": false }

if you do this, you will get a warning:

`WARNING in D:\projekte\www\tierwebseite\src\app\onlineantrag\onlineantrag.module.ngfactory.js depends on 'angular-inport'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in D:\projekte\www\tierwebseite\src\app\onlineantrag\onlineantrag.module.ngfactory.js depends on 'angular-inport/dist/utils/scroll-observable'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

WARNING in D:\projekte\www\tierwebseite\src\app\onlineantrag\onlineantrag.module.ngfactory.js depends on 'angular-inport/dist/utils/viewport-ruler'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies`

Please update to Angular 10

RawElement.getBoundingClientRect() taking 17.5 ms which is huge from application point of view, needs to minimise it.

would be good to update to RXjS 6, #25

Hello!

Thank you for this great library!

However, are you only using scrolling event to determine the point in time when "in view" state should be updated? It looks like this.

However, this is not true in some circumstances. On dynamic page, the element could get out of the user's view not only when user is scrolling away, but also, when another element on the page pushes the watched element out of the view.

I'm implementing an infinite scrolling feature in our web application, but I'm getting an incorrect behavior, because I'm relying on "in view" state change events to determine if more items should be loaded. The reason for this is that more items are loaded dynamically and added to the table, this in effect pushes the table footer out of the view, but the "in view" state is not updated accordingly, so the app continues to load more items, until user scrolls the page at least a bit.

What could you recommend to fix this behavior?

Is there a way to force the directive to update it's state programmatically?

Thanks!

Scroll Element option need to support followings

• DOM query selector
• Element (Angular Template element)
• View (ViewChild reference)

Hi,
Im using angular 2 and angular-cli.
Im getting this error on ng build -prod

`ERROR in Unexpected value 'NgInviewModule in D:/xampp/htdocs/angular2/node_modules/angular-inport/dist/inview.module.d.ts' imported by the module 'AppModule in D:/xampp/htdocs/angular2/src/app/app.component.ts'

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.component.ngfactory' in 'D:\xampp\htdocs\angular2\src'
 @ ./src/main.ts 4:0-77
 @ multi ./src/main.ts`

how to resolve this issue?

Did you get the chance to check?

#5 (comment)

Due to rxjs/Rx blacklistes in current Angular5 production builds, this module fails.

I have made it to run by exchanging the import require("rxjs/Rx") with these lines:

var Rx_1 = require('rxjs/Observable');
require('rxjs/add/observable/timer');
require('rxjs/add/observable/of');
require('rxjs/add/operator/debounce');
require('rxjs/add/operator/filter');
require('rxjs/add/operator/mergeMap');

Would be great to have this changed in the official version for next release ...