├── projects
    ├── ng-observers-docs
    │   ├── src
    │   │   ├── assets
    │   │   │   └── .gitkeep
    │   │   ├── environments
    │   │   │   ├── environment.prod.ts
    │   │   │   └── environment.ts
    │   │   ├── app
    │   │   │   ├── snippets
    │   │   │   │   ├── resize-observer.ts
    │   │   │   │   ├── mutation-observer.ts
    │   │   │   │   └── intersection-observer.ts
    │   │   │   ├── snippets.ts
    │   │   │   ├── app-routing.module.ts
    │   │   │   ├── app.component.ts
    │   │   │   ├── app.module.ts
    │   │   │   ├── app.component.spec.ts
    │   │   │   ├── app.component.scss
    │   │   │   └── app.component.html
    │   │   ├── favicon.ico
    │   │   ├── styles.scss
    │   │   ├── main.ts
    │   │   ├── index.html
    │   │   ├── test.ts
    │   │   └── polyfills.ts
    │   ├── e2e
    │   │   ├── tsconfig.json
    │   │   ├── src
    │   │   │   ├── app.po.ts
    │   │   │   └── app.e2e-spec.ts
    │   │   └── protractor.conf.js
    │   ├── tslint.json
    │   ├── tsconfig.app.json
    │   ├── tsconfig.spec.json
    │   ├── browserslist
    │   └── karma.conf.js
    └── ng-observers
    │   ├── ng-package.json
    │   ├── src
    │       ├── public-api.ts
    │       ├── lib
    │       │   ├── ng-observers.module.ts
    │       │   ├── resize-observer.directive.ts
    │       │   ├── intersection-observer.directive.ts
    │       │   └── mutation-observer.directive.ts
    │       └── test.ts
    │   ├── package.json
    │   ├── tslint.json
    │   ├── tsconfig.spec.json
    │   ├── package-lock.json
    │   ├── tsconfig.lib.json
    │   ├── README.md
    │   └── karma.conf.js
├── .editorconfig
├── tsconfig.json
├── .gitignore
├── package.json
├── tslint.json
├── README.md
└── angular.json


/projects/ng-observers-docs/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/snippets/resize-observer.ts:
--------------------------------------------------------------------------------
1 | export default `<div resizeObserver (onResize)="callback($event)"></div>`;
2 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evyros/ng-observers/HEAD/projects/ng-observers-docs/src/favicon.ico


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/snippets/mutation-observer.ts:
--------------------------------------------------------------------------------
1 | export default `<div mutationObserver (onMutate)="callback($event)"></div>`;
2 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/snippets/intersection-observer.ts:
--------------------------------------------------------------------------------
1 | export default `<div intersectionObserver (onIntersection)="callback($event)"></div>`;
2 | 


--------------------------------------------------------------------------------
/projects/ng-observers/ng-package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3 |   "dest": "../../dist/ng-observers",
4 |   "lib": {
5 |     "entryFile": "src/public-api.ts"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 
3 | @import '~highlight.js/styles/github.css';
4 | 
5 | html, body { height: 100%; }
6 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
7 | 


--------------------------------------------------------------------------------
/projects/ng-observers/src/public-api.ts:
--------------------------------------------------------------------------------
1 | /*
2 |  * Public API Surface of ng-observers
3 |  */
4 | 
5 | export * from './lib/ng-observers.module';
6 | export * from './lib/resize-observer.directive';
7 | export * from './lib/mutation-observer.directive';
8 | export * from './lib/intersection-observer.directive';
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/e2e/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../../out-tsc/e2e",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/projects/ng-observers/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-observers",
 3 |   "version": "0.0.4",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "https://github.com/evyros/ng-observers.git"
 7 |   },
 8 |   "peerDependencies": {
 9 |     "@angular/common": "^8.2.14",
10 |     "@angular/core": "^8.2.14"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/snippets.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   resizeObserver: '<div resizeObserver (onResize)="callback($event)"></div>',
3 |   mutationObserver: '<div mutationObserver (onMutate)="callback($event)"></div>',
4 |   intersectionObserver: '<div intersectionObserver (onIntersection)="callback($event)"></div>'
5 | };
6 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { Routes, RouterModule } from '@angular/router';
 3 | 
 4 | 
 5 | const routes: Routes = [];
 6 | 
 7 | @NgModule({
 8 |   imports: [RouterModule.forRoot(routes)],
 9 |   exports: [RouterModule]
10 | })
11 | export class AppRoutingModule { }
12 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get(browser.baseUrl) as Promise<any>;
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('app-root .content span')).getText() as Promise<string>;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/projects/ng-observers/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tslint.json",
 3 |   "rules": {
 4 |     "directive-selector": [
 5 |       true,
 6 |       "attribute",
 7 |       "",
 8 |       "camelCase"
 9 |     ],
10 |     "component-selector": [
11 |       true,
12 |       "element",
13 |       "lib",
14 |       "kebab-case"
15 |     ]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tslint.json",
 3 |   "rules": {
 4 |     "directive-selector": [
 5 |       true,
 6 |       "attribute",
 7 |       "app",
 8 |       "camelCase"
 9 |     ],
10 |     "component-selector": [
11 |       true,
12 |       "element",
13 |       "app",
14 |       "kebab-case"
15 |     ]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/projects/ng-observers/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts"
12 |   ],
13 |   "include": [
14 |     "**/*.spec.ts",
15 |     "**/*.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "files": [
 8 |     "src/main.ts",
 9 |     "src/polyfills.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.ts"
13 |   ],
14 |   "exclude": [
15 |     "src/test.ts",
16 |     "src/**/*.spec.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "src/test.ts",
12 |     "src/polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "src/**/*.spec.ts",
16 |     "src/**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/projects/ng-observers/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-observers",
 3 |   "version": "0.0.1",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "resize-observer": {
 8 |       "version": "1.0.0",
 9 |       "resolved": "https://registry.npmjs.org/resize-observer/-/resize-observer-1.0.0.tgz",
10 |       "integrity": "sha512-D7UFShDm2TgrEDEyeg+/tTEbvOgPWlvPAfJtxiKp+qutu6HowmcGJKjECgGru0PPDIj3SAucn3ZPpOx54fF7DQ=="
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>NgObserversDocs</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 |   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.


--------------------------------------------------------------------------------
/projects/ng-observers/src/lib/ng-observers.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { ResizeObserverDirective } from './resize-observer.directive';
 3 | import { MutationObserverDirective } from './mutation-observer.directive';
 4 | import { IntersectionObserverDirective } from './intersection-observer.directive';
 5 | 
 6 | const directives = [
 7 |   ResizeObserverDirective,
 8 |   MutationObserverDirective,
 9 |   IntersectionObserverDirective
10 | ];
11 | 
12 | @NgModule({
13 |   declarations: directives,
14 |   exports: directives
15 | })
16 | export class NgObserversModule { }
17 | 


--------------------------------------------------------------------------------
/projects/ng-observers/tsconfig.lib.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../../out-tsc/lib",
 5 |     "target": "es2015",
 6 |     "declaration": true,
 7 |     "inlineSources": true,
 8 |     "types": [
 9 |       "@types/resize-observer-browser"
10 |     ],
11 |     "lib": [
12 |       "dom",
13 |       "es2018"
14 |     ]
15 |   },
16 |   "angularCompilerOptions": {
17 |     "annotateForClosureCompiler": true,
18 |     "skipTemplateCodegen": true,
19 |     "strictMetadataEmit": true,
20 |     "fullTemplateTypeCheck": true,
21 |     "strictInjectionParameters": true,
22 |     "enableResourceInlining": true
23 |   },
24 |   "exclude": [
25 |     "src/test.ts",
26 |     "**/*.spec.ts"
27 |   ]
28 | }
29 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // This file can be replaced during build by using the `fileReplacements` array.
 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
 3 | // The list of file replacements can be found in `angular.json`.
 4 | 
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * For easier debugging in development mode, you can import the following file
11 |  * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 |  *
13 |  * This import should be commented out in production mode because it will have a negative impact
14 |  * on performance if an error is thrown.
15 |  */
16 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
17 | 


--------------------------------------------------------------------------------
/projects/ng-observers/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone';
 4 | import 'zone.js/dist/zone-testing';
 5 | import { getTestBed } from '@angular/core/testing';
 6 | import {
 7 |   BrowserDynamicTestingModule,
 8 |   platformBrowserDynamicTesting
 9 | } from '@angular/platform-browser-dynamic/testing';
10 | 
11 | declare const require: any;
12 | 
13 | // First, initialize the Angular testing environment.
14 | getTestBed().initTestEnvironment(
15 |   BrowserDynamicTestingModule,
16 |   platformBrowserDynamicTesting()
17 | );
18 | // Then we find all the tests.
19 | const context = require.context('./', true, /\.spec\.ts$/);
20 | // And load the modules.
21 | context.keys().map(context);
22 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', () => {
12 |     page.navigateTo();
13 |     expect(page.getTitleText()).toEqual('ng-observers-docs app is running!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "downlevelIteration": true,
 9 |     "experimentalDecorators": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "node",
12 |     "importHelpers": true,
13 |     "target": "es2015",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ],
21 |     "paths": {
22 |       "ng-observers": [
23 |         "dist/ng-observers"
24 |       ],
25 |       "ng-observers/*": [
26 |         "dist/ng-observers/*"
27 |       ]
28 |     }
29 |   },
30 |   "angularCompilerOptions": {
31 |     "fullTemplateTypeCheck": true,
32 |     "strictInjectionParameters": true
33 |   }
34 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | # Only exists if Bazel was run
 8 | /bazel-out
 9 | 
10 | # dependencies
11 | /node_modules
12 | 
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 | 
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 | 
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 | 
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 | 
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { ChangeDetectorRef, Component } from '@angular/core';
 2 | import snippets from './snippets';
 3 | 
 4 | @Component({
 5 |   selector: 'app-root',
 6 |   templateUrl: './app.component.html',
 7 |   styleUrls: ['./app.component.scss']
 8 | })
 9 | export class AppComponent {
10 |   resizeElement = {
11 |     width: 0,
12 |     height: 0
13 |   };
14 |   shown = false;
15 |   snippets = snippets;
16 | 
17 |   constructor(private ref: ChangeDetectorRef) { }
18 | 
19 |   onResize(e) {
20 |     console.log(e);
21 |     this.resizeElement = {
22 |       width: e.contentRect.width,
23 |       height: e.contentRect.height
24 |     };
25 |     this.ref.detectChanges();
26 |   }
27 | 
28 |   onMutate(e) {
29 |     console.log('on mutate', e);
30 |   }
31 | 
32 |   onIntersection(e) {
33 |     console.log('on intersect', e);
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | // Protractor configuration file, see link for more information
 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 4 | 
 5 | const { SpecReporter } = require('jasmine-spec-reporter');
 6 | 
 7 | /**
 8 |  * @type { import("protractor").Config }
 9 |  */
10 | exports.config = {
11 |   allScriptsTimeout: 11000,
12 |   specs: [
13 |     './src/**/*.e2e-spec.ts'
14 |   ],
15 |   capabilities: {
16 |     browserName: 'chrome'
17 |   },
18 |   directConnect: true,
19 |   baseUrl: 'http://localhost:4200/',
20 |   framework: 'jasmine',
21 |   jasmineNodeOpts: {
22 |     showColors: true,
23 |     defaultTimeoutInterval: 30000,
24 |     print: function() {}
25 |   },
26 |   onPrepare() {
27 |     require('ts-node').register({
28 |       project: require('path').join(__dirname, './tsconfig.json')
29 |     });
30 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
31 |   }
32 | };


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | 
 4 | import { AppRoutingModule } from './app-routing.module';
 5 | import { AppComponent } from './app.component';
 6 | import { NgObserversModule } from 'ng-observers';
 7 | import {HIGHLIGHT_OPTIONS, HighlightModule} from 'ngx-highlightjs';
 8 | 
 9 | export function getHighlightLanguages() {
10 |   return {
11 |     html: () => import('highlight.js/lib/languages/xml')
12 |   };
13 | }
14 | 
15 | @NgModule({
16 |   declarations: [
17 |     AppComponent
18 |   ],
19 |   imports: [
20 |     BrowserModule,
21 |     AppRoutingModule,
22 |     NgObserversModule,
23 |     HighlightModule
24 |   ],
25 |   providers: [
26 |     {
27 |       provide: HIGHLIGHT_OPTIONS,
28 |       useValue: {
29 |         languages: getHighlightLanguages()
30 |       }
31 |     }
32 |   ],
33 |   bootstrap: [AppComponent]
34 | })
35 | export class AppModule { }
36 | 


--------------------------------------------------------------------------------
/projects/ng-observers/README.md:
--------------------------------------------------------------------------------
 1 | # NgObservers
 2 | 
 3 | This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
 4 | 
 5 | ## Code scaffolding
 6 | 
 7 | Run `ng generate component component-name --project ng-observers` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ng-observers`.
 8 | > Note: Don't forget to add `--project ng-observers` or else it will be added to the default project in your `angular.json` file. 
 9 | 
10 | ## Build
11 | 
12 | Run `ng build ng-observers` to build the project. The build artifacts will be stored in the `dist/` directory.
13 | 
14 | ## Publishing
15 | 
16 | After building your library with `ng build ng-observers`, go to the dist folder `cd dist/ng-observers` and run `npm publish`.
17 | 
18 | ## Running unit tests
19 | 
20 | Run `ng test ng-observers` to execute the unit tests via [Karma](https://karma-runner.github.io).
21 | 
22 | ## Further help
23 | 
24 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
25 | 


--------------------------------------------------------------------------------
/projects/ng-observers/src/lib/resize-observer.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, ElementRef, EventEmitter, OnDestroy, Output } from '@angular/core';
 2 | 
 3 | /**
 4 |  * One observer for multiple elements
 5 |  */
 6 | const entriesMap = new WeakMap();
 7 | const ro = new ResizeObserver(entries => {
 8 |   for (const entry of entries) {
 9 |     if (entriesMap.has(entry.target)) {
10 |       const comp = entriesMap.get(entry.target);
11 |       comp.resizeCallback(entry);
12 |     }
13 |   }
14 | });
15 | 
16 | @Directive({
17 |   selector: '[resizeObserver]'
18 | })
19 | export class ResizeObserverDirective implements OnDestroy {
20 | 
21 |   // tslint:disable-next-line:no-output-on-prefix
22 |   @Output()
23 |   onResize = new EventEmitter();
24 | 
25 |   constructor(private el: ElementRef) {
26 |     const target = el.nativeElement;
27 |     entriesMap.set(target, this);
28 |     ro.observe(target);
29 |   }
30 | 
31 |   resizeCallback(entry) {
32 |     this.onResize.emit(entry);
33 |   }
34 | 
35 |   /**
36 |    * Stop observer
37 |    */
38 |   ngOnDestroy() {
39 |     const target = this.el.nativeElement;
40 |     ro.unobserve(target);
41 |     entriesMap.delete(target);
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/projects/ng-observers/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../../coverage/ng-observers'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../../coverage/ng-observers-docs'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { RouterTestingModule } from '@angular/router/testing';
 3 | import { AppComponent } from './app.component';
 4 | 
 5 | describe('AppComponent', () => {
 6 |   beforeEach(async(() => {
 7 |     TestBed.configureTestingModule({
 8 |       imports: [
 9 |         RouterTestingModule
10 |       ],
11 |       declarations: [
12 |         AppComponent
13 |       ],
14 |     }).compileComponents();
15 |   }));
16 | 
17 |   it('should create the app', () => {
18 |     const fixture = TestBed.createComponent(AppComponent);
19 |     const app = fixture.debugElement.componentInstance;
20 |     expect(app).toBeTruthy();
21 |   });
22 | 
23 |   it(`should have as title 'ng-observers-docs'`, () => {
24 |     const fixture = TestBed.createComponent(AppComponent);
25 |     const app = fixture.debugElement.componentInstance;
26 |     expect(app.title).toEqual('ng-observers-docs');
27 |   });
28 | 
29 |   it('should render title', () => {
30 |     const fixture = TestBed.createComponent(AppComponent);
31 |     fixture.detectChanges();
32 |     const compiled = fixture.debugElement.nativeElement;
33 |     expect(compiled.querySelector('.content span').textContent).toContain('ng-observers-docs app is running!');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/projects/ng-observers/src/lib/intersection-observer.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, ElementRef, EventEmitter, OnDestroy, Output } from '@angular/core';
 2 | 
 3 | /**
 4 |  * One observer for multiple elements
 5 |  */
 6 | const entriesMap = new WeakMap();
 7 | const ro: IntersectionObserver = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
 8 |   for (const entry of entries) {
 9 |     if (entriesMap.has(entry.target)) {
10 |       const comp = entriesMap.get(entry.target);
11 |       comp.intersectionCallback(entry);
12 |     }
13 |   }
14 | });
15 | 
16 | @Directive({
17 |   selector: '[intersectionObserver]'
18 | })
19 | export class IntersectionObserverDirective implements OnDestroy {
20 | 
21 |   // tslint:disable-next-line:no-output-on-prefix
22 |   @Output()
23 |   onIntersection: EventEmitter<IntersectionObserverEntry> = new EventEmitter();
24 | 
25 |   constructor(private el: ElementRef) {
26 |     const target: Element = el.nativeElement;
27 |     entriesMap.set(target, this);
28 |     ro.observe(target);
29 |   }
30 | 
31 |   intersectionCallback(entry: IntersectionObserverEntry) {
32 |     this.onIntersection.emit(entry);
33 |   }
34 | 
35 |   /**
36 |    * Stop observer
37 |    */
38 |   ngOnDestroy() {
39 |     const target = this.el.nativeElement;
40 |     if (target) {
41 |       ro.unobserve(target);
42 |       entriesMap.delete(target);
43 |     }
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | header {
 6 |   h1 {
 7 |     margin: 0;
 8 |     color: #3F51B5;
 9 |   }
10 | }
11 | 
12 | .container {
13 |   padding-right: 15px;
14 |   padding-left: 15px;
15 |   margin-right: auto;
16 |   margin-left: auto;
17 | }
18 | @media (min-width: 768px) {
19 |   .container {
20 |     width: 750px;
21 |   }
22 | }
23 | @media (min-width: 992px) {
24 |   .container {
25 |     width: 970px;
26 |   }
27 | }
28 | @media (min-width: 1200px) {
29 |   .container {
30 |     width: 1170px;
31 |   }
32 | }
33 | 
34 | main {
35 |   margin: 15px auto;
36 | }
37 | 
38 | .row {
39 |   display: flex;
40 | 
41 |   * {
42 |     margin-right: 15px;
43 |     margin-bottom: 15px;
44 |   }
45 | }
46 | 
47 | .resizable-element-wrapper {
48 |   width: 300px;
49 |   height: 100px;
50 | 
51 |   .resizable-element {
52 |     width: 200px;
53 |     min-width: 120px;
54 |     max-width: 300px;
55 |     height: 80px;
56 |     min-height: 35px;
57 |     max-height: 100px;
58 |     padding: 15px;
59 |     overflow: auto;
60 |     resize: both;
61 |     color: #2b3ab5;
62 |     background: #f1f1f1;
63 |     border: 2px dashed #3F51B5;
64 | 
65 |     &:hover {
66 |       background: #eeeeee;
67 |     }
68 |   }
69 | }
70 | 
71 | .mutation {
72 |   span {
73 |     color: #2b3ab5;
74 |   }
75 | }
76 | 
77 | .intersection {
78 |   width: 300px;
79 |   height: 250px;
80 |   padding: 15px;
81 |   background: #f1f1f1;
82 |   border: 2px solid #3F51B5;
83 |   overflow: auto;
84 | 
85 |   .intersected {
86 |     margin-top: 400px;
87 |     margin-bottom: 400px;
88 |     background: #dddddd;
89 |     padding: 5px 0;
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/projects/ng-observers/src/lib/mutation-observer.directive.ts:
--------------------------------------------------------------------------------
 1 | import { Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 2 | 
 3 | @Directive({
 4 |   selector: '[mutationObserver]'
 5 | })
 6 | export class MutationObserverDirective implements OnInit, OnDestroy {
 7 | 
 8 |   // tslint:disable-next-line:no-output-on-prefix
 9 |   @Output()
10 |   onMutate = new EventEmitter();
11 | 
12 |   @Input()
13 |   options: MutationObserverInit = {
14 |     attributes: true,
15 |     characterData: true,
16 |     childList: true,
17 |     subtree: true
18 |   };
19 | 
20 |   observer: MutationObserver;
21 | 
22 |   constructor(private el: ElementRef) {}
23 | 
24 |   ngOnInit() {
25 |     if (!this.validateOptions(this.options)) {
26 |       throw new Error(
27 |         'ng-observers: options object must set at least one of ' +
28 |         '"attributes", "characterData", or "childList" to true.'
29 |       );
30 |     }
31 |     this.observe();
32 |   }
33 | 
34 |   /**
35 |    * Init observer
36 |    */
37 |   observe() {
38 |     const target = this.el.nativeElement;
39 |     this.observer = new MutationObserver((mutation) => {
40 |       this.onMutate.emit(mutation);
41 |     });
42 |     this.observer.observe(target, this.options);
43 |   }
44 | 
45 |   /**
46 |    * Checks that `options` contains at least 1 true value
47 |    */
48 |   validateOptions(options: MutationObserverInit): boolean {
49 |     let isValid = false;
50 |     for (const key in options) {
51 |       if (options[key]) {
52 |         isValid = true;
53 |       }
54 |     }
55 |     return isValid;
56 |   }
57 | 
58 |   /**
59 |    * Stop observer
60 |    */
61 |   ngOnDestroy() {
62 |     this.observer.disconnect();
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <header class="container">
 2 |   <h1>ng-observers</h1>
 3 | </header>
 4 | 
 5 | <main class="container">
 6 |   <h2>Examples</h2>
 7 |   <div>
 8 |     <h3>Resize Observer (<a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">MDN</a>)</h3>
 9 |     <p>
10 |       The ResizeObserver interface reports changes to the dimensions of an element's content or border box.
11 |     </p>
12 |     <div class="row">
13 |       <div class="resizable-element-wrapper">
14 |         <div class="resizable-element" resizeObserver (onResize)="onResize($event)">
15 |           Resize me
16 |         </div>
17 |       </div>
18 |       <div>
19 |         <p>
20 |           Width: {{resizeElement.width}}px<br />
21 |           Height: {{resizeElement.height}}px<br />
22 |         </p>
23 |       </div>
24 |     </div>
25 |     <div class="row">
26 |       <pre><code [highlight]="snippets.resizeObserver"></code></pre>
27 |     </div>
28 |   </div>
29 | 
30 |   <div>
31 |     <h3>Mutation Observer</h3>
32 |     <div class="mutation" mutationObserver (onMutate)="onMutate($event)">
33 |       <span (click)="shown=!shown">Click here</span> to mutate an element inside the container
34 |       <div *ngIf="shown">
35 |         Parent has been mutated
36 |       </div>
37 |     </div>
38 |     <div class="row">
39 |       <pre><code [highlight]="snippets.mutationObserver"></code></pre>
40 |     </div>
41 |   </div>
42 | 
43 |   <div>
44 |     <h3>Intersection Observer</h3>
45 |     <div class="intersection">
46 |       Scroll down to intersect
47 |       <div intersectionObserver (onIntersection)="onIntersection($event)" class="intersected">
48 |         Intersected element
49 |       </div>
50 |       Scroll up to intersect
51 |     </div>
52 |     <div class="row">
53 |       <pre><code [highlight]="snippets.intersectionObserver"></code></pre>
54 |     </div>
55 |   </div>
56 | </main>
57 | 
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ng-observers",
 3 |   "version": "0.0.4",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "https://github.com/evyros/ng-observers.git"
 7 |   },
 8 |   "keywords": [
 9 |     "angular observer",
10 |     "angular resize",
11 |     "angular mutate",
12 |     "angular intersection",
13 |     "angular observers"
14 |   ],
15 |   "scripts": {
16 |     "ng": "ng",
17 |     "start": "ng serve",
18 |     "build": "ng build",
19 |     "test": "ng test",
20 |     "lint": "ng lint",
21 |     "e2e": "ng e2e"
22 |   },
23 |   "private": true,
24 |   "dependencies": {
25 |     "@angular/animations": "~8.2.14",
26 |     "@angular/common": "~8.2.14",
27 |     "@angular/compiler": "~8.2.14",
28 |     "@angular/core": "~8.2.14",
29 |     "@angular/forms": "~8.2.14",
30 |     "@angular/platform-browser": "~8.2.14",
31 |     "@angular/platform-browser-dynamic": "~8.2.14",
32 |     "@angular/router": "~8.2.14",
33 |     "ngx-highlightjs": "^4.0.0",
34 |     "rxjs": "~6.4.0",
35 |     "tslib": "^1.10.0",
36 |     "zone.js": "~0.9.1"
37 |   },
38 |   "devDependencies": {
39 |     "@angular-devkit/build-angular": "~0.803.20",
40 |     "@angular-devkit/build-ng-packagr": "~0.803.20",
41 |     "@angular/cli": "~8.3.20",
42 |     "@angular/compiler-cli": "~8.2.14",
43 |     "@angular/language-service": "~8.2.14",
44 |     "@types/jasmine": "~3.3.8",
45 |     "@types/jasminewd2": "~2.0.3",
46 |     "@types/node": "~8.9.4",
47 |     "@types/resize-observer-browser": "^0.1.2",
48 |     "codelyzer": "^5.0.0",
49 |     "jasmine-core": "~3.4.0",
50 |     "jasmine-spec-reporter": "~4.2.1",
51 |     "karma": "~4.1.0",
52 |     "karma-chrome-launcher": "~2.2.0",
53 |     "karma-coverage-istanbul-reporter": "~2.0.1",
54 |     "karma-jasmine": "~2.0.1",
55 |     "karma-jasmine-html-reporter": "^1.4.0",
56 |     "ng-packagr": "^5.4.0",
57 |     "protractor": "~5.4.0",
58 |     "ts-node": "~7.0.0",
59 |     "tsickle": "^0.37.0",
60 |     "tslint": "~5.15.0",
61 |     "typescript": "~3.5.3"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rulesDirectory": [
 4 |     "codelyzer"
 5 |   ],
 6 |   "rules": {
 7 |     "array-type": false,
 8 |     "arrow-parens": false,
 9 |     "deprecation": {
10 |       "severity": "warning"
11 |     },
12 |     "import-blacklist": [
13 |       true,
14 |       "rxjs/Rx"
15 |     ],
16 |     "interface-name": false,
17 |     "max-classes-per-file": false,
18 |     "max-line-length": [
19 |       true,
20 |       140
21 |     ],
22 |     "member-access": false,
23 |     "member-ordering": [
24 |       true,
25 |       {
26 |         "order": [
27 |           "static-field",
28 |           "instance-field",
29 |           "static-method",
30 |           "instance-method"
31 |         ]
32 |       }
33 |     ],
34 |     "no-consecutive-blank-lines": false,
35 |     "no-console": [
36 |       true,
37 |       "debug",
38 |       "info",
39 |       "time",
40 |       "timeEnd",
41 |       "trace"
42 |     ],
43 |     "no-empty": false,
44 |     "no-inferrable-types": [
45 |       true,
46 |       "ignore-params"
47 |     ],
48 |     "no-non-null-assertion": true,
49 |     "no-redundant-jsdoc": true,
50 |     "no-switch-case-fall-through": true,
51 |     "no-var-requires": false,
52 |     "object-literal-key-quotes": [
53 |       true,
54 |       "as-needed"
55 |     ],
56 |     "object-literal-sort-keys": false,
57 |     "ordered-imports": false,
58 |     "quotemark": [
59 |       true,
60 |       "single"
61 |     ],
62 |     "trailing-comma": false,
63 |     "component-class-suffix": true,
64 |     "contextual-lifecycle": true,
65 |     "directive-class-suffix": true,
66 |     "no-conflicting-lifecycle": true,
67 |     "no-host-metadata-property": true,
68 |     "no-input-rename": true,
69 |     "no-inputs-metadata-property": true,
70 |     "no-output-native": true,
71 |     "no-output-on-prefix": true,
72 |     "no-output-rename": true,
73 |     "no-outputs-metadata-property": true,
74 |     "template-banana-in-box": true,
75 |     "template-no-negated-async": true,
76 |     "use-lifecycle-interface": true,
77 |     "use-pipe-transform-interface": true
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ng-observers
 2 | 
 3 | [![npm version](https://badge.fury.io/js/ng-observers.svg)](https://badge.fury.io/js/ng-observers)
 4 | [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
 5 | 
 6 | > Angular (6+) directives for native observers API for detecting element's size change, visibility and DOM manipulations.
 7 | > 
 8 | > Giving you `onResize()`, `onMutate()` and `onIntersection()` using [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver), [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) and [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
 9 | 
10 | ---
11 | 
12 | ## Demonstration
13 | 
14 | [Demo on Stackblitz](https://stackblitz.com/edit/angular-mzqya5)
15 | 
16 | ## Getting started
17 | 
18 | ```bash
19 | npm i ng-observers
20 | ```
21 | 
22 | Then import `NgObserversModule`:
23 | 
24 | ```typescript
25 | import { NgObserversModule } from 'ng-observers';
26 | 
27 | @NgModule({
28 |   declarations: [AppComponent],
29 |   imports: [NgObserversModule],
30 |   bootstrap: [AppComponent]
31 | })
32 | export class AppModule {}
33 | ```
34 | 
35 | ## Usage Example
36 | 
37 | ### Resize: 
38 | ```html
39 | <div resizeObserver (onResize)="onResize($event)"></div>
40 | ```
41 | 
42 | ### Intersection: 
43 | ```html
44 | <div intersectionObserver (onIntersection)="onIntersection($event)"></div>
45 | ```
46 | 
47 | ### Mutation:
48 | ```html
49 | <div mutationObserver (onMutate)="onMutate($event)"></div>
50 | ```
51 | 
52 | ```typescript
53 | class AppComponent {
54 | 
55 |   onResize(event) {
56 |     // ...
57 |   }
58 |   
59 |   onIntersection(event) {
60 |     // ...
61 |   }
62 | 
63 |   onMutate(event) {
64 |     // ...
65 |   }
66 |   
67 | }
68 | ```
69 | 
70 | #### Additional options for mutationObserver:
71 | ```html
72 | <div mutationObserver
73 |      [options]="{attributes: true, subtree: true}"
74 |      (onMutate)="onMutate($event)"></div>
75 | ```
76 | `options` is optional, structured as [MutationObserverInit](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit):
77 | ```javascript
78 | options = {
79 |     childList: false,
80 |     attributes: true,
81 |     subtree: false,
82 |     characterData: true
83 | }
84 | ```
85 | 


--------------------------------------------------------------------------------
/projects/ng-observers-docs/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags.ts';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | /***************************************************************************************************
56 |  * Zone JS is required by default for Angular itself.
57 |  */
58 | import 'zone.js/dist/zone';  // Included with Angular CLI.
59 | 
60 | 
61 | /***************************************************************************************************
62 |  * APPLICATION IMPORTS
63 |  */
64 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "ng-observers": {
  7 |       "projectType": "library",
  8 |       "root": "projects/ng-observers",
  9 |       "sourceRoot": "projects/ng-observers/src",
 10 |       "prefix": "lib",
 11 |       "architect": {
 12 |         "build": {
 13 |           "builder": "@angular-devkit/build-ng-packagr:build",
 14 |           "options": {
 15 |             "tsConfig": "projects/ng-observers/tsconfig.lib.json",
 16 |             "project": "projects/ng-observers/ng-package.json"
 17 |           }
 18 |         },
 19 |         "test": {
 20 |           "builder": "@angular-devkit/build-angular:karma",
 21 |           "options": {
 22 |             "main": "projects/ng-observers/src/test.ts",
 23 |             "tsConfig": "projects/ng-observers/tsconfig.spec.json",
 24 |             "karmaConfig": "projects/ng-observers/karma.conf.js"
 25 |           }
 26 |         },
 27 |         "lint": {
 28 |           "builder": "@angular-devkit/build-angular:tslint",
 29 |           "options": {
 30 |             "tsConfig": [
 31 |               "projects/ng-observers/tsconfig.lib.json",
 32 |               "projects/ng-observers/tsconfig.spec.json"
 33 |             ],
 34 |             "exclude": [
 35 |               "**/node_modules/**"
 36 |             ]
 37 |           }
 38 |         }
 39 |       }
 40 |     },
 41 |     "ng-observers-docs": {
 42 |       "projectType": "application",
 43 |       "schematics": {
 44 |         "@schematics/angular:component": {
 45 |           "style": "scss"
 46 |         }
 47 |       },
 48 |       "root": "projects/ng-observers-docs",
 49 |       "sourceRoot": "projects/ng-observers-docs/src",
 50 |       "prefix": "app",
 51 |       "architect": {
 52 |         "build": {
 53 |           "builder": "@angular-devkit/build-angular:browser",
 54 |           "options": {
 55 |             "outputPath": "dist/ng-observers-docs",
 56 |             "index": "projects/ng-observers-docs/src/index.html",
 57 |             "main": "projects/ng-observers-docs/src/main.ts",
 58 |             "polyfills": "projects/ng-observers-docs/src/polyfills.ts",
 59 |             "tsConfig": "projects/ng-observers-docs/tsconfig.app.json",
 60 |             "aot": false,
 61 |             "assets": [
 62 |               "projects/ng-observers-docs/src/favicon.ico",
 63 |               "projects/ng-observers-docs/src/assets"
 64 |             ],
 65 |             "styles": [
 66 |               "projects/ng-observers-docs/src/styles.scss"
 67 |             ],
 68 |             "scripts": []
 69 |           },
 70 |           "configurations": {
 71 |             "production": {
 72 |               "fileReplacements": [
 73 |                 {
 74 |                   "replace": "projects/ng-observers-docs/src/environments/environment.ts",
 75 |                   "with": "projects/ng-observers-docs/src/environments/environment.prod.ts"
 76 |                 }
 77 |               ],
 78 |               "optimization": true,
 79 |               "outputHashing": "all",
 80 |               "sourceMap": false,
 81 |               "extractCss": true,
 82 |               "namedChunks": false,
 83 |               "aot": true,
 84 |               "extractLicenses": true,
 85 |               "vendorChunk": false,
 86 |               "buildOptimizer": true,
 87 |               "budgets": [
 88 |                 {
 89 |                   "type": "initial",
 90 |                   "maximumWarning": "2mb",
 91 |                   "maximumError": "5mb"
 92 |                 },
 93 |                 {
 94 |                   "type": "anyComponentStyle",
 95 |                   "maximumWarning": "6kb",
 96 |                   "maximumError": "10kb"
 97 |                 }
 98 |               ]
 99 |             }
100 |           }
101 |         },
102 |         "serve": {
103 |           "builder": "@angular-devkit/build-angular:dev-server",
104 |           "options": {
105 |             "browserTarget": "ng-observers-docs:build"
106 |           },
107 |           "configurations": {
108 |             "production": {
109 |               "browserTarget": "ng-observers-docs:build:production"
110 |             }
111 |           }
112 |         },
113 |         "extract-i18n": {
114 |           "builder": "@angular-devkit/build-angular:extract-i18n",
115 |           "options": {
116 |             "browserTarget": "ng-observers-docs:build"
117 |           }
118 |         },
119 |         "test": {
120 |           "builder": "@angular-devkit/build-angular:karma",
121 |           "options": {
122 |             "main": "projects/ng-observers-docs/src/test.ts",
123 |             "polyfills": "projects/ng-observers-docs/src/polyfills.ts",
124 |             "tsConfig": "projects/ng-observers-docs/tsconfig.spec.json",
125 |             "karmaConfig": "projects/ng-observers-docs/karma.conf.js",
126 |             "assets": [
127 |               "projects/ng-observers-docs/src/favicon.ico",
128 |               "projects/ng-observers-docs/src/assets"
129 |             ],
130 |             "styles": [
131 |               "projects/ng-observers-docs/src/styles.scss"
132 |             ],
133 |             "scripts": []
134 |           }
135 |         },
136 |         "lint": {
137 |           "builder": "@angular-devkit/build-angular:tslint",
138 |           "options": {
139 |             "tsConfig": [
140 |               "projects/ng-observers-docs/tsconfig.app.json",
141 |               "projects/ng-observers-docs/tsconfig.spec.json",
142 |               "projects/ng-observers-docs/e2e/tsconfig.json"
143 |             ],
144 |             "exclude": [
145 |               "**/node_modules/**"
146 |             ]
147 |           }
148 |         },
149 |         "e2e": {
150 |           "builder": "@angular-devkit/build-angular:protractor",
151 |           "options": {
152 |             "protractorConfig": "projects/ng-observers-docs/e2e/protractor.conf.js",
153 |             "devServerTarget": "ng-observers-docs:serve"
154 |           },
155 |           "configurations": {
156 |             "production": {
157 |               "devServerTarget": "ng-observers-docs:serve:production"
158 |             }
159 |           }
160 |         }
161 |       }
162 |     }},
163 |   "defaultProject": "ng-observers"
164 | }
165 | 


--------------------------------------------------------------------------------