================================================
FILE: playground/src/app/app.component.scss
================================================
div {
position: absolute;
height: 50%;
width: 50%;
top: 0;
left: 0;
background-color: red;
border: 2px solid black;
}
================================================
FILE: playground/src/app/app.component.ts
================================================
import { Component } from '@angular/core';
import { ResizedEvent } from 'angular-resize-event';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
width = 0;
height = 0;
onResized(event: ResizedEvent) {
console.warn('event', event);
this.width = event.newRect.width;
this.height = event.newRect.height;
}
}
================================================
FILE: playground/src/app/app.module.ts
================================================
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AngularResizeEventModule } from 'angular-resize-event';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularResizeEventModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
================================================
FILE: playground/src/index.html
================================================
Playground
================================================
FILE: playground/src/main.ts
================================================
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
================================================
FILE: playground/src/polyfills.ts
================================================
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/**
* IE11 requires the following for NgClass support on SVG elements
*/
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
================================================
FILE: playground/src/styles.scss
================================================
/* You can add global styles to this file, and also import other style files */
================================================
FILE: playground/tsconfig.app.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
================================================
FILE: playground/tsconfig.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
================================================
FILE: projects/angular-resize-event/README.md
================================================
# AngularResizeEvent
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.2.
## Code scaffolding
Run `ng generate component component-name --project angular-resize-event` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-resize-event`.
> Note: Don't forget to add `--project angular-resize-event` or else it will be added to the default project in your `angular.json` file.
## Build
Run `ng build angular-resize-event` to build the project. The build artifacts will be stored in the `dist/` directory.
## Publishing
After building your library with `ng build angular-resize-event`, go to the dist folder `cd dist/angular-resize-event` and run `npm publish`.
## Running unit tests
Run `ng test angular-resize-event` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
================================================
FILE: projects/angular-resize-event/ng-package.json
================================================
{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/angular-resize-event",
"lib": {
"entryFile": "src/public-api.ts"
}
}
================================================
FILE: projects/angular-resize-event/package.json
================================================
{
"name": "angular-resize-event",
"version": "3.2.0",
"repository": {
"type": "git",
"url": "https://github.com/vdolek/angular-resize-event"
},
"homepage": "https://github.com/vdolek/angular-resize-event#readme",
"author": {
"name": "Martin Volek",
"email": "martin@vdolek.cz"
},
"keywords": [
"angular",
"resized",
"event"
],
"license": "MIT",
"peerDependencies": {
"@angular/common": ">= 12.2.0 < 15",
"@angular/core": ">= 12.2.0 < 15"
},
"dependencies": {
"tslib": "^2.3.0"
}
}
================================================
FILE: projects/angular-resize-event/src/lib/angular-resize-event.module.ts
================================================
import { NgModule } from '@angular/core';
import { ResizedDirective } from './resized.directive';
@NgModule({
declarations: [
ResizedDirective
],
imports: [
],
exports: [
ResizedDirective
]
})
export class AngularResizeEventModule {}
================================================
FILE: projects/angular-resize-event/src/lib/resized.directive.ts
================================================
import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
import { ResizedEvent } from './resized.event';
@Directive({
selector: '[resized]'
})
export class ResizedDirective implements OnInit, OnDestroy {
private observer: ResizeObserver;
private oldRect?: DOMRectReadOnly;
@Output()
public readonly resized;
public constructor(
private readonly element: ElementRef,
private readonly zone: NgZone
)
{
this.resized = new EventEmitter();
this.observer = new ResizeObserver(entries => this.zone.run(() => this.observe(entries)));
}
public ngOnInit(): void {
this.observer.observe(this.element.nativeElement)
}
public ngOnDestroy(): void {
this.observer.disconnect();
}
private observe(entries: ResizeObserverEntry[]): void {
const domSize = entries[0];
const resizedEvent = new ResizedEvent(domSize.contentRect, this.oldRect);
this.oldRect = domSize.contentRect;
this.resized.emit(resizedEvent);
}
}
================================================
FILE: projects/angular-resize-event/src/lib/resized.event.ts
================================================
export class ResizedEvent {
public newRect: DOMRectReadOnly;
public oldRect?: DOMRectReadOnly;
public isFirst: boolean;
public constructor(newRect: DOMRectReadOnly, oldRect: DOMRectReadOnly | undefined) {
this.newRect = newRect;
this.oldRect = oldRect;
this.isFirst = oldRect == null;
}
}
================================================
FILE: projects/angular-resize-event/src/public-api.ts
================================================
/*
* Public API Surface of angular-resize-event
*/
export { ResizedEvent } from './lib/resized.event';
export * from './lib/resized.directive';
export * from './lib/angular-resize-event.module';
================================================
FILE: projects/angular-resize-event/tsconfig.lib.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/lib",
"target": "es2020",
"declaration": true,
"declarationMap": true,
"inlineSources": true,
"types": [],
"lib": [
"es2020",
"dom"
]
}
}
================================================
FILE: projects/angular-resize-event/tsconfig.lib.prod.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.lib.json",
"compilerOptions": {
"declarationMap": false
},
"angularCompilerOptions": {
"compilationMode": "partial"
}
}
================================================
FILE: tsconfig.json
================================================
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"paths": {
"angular-resize-event": [
"dist/angular-resize-event/angular-resize-event",
"dist/angular-resize-event"
]
},
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}