docs: ✏️ Correct implementation of WindowModule

Issues: 99

Author: Lieven Van Gestel

packages/utils/examples/src/utils/pages/window/window.page.html

@@ -1,7 +1,7 @@
 <h2 class="h4 u-margin-bottom">Window</h2>
 
 <p class="u-margin-bottom">
-	Utility to mount the global Window interface into your component using dependency injection.
+	Utility to reference the global window object indirectly.
 </p>
 
 <div class="u-margin-bottom">
@@ -16,20 +16,16 @@ <h2 class="h4 u-margin-bottom">Window</h2>
     <aui-code-snippet [codeSnippet]="codeExampleJS2"></aui-code-snippet>
 </div>
 
-<div class="u-margin-bottom">
-    <aui-code-snippet [codeSnippet]="codeExampleJS3"></aui-code-snippet>
-</div>
-
 <div class="u-margin-bottom">
     <aui-code-snippet [codeSnippet]="codeExampleHTML"></aui-code-snippet>
 </div>
 
 <p class="u-margin-bottom-xs">
-	These are the current frame's height and width:
+	These are the window's current height and width:
 </p>
 <dl class="a-definition-list u-margin-bottom">
 	<dt>Height:</dt>
-		<dd><pre>{{ windowObject.innerHeight }}</pre></dd>
+		<dd><pre>{{ window?.innerHeight }}</pre></dd>
 	<dt>Width:</dt>
-		<dd><pre>{{ windowObject.innerWidth }}</pre></dd>
+		<dd><pre>{{ window?.innerWidth }}</pre></dd>
 </dl>

packages/utils/examples/src/utils/pages/window/window.page.ts

@@ -3,17 +3,9 @@ import { WINDOW } from '@acpaas-ui/ngx-components/utils';
 
 @Component({
 	templateUrl: './window.page.html',
-	// fix for `@Inject` and global interface type
-	// https://github.com/angular/angular/issues/15640
-	providers: [
-		{
-			provide: WINDOW,
-			useValue: window,
-		},
-	],
 })
 export class UtilsWindowDemoPageComponent {
-	public importModule = `import { WindowModule } from '@acpaas-ui/ngx-components/utils';
+	public importModule = `import { WindowModule, WINDOW_PROVIDERS } from '@acpaas-ui/ngx-components/utils';';
 
 @NgModule({
 	imports: [
@@ -26,31 +18,17 @@ export class AppModule {};`;
 
 	public codeExampleJS1 = `import { WINDOW } from '@acpaas-ui/ngx-components/utils';`;
 
-	public codeExampleJS2 = `@Component({
-	templateUrl: './window.page.html',
-	// fix for @Inject and global interface type
-	// https://github.com/angular/angular/issues/15640
-	providers: [
-		{
-			provide: WINDOW,
-			useValue: window,
-		},
-	],
-})`;
-
-	public codeExampleJS3 = `public windowObject = this.window;
-	constructor(
-		@Inject(WINDOW) private window
-	) {}`;
+	public codeExampleJS2 = `constructor(
+	@Inject(WINDOW) public window
+) {}`;
 
 	public codeExampleHTML = `<dl>
 	<dt>Height:</dt>
-		<dd><pre>{{ windowObject.innerHeight }}</pre></dd>
+		<dd><pre>{{ window.innerHeight }}</pre></dd>
 	<dt>Width:</dt>
-		<dd><pre>{{ windowObject.innerWidth }}</pre></dd>
+		<dd><pre>{{ window.innerWidth }}</pre></dd>
 </dl>`;
-	public windowObject = this.window;
 	constructor(
-		@Inject(WINDOW) private window
+		@Inject(WINDOW) public window
 	) {}
 }

packages/utils/examples/src/utils/utils.module.ts

@@ -6,6 +6,7 @@ import {
 	FilterModule,
 	LabelsModule,
 	WindowModule,
+	WINDOW_PROVIDERS,
 } from '@acpaas-ui/ngx-components/utils';
 import { CodeSnippetModule } from '@acpaas-ui/ngx-components/code-snippet';
 
@@ -24,5 +25,6 @@ import { Pages } from './pages/index';
 	declarations: [
 		Pages,
 	],
+	providers: [WINDOW_PROVIDERS],
 })
 export class UtilsExamplesModule {}

packages/utils/lib/src/window/README.md

@@ -16,7 +16,7 @@ Visit our [documentation site](https://acpaas-ui.digipolis.be/) for full how-to
 ### Example
 
 ```typescript
-import { WindowModule } from '@acpaas-ui/ngx-components/utils';
+import { WindowModule, WINDOW_PROVIDERS } from '@acpaas-ui/ngx-components/utils';
 
 @NgModule({
     imports: [
@@ -33,32 +33,17 @@ import { WINDOW } from '@acpaas-ui/ngx-components/utils';
 ```
 
 ```typescript
-@Component({
-    templateUrl: './window.page.html',
-    // fix for @Inject and global interface type
-    // https://github.com/angular/angular/issues/15640
-    providers: [
-        {
-            provide: WINDOW,
-            useValue: window,
-        },
-    ],
-})
-```
-
-```typescript
-public windowObject = this.window;
 constructor(
-    @Inject(WINDOW) private window
+    @Inject(WINDOW) public window
 ) {}
 ```
 
 ```html
 <dl>
     <dt>Height:</dt>
-        <dd><pre>{{ windowObject.innerHeight }}</pre></dd>
+        <dd><pre>{{ window.innerHeight }}</pre></dd>
     <dt>Width:</dt>
-        <dd><pre>{{ windowObject.innerWidth }}</pre></dd>
+        <dd><pre>{{ window.innerWidth }}</pre></dd>
 </dl>
 ```