vdolek / angular-resize-event Goto Github PK
View Code? Open in Web Editor NEWAngular directive for detecting changes of an element size.
License: MIT License
Angular directive for detecting changes of an element size.
License: MIT License
dependency support for @angular/common@"^16.x.x"
My CI ran into a build issue with the 3.2.0 release while running Angular 13.
./node_modules/angular-resize-event/fesm2015/angular-resize-event.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: Cannot create property 'message' on string '/home/circleci/setup-test/myproject/node_modules/angular-resize-event/fesm2015/angular-resize-event.mjs: This application depends upon a library published using Angular version 14.0.2, which requires Angular version 14.0.0 or newer to work correctly.
Consider upgrading your application to use a more recent version of Angular.
31 | }
32 | ResizedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ResizedDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
> 33 | ResizedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: ResizedDirective, selector: "[resized]", outputs: { resized: "resized" }, ngImport: i0 });
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
34 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ResizedDirective, decorators: [{
35 | type: Directive,
36 | args: [{'
at run (/home/circleci/setup-test/myproject/node_modules/@babel/core/lib/transformation/index.js:39:15)
at run.next (<anonymous>)
at Function.transform (/home/circleci/setup-test/myproject/node_modules/@babel/core/lib/transform.js:25:41)
at transform.next (<anonymous>)
at step (/home/circleci/setup-test/myproject/node_modules/gensync/index.js:261:32)
at /home/circleci/setup-test/myproject/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/home/circleci/setup-test/myproject/node_modules/gensync/index.js:223:11)
at /home/circleci/setup-test/myproject/node_modules/gensync/index.js:189:28
at /home/circleci/setup-test/myproject/node_modules/@babel/core/lib/gensync-utils/async.js:84:7
at /home/circleci/setup-test/myproject/node_modules/gensync/index.js:113:33
at step (/home/circleci/setup-test/myproject/node_modules/gensync/index.js:287:14)
at /home/circleci/setup-test/myproject/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/home/circleci/setup-test/myproject/node_modules/gensync/index.js:223:11)
Don't know if that's intentional or not, since the package.json states only Angular 14, but the release page says support for Angular 12-14
.
I'll be locking the dependency/version to "angular-resize-event": "~3.1.1"
for now.
I would love to see updated dependencies for Angular v12.
https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49
Thanks in advance
Hi,
I want to resize a div and get the resized width and height. I tried using the version 2.1.0 for Angular version 11 as mentioned here https://www.npmjs.com/package/angular-resize-event in readme file. since my project we are using Angular version 11. But when I used an event <div (resized)="onResized($event)"> like this its not working as expected. In the browser, div is automatically shrinking instead it should resize only on div resize by dragging. I am using the below style for div resize:
resize:both; overflow: auto;
Could you pleas help on this as early as possible.
Thanks & Regards,
Netravati Sutar
Hi there and thanks for this directive.
I am encountering an issue where this plugin does not work on iOS12, where I get the error: Uncaught (in promise): ReferenceError: Can't find variable: ResizeObserver
According to 'Can I Use' for ResizeObserver, as per https://caniuse.com/resizeobserver, ResizeObserver will not work on any of iOS 3.2 - 13.3.
Given that iOS 13.3 is not that old - only a bit over 2 years old as of writing, having been released in Dec 2019 - it'd be good to know what the options are for supporting these devices.
Adding a polyfill to your directive could be an option, such as https://github.com/que-etc/resize-observer-polyfill, which according to the author only adds 2.44KB when minified and gzipped.
Otherwise, perhaps falling back to eg. v2.1.0 would be an option, although I'm not having luck with that approach at the moment though.
Is support Angular v18 planned? I see v17 is not supported either.
Thanks
Resize event is not triggered when using Angular 14 and grid-templates-areas.
Happy to provide an example
When serving an angular application with SSR, the directive breaks the application, due to the following error:
ReferenceError: ResizeObserver is not defined
It seems that the error occours in the constructor of the directive.
Can you add an input "auditTime" so that the resize event will happen less frequently?
I have dynamic list of objects, all of them are resizable in DOM. The even fires but it never tells which object was resized. Am I missing something?
I think their should be an object e.g., event.target.Id or something which tells about the target object that raised the event.
<mat-sidenav-content [ngStyle]="{'margin-left.px': contentMargin}">
<div class="content mat-elevation-z8" (resized)="onResized($event)">
<!-- Main content here! -->
<router-outlet></router-outlet>
</div>
<app-scroll-top></app-scroll-top>
</mat-sidenav-content>
When using this directive in my code, I get the following error:
(parameter) $event: Event Argument of type 'Event' is not assignable to parameter of type 'ResizedEvent'. Type 'Event' is missing the following properties from type 'ResizedEvent': newRect, isFirstngtsc(2345) sidenav.component.ts(15, 24): Error occurs in the template of component SideNavComponent.
This is my method:
public onResized(event: ResizedEvent): void { this.width = Math.round(event.newRect.width); this.height = Math.round(event.newRect.height); console.log(
width${this.width}, height${this.height}); }
During production build we will get this:
Warning: node_modules/angular-resize-event/__ivy_ngcc__/fesm2015/angular-resize-event.js depends on 'css-element-queries'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Hope this issue can be solved after or during update of "angular-resize-event" for Angular 12, but eliminating usage of 'css-element-queries' can be a separate topic.
Thanks in advance.
It would be great if your library could support Angular 14, too! Thank you!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@">= 12.2.0 < 14" from [email protected]
npm ERR! node_modules/angular-resize-event
npm ERR! angular-resize-event@"^3.1.1" from the root project
When installing to an angular 13 project I get conflicting per dependencies. In package.json you have:
"peerDependencies": {
"@angular/common": "^12.2.0",
"@angular/core": "^12.2.0"
},
I believe you want something like:
"peerDependencies": {
"@angular/common": ">= 12.2.0 < 14",
"@angular/core": ">= 12.2.0 < 14"
},
The Event is not triggered.
Hi, is it normal that this event is called after app initialization?
I just want to trigger this event during my resize, however, when try to reload the page, in console, this event gets triggered.
Please tell me if this is intentional.
Thank you.
dependency support for @angular/common@"^15.0.2"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.