# @acoustic-content-sdk/ng-utils

> Implementation of a utility methods and classes for Angular based projects.

Latest version **9.0.10076** (published 2020-03-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @acoustic-content-sdk/ng-utils
pnpm add @acoustic-content-sdk/ng-utils
yarn add @acoustic-content-sdk/ng-utils
bun add @acoustic-content-sdk/ng-utils
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 9.0.10076 |
| Published | 2020-03-26 |
| First published | 2019-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 432 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Carsten Leue |
| Maintainers | carstenleue, daherbst, jim.patrick, joe.john, kevintap, mburati, neelkanthpatel, orenaksakal |
| Keywords | acoustic, acoustic-content, angular, sdk |

## Links

- npm: https://www.npmjs.com/package/@acoustic-content-sdk/ng-utils
- npm.io page: https://npm.io/package/@acoustic-content-sdk/ng-utils

## Dependencies (6)

- [@acoustic-content-sdk/api](https://npm.io/package/@acoustic-content-sdk/api.md) 9.0.10076
- [@acoustic-content-sdk/utils](https://npm.io/package/@acoustic-content-sdk/utils.md) 9.0.10076
- [@acoustic-content-sdk/ng-api](https://npm.io/package/@acoustic-content-sdk/ng-api.md) 9.0.10076
- [@acoustic-content-sdk/ng-edit-api](https://npm.io/package/@acoustic-content-sdk/ng-edit-api.md) 9.0.10076
- [@acoustic-content-sdk/component-api](https://npm.io/package/@acoustic-content-sdk/component-api.md) 9.0.10076
- [@acoustic-content-sdk/component-utils](https://npm.io/package/@acoustic-content-sdk/component-utils.md) 9.0.10076

## Recent versions

- 9.0.10076 (latest) — 2020-03-26
- 8.0.498 (beta) — 2019-11-30
- 9.0.10067 — 2020-03-25
- 9.0.10040 — 2020-03-20
- 9.0.10034 — 2020-03-20
- 9.0.495 — 2020-03-09
- 9.0.493 — 2020-03-08
- 9.0.462 — 2020-03-05
- 9.0.407 — 2020-02-28
- 9.0.384 — 2020-02-25
- 9.0.361 — 2020-02-21
- 9.0.360 — 2020-02-21
- 9.0.271 — 2020-02-11
- 9.0.270 — 2020-02-11
- 9.0.251 — 2020-02-07
- … 6 more at https://npm.io/package/@acoustic-content-sdk/ng-utils/versions

## README

<a name="_21fa90eb59628f90825292b1ea465b668aa5d3d2b2ca45f80ac0b98d801773af"></a>
[![npm](https://img.shields.io/npm/v/@acoustic-content-sdk/ng-utils.svg?style=flat-square)](https://www.npmjs.com/package/@acoustic-content-sdk/ng-utils)

Implementation of a utility methods and classes for Angular based projects.

## Table of Contents

- [API Documentation](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693)

<a name="_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693)

## ng-utils package

Implementation of a utility methods and classes for Angular based projects

## Classes

|  Class | Description |
|  --- | --- |
|  [AbstractBaseComponent](#_a3ae08a4d1fc685a1392cd6fd78267badae035acec037905a473e2feddc7c00f) | Implementation of a base component for Angular Components that expose the <code>renderingContext</code> and <code>layoutMode</code> output observables. |
|  [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) | tslint:disable:no-conflicting-lifecycle |
|  [AbstractRenderingComponent](#_1d1b0460995746e35e0c203b0029255d95dfaa000e6da65de40b2958323a671b) | Convenience base class for components that work with a <code>RenderingContextV2</code>. |
|  [AcNgBrowserWindowModule](#_42f61b1781968fad3e02cd506694008844930e2f26ad776311456680eaa2c7d1) | Exposes the window as the <code>ACOUSTIC_TOKEN_WINDOW</code> token for the case that the application runs in the browser (as opposed to running on the server via Angular Universal) |
|  [AcNgEditHostWindowModule](#_6f52a7480cbc00f3a2768c9d9d7f0d381908e428175ae8a25952ebfbc0f83868) | Exposes the edit host as the <code>ACOUSTIC_TOKEN_EDIT_HOST_WINDOW</code> token.<!-- -->Depends on: <code>ACOUSTIC_TOKEN_WINDOW</code> |

## Functions

|  Function | Description |
|  --- | --- |
|  [proxyGetEditHostWindow(aCurrentWindow)](#_4efb87b3e0c9e99f36361af31b5f3322f3bc8154b986fa50277c83810fe3049d) | Returns the window that controls the application |

## Variables

|  Variable | Description |
|  --- | --- |
|  [VERSION](#_6c1fc906a91a53a1fec0db058c7e84cf2711e5a261098861c1e33f26d3957ca3) | Version and build number of the package |


<a name="_21fa90eb59628f90825292b1ea465b668aa5d3d2b2ca45f80ac0b98d801773af"></a>

<a name="_a3ae08a4d1fc685a1392cd6fd78267badae035acec037905a473e2feddc7c00f"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractBaseComponent](#_a3ae08a4d1fc685a1392cd6fd78267badae035acec037905a473e2feddc7c00f)

## AbstractBaseComponent class

Implementation of a base component for Angular Components that expose the `renderingContext` and `layoutMode` output observables.

<b>Signature:</b>

```typescript
export declare abstract class AbstractBaseComponent extends AbstractLifeCycleComponent implements RenderingContextProviderV2 
```

## Constructors

|  Constructor | Modifiers | Description |
|  --- | --- | --- |
|  [(constructor)()](#_9a7cc839d7928d63851926355cbccaa2ada74fb08d42e0bcf2aec44cef970429) |  | Constructs a new instance of the <code>AbstractBaseComponent</code> class |

## Properties

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [layoutMode](#_4b9891e7a7c165e1f6dd1a6eda5ea1d9df979309a429777912790715c081c40b) |  | <code>string</code> | Set the layout mode to render this page |
|  [layoutMode$](#_ad2feab9cc48a831d1398ca6445bfd694abc92e29b3ba4474d54d5ccf6b241c2) |  | <code>Observable&lt;string&gt;</code> | Fires whenever the layout mode changed, includes the initial default mode. |
|  [renderingContext$](#_fb126e1cb4f390cf0235c1b3f98ff9ff2dde9c06b4024c8e8d8fd9e3e2b8a343) |  | <code>Observable&lt;RenderingContextV2&gt;</code> | The rendering context for the page. This is the context of the element that is referenced by the currently active route. |


<a name="_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c)

## AbstractLifeCycleComponent class

tslint:disable:no-conflicting-lifecycle

<b>Signature:</b>

```typescript
export declare abstract class AbstractLifeCycleComponent implements OnInit, OnDestroy, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked 
```

## Properties

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [afterContentChecked$](#_13dcf6a1e51eaf4913a921162b0710042d51973d2205bf98cec6305751db2420) |  | <code>Observable&lt;void&gt;</code> | [AfterContentChecked](https://angular.io/guide/lifecycle-hooks) |
|  [afterContentInit$](#_1f8ac84799047a698f154566b7be845b59432b0e49d7c5185654061147f0e68d) |  | <code>Observable&lt;void&gt;</code> | [AfterContentInit](https://angular.io/guide/lifecycle-hooks) |
|  [afterViewChecked$](#_8a32d39e52886016f044ead2db08c14bb3e3a777b91eb26e24f83ed4a4e1e79f) |  | <code>Observable&lt;void&gt;</code> | [AfterViewChecked](https://angular.io/guide/lifecycle-hooks) |
|  [afterViewInit$](#_df4177b7fcd1ad9077e28acc13dde45e099eeb79f2f99de78dca9a29fe58fb14) |  | <code>Observable&lt;void&gt;</code> | [AfterViewInit](https://angular.io/guide/lifecycle-hooks) |
|  [doCheck$](#_7c8f873cc04d94699b0c279620e88c0830c871be26ef493f83b155329fd12b45) |  | <code>Observable&lt;void&gt;</code> | [DoCheck](https://angular.io/guide/lifecycle-hooks) |
|  [onChanges$](#_05024f7ae59209718ade07eeb6fd5b51f850a61e2a4220bfdbee8807bc773527) |  | <code>Observable&lt;SimpleChanges&gt;</code> | [OnChanges](https://angular.io/guide/lifecycle-hooks) |
|  [onDestroy$](#_eab6a011de126866adfafd407a26a052104c61d92369dc0c72484d4f322ea0ef) |  | <code>Observable&lt;void&gt;</code> | [OnDestroy](https://angular.io/guide/lifecycle-hooks) |
|  [onInit$](#_4deb421c8c13582e093094350e58bccc71917cd9e883a495e94afcf31231d79c) |  | <code>Observable&lt;void&gt;</code> | [OnInit](https://angular.io/guide/lifecycle-hooks) |

## Methods

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [ngAfterContentChecked()](#_d916b59b00525a44c4432a9b08c926a7743eb2b46e0e4c80932a9ba62d789a91) |  | [AfterContentChecked](https://angular.io/guide/lifecycle-hooks) |
|  [ngAfterContentInit()](#_acbb352512b4aacd64875a8b51aad9ba7f583e97f589a7917db05ec1d8b431ea) |  | [AfterContentInit](https://angular.io/guide/lifecycle-hooks) |
|  [ngAfterViewChecked()](#_620e6ac6d8f549f7f380541b0899f86e124f68ce62da579b91b00a990d1b1ef2) |  | [AfterViewChecked](https://angular.io/guide/lifecycle-hooks) |
|  [ngAfterViewInit()](#_042c7dc869a5bd638fa5eaaf01fc098c18fb6c0d743532c73963b3143f89a9e1) |  | [AfterViewInit](https://angular.io/guide/lifecycle-hooks) |
|  [ngDoCheck()](#_d0129f22df2b9b263dfee29229eb0dffb5dbab7b63488d38fc665493bac5ae69) |  | [DoCheck](https://angular.io/guide/lifecycle-hooks) |
|  [ngOnChanges(changes)](#_73b8659056aa7e52b652f5f168279e849fcf5133bbd4db15fc704a0034970c6b) |  | [OnChanges](https://angular.io/guide/lifecycle-hooks) |
|  [ngOnDestroy()](#_4a3eaca012f0a31afae330318f807caed782c711116fb3cf661515a1145b921e) |  | [OnDestroy](https://angular.io/guide/lifecycle-hooks) |
|  [ngOnInit()](#_3a9a3e849bf51c5deac378bbacc626825bd1170122e2eb364a632b6f7aed7cdd) |  | {@<!-- -->linkhttps://angular.io/guide/lifecycle-hooks\| OnInit<!-- -->} |


<a name="_1d1b0460995746e35e0c203b0029255d95dfaa000e6da65de40b2958323a671b"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractRenderingComponent](#_1d1b0460995746e35e0c203b0029255d95dfaa000e6da65de40b2958323a671b)

## AbstractRenderingComponent class

Convenience base class for components that work with a `RenderingContextV2`<!-- -->.

<b>Signature:</b>

```typescript
export declare abstract class AbstractRenderingComponent extends AbstractBaseComponent implements RenderingContextProviderV2 
```

## Constructors

|  Constructor | Modifiers | Description |
|  --- | --- | --- |
|  [(constructor)()](#_7eedd12acaba6cbc74c5efb788c5bbd3235affb5d1702f6a86afd12c234cb733) |  | Our constructor |

## Properties

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [layoutMode$](#_185de5aa792cd4bb37ac7242b6fab0674fbd3d2c182b5605b7ca81f51895241f) |  | <code>Observable&lt;string&gt;</code> | Returns an Observable for the layout mode |
|  [renderingContext$](#_b7802dd1400c628fc626bf1eb292853b191dc353d8b759ef3e5011482a1066e3) |  | <code>Observable&lt;RenderingContextV2&gt;</code> | Returns an Observable for the rendering context |

## Methods

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [trackCtx(aIndex, aCtx)](#_13c6060c1b64ac7b94016974c3f0e1b30b0542a27911c3acf210d7887b6c5de9) |  | Generates unique IDs for elements using the following strategy: - if the context is a string, use it as the ID - if the context is an element then ... -- if the element contains an 'id' field, use that -- if the element has a '$metadata.id' field, use that -- if the element has a '$metadata.accessor' field, use that -- fall back to the index |


<a name="_42f61b1781968fad3e02cd506694008844930e2f26ad776311456680eaa2c7d1"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AcNgBrowserWindowModule](#_42f61b1781968fad3e02cd506694008844930e2f26ad776311456680eaa2c7d1)

## AcNgBrowserWindowModule class

Exposes the window as the `ACOUSTIC_TOKEN_WINDOW` token for the case that the application runs in the browser (as opposed to running on the server via Angular Universal)

<b>Signature:</b>

```typescript
export declare class AcNgBrowserWindowModule 
```

<a name="_6f52a7480cbc00f3a2768c9d9d7f0d381908e428175ae8a25952ebfbc0f83868"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AcNgEditHostWindowModule](#_6f52a7480cbc00f3a2768c9d9d7f0d381908e428175ae8a25952ebfbc0f83868)

## AcNgEditHostWindowModule class

Exposes the edit host as the `ACOUSTIC_TOKEN_EDIT_HOST_WINDOW` token.

Depends on: `ACOUSTIC_TOKEN_WINDOW`

<b>Signature:</b>

```typescript
export declare class AcNgEditHostWindowModule 
```

<a name="_4efb87b3e0c9e99f36361af31b5f3322f3bc8154b986fa50277c83810fe3049d"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [proxyGetEditHostWindow](#_4efb87b3e0c9e99f36361af31b5f3322f3bc8154b986fa50277c83810fe3049d)

## proxyGetEditHostWindow() function

Returns the window that controls the application

<b>Signature:</b>

```typescript
export declare function proxyGetEditHostWindow(aCurrentWindow: WindowType): WindowType;
```

## Parameters

|  Parameter | Type | Description |
|  --- | --- | --- |
|  aCurrentWindow | <code>WindowType</code> | the current window |

<b>Returns:</b>

`WindowType`

the controlling window


<a name="_6c1fc906a91a53a1fec0db058c7e84cf2711e5a261098861c1e33f26d3957ca3"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [VERSION](#_6c1fc906a91a53a1fec0db058c7e84cf2711e5a261098861c1e33f26d3957ca3)

## VERSION variable

Version and build number of the package

<b>Signature:</b>

```typescript
VERSION: {
    version: {
        major: string;
        minor: string;
        patch: string;
        branch: string;
    };
    build: Date;
}
```

<a name="_9a7cc839d7928d63851926355cbccaa2ada74fb08d42e0bcf2aec44cef970429"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractBaseComponent](#_a3ae08a4d1fc685a1392cd6fd78267badae035acec037905a473e2feddc7c00f) &gt; [(constructor)](#_9a7cc839d7928d63851926355cbccaa2ada74fb08d42e0bcf2aec44cef970429)

## AbstractBaseComponent.(constructor)

Constructs a new instance of the `AbstractBaseComponent` class

<b>Signature:</b>

```typescript
protected constructor();
```

<a name="_4b9891e7a7c165e1f6dd1a6eda5ea1d9df979309a429777912790715c081c40b"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractBaseComponent](#_a3ae08a4d1fc685a1392cd6fd78267badae035acec037905a473e2feddc7c00f) &gt; [layoutMode](#_4b9891e7a7c165e1f6dd1a6eda5ea1d9df979309a429777912790715c081c40b)

## AbstractBaseComponent.layoutMode property

Set the layout mode to render this page

<b>Signature:</b>

```typescript
layoutMode: string;
```

<a name="_ad2feab9cc48a831d1398ca6445bfd694abc92e29b3ba4474d54d5ccf6b241c2"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractBaseComponent](#_a3ae08a4d1fc685a1392cd6fd78267badae035acec037905a473e2feddc7c00f) &gt; [layoutMode$](#_ad2feab9cc48a831d1398ca6445bfd694abc92e29b3ba4474d54d5ccf6b241c2)

## AbstractBaseComponent.layoutMode$ property

Fires whenever the layout mode changed, includes the initial default mode.

<b>Signature:</b>

```typescript
readonly layoutMode$: Observable<string>;
```

<a name="_fb126e1cb4f390cf0235c1b3f98ff9ff2dde9c06b4024c8e8d8fd9e3e2b8a343"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractBaseComponent](#_a3ae08a4d1fc685a1392cd6fd78267badae035acec037905a473e2feddc7c00f) &gt; [renderingContext$](#_fb126e1cb4f390cf0235c1b3f98ff9ff2dde9c06b4024c8e8d8fd9e3e2b8a343)

## AbstractBaseComponent.renderingContext$ property

The rendering context for the page. This is the context of the element that is referenced by the currently active route.

<b>Signature:</b>

```typescript
renderingContext$: Observable<RenderingContextV2>;
```

<a name="_7eedd12acaba6cbc74c5efb788c5bbd3235affb5d1702f6a86afd12c234cb733"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractRenderingComponent](#_1d1b0460995746e35e0c203b0029255d95dfaa000e6da65de40b2958323a671b) &gt; [(constructor)](#_7eedd12acaba6cbc74c5efb788c5bbd3235affb5d1702f6a86afd12c234cb733)

## AbstractRenderingComponent.(constructor)

Our constructor

<b>Signature:</b>

```typescript
constructor();
```

<a name="_185de5aa792cd4bb37ac7242b6fab0674fbd3d2c182b5605b7ca81f51895241f"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractRenderingComponent](#_1d1b0460995746e35e0c203b0029255d95dfaa000e6da65de40b2958323a671b) &gt; [layoutMode$](#_185de5aa792cd4bb37ac7242b6fab0674fbd3d2c182b5605b7ca81f51895241f)

## AbstractRenderingComponent.layoutMode$ property

Returns an Observable for the layout mode

<b>Signature:</b>

```typescript
readonly layoutMode$: Observable<string>;
```

<a name="_b7802dd1400c628fc626bf1eb292853b191dc353d8b759ef3e5011482a1066e3"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractRenderingComponent](#_1d1b0460995746e35e0c203b0029255d95dfaa000e6da65de40b2958323a671b) &gt; [renderingContext$](#_b7802dd1400c628fc626bf1eb292853b191dc353d8b759ef3e5011482a1066e3)

## AbstractRenderingComponent.renderingContext$ property

Returns an Observable for the rendering context

<b>Signature:</b>

```typescript
readonly renderingContext$: Observable<RenderingContextV2>;
```

<a name="_13c6060c1b64ac7b94016974c3f0e1b30b0542a27911c3acf210d7887b6c5de9"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractRenderingComponent](#_1d1b0460995746e35e0c203b0029255d95dfaa000e6da65de40b2958323a671b) &gt; [trackCtx](#_13c6060c1b64ac7b94016974c3f0e1b30b0542a27911c3acf210d7887b6c5de9)

## AbstractRenderingComponent.trackCtx() method

Generates unique IDs for elements using the following strategy: - if the context is a string, use it as the ID - if the context is an element then ... -- if the element contains an 'id' field, use that -- if the element has a '$metadata.id' field, use that -- if the element has a '$metadata.accessor' field, use that -- fall back to the index

<b>Signature:</b>

```typescript
trackCtx(aIndex: number, aCtx: RenderingContextInput): string | number;
```

## Parameters

|  Parameter | Type | Description |
|  --- | --- | --- |
|  aIndex | <code>number</code> | index of the iteration |
|  aCtx | <code>RenderingContextInput</code> | the input |

<b>Returns:</b>

`string | number`

the unique ID


<a name="_13dcf6a1e51eaf4913a921162b0710042d51973d2205bf98cec6305751db2420"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [afterContentChecked$](#_13dcf6a1e51eaf4913a921162b0710042d51973d2205bf98cec6305751db2420)

## AbstractLifeCycleComponent.afterContentChecked$ property

[AfterContentChecked](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
protected get afterContentChecked$(): Observable<void>;
```

<a name="_1f8ac84799047a698f154566b7be845b59432b0e49d7c5185654061147f0e68d"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [afterContentInit$](#_1f8ac84799047a698f154566b7be845b59432b0e49d7c5185654061147f0e68d)

## AbstractLifeCycleComponent.afterContentInit$ property

[AfterContentInit](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
protected get afterContentInit$(): Observable<void>;
```

<a name="_8a32d39e52886016f044ead2db08c14bb3e3a777b91eb26e24f83ed4a4e1e79f"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [afterViewChecked$](#_8a32d39e52886016f044ead2db08c14bb3e3a777b91eb26e24f83ed4a4e1e79f)

## AbstractLifeCycleComponent.afterViewChecked$ property

[AfterViewChecked](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
protected get afterViewChecked$(): Observable<void>;
```

<a name="_df4177b7fcd1ad9077e28acc13dde45e099eeb79f2f99de78dca9a29fe58fb14"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [afterViewInit$](#_df4177b7fcd1ad9077e28acc13dde45e099eeb79f2f99de78dca9a29fe58fb14)

## AbstractLifeCycleComponent.afterViewInit$ property

[AfterViewInit](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
protected get afterViewInit$(): Observable<void>;
```

<a name="_7c8f873cc04d94699b0c279620e88c0830c871be26ef493f83b155329fd12b45"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [doCheck$](#_7c8f873cc04d94699b0c279620e88c0830c871be26ef493f83b155329fd12b45)

## AbstractLifeCycleComponent.doCheck$ property

[DoCheck](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
protected get doCheck$(): Observable<void>;
```

<a name="_05024f7ae59209718ade07eeb6fd5b51f850a61e2a4220bfdbee8807bc773527"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [onChanges$](#_05024f7ae59209718ade07eeb6fd5b51f850a61e2a4220bfdbee8807bc773527)

## AbstractLifeCycleComponent.onChanges$ property

[OnChanges](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
protected get onChanges$(): Observable<SimpleChanges>;
```

<a name="_eab6a011de126866adfafd407a26a052104c61d92369dc0c72484d4f322ea0ef"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [onDestroy$](#_eab6a011de126866adfafd407a26a052104c61d92369dc0c72484d4f322ea0ef)

## AbstractLifeCycleComponent.onDestroy$ property

[OnDestroy](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
protected get onDestroy$(): Observable<void>;
```

<a name="_4deb421c8c13582e093094350e58bccc71917cd9e883a495e94afcf31231d79c"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [onInit$](#_4deb421c8c13582e093094350e58bccc71917cd9e883a495e94afcf31231d79c)

## AbstractLifeCycleComponent.onInit$ property

[OnInit](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
protected get onInit$(): Observable<void>;
```

<a name="_d916b59b00525a44c4432a9b08c926a7743eb2b46e0e4c80932a9ba62d789a91"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [ngAfterContentChecked](#_d916b59b00525a44c4432a9b08c926a7743eb2b46e0e4c80932a9ba62d789a91)

## AbstractLifeCycleComponent.ngAfterContentChecked() method

[AfterContentChecked](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
ngAfterContentChecked(): void;
```
<b>Returns:</b>

`void`


<a name="_acbb352512b4aacd64875a8b51aad9ba7f583e97f589a7917db05ec1d8b431ea"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [ngAfterContentInit](#_acbb352512b4aacd64875a8b51aad9ba7f583e97f589a7917db05ec1d8b431ea)

## AbstractLifeCycleComponent.ngAfterContentInit() method

[AfterContentInit](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
ngAfterContentInit(): void;
```
<b>Returns:</b>

`void`


<a name="_620e6ac6d8f549f7f380541b0899f86e124f68ce62da579b91b00a990d1b1ef2"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [ngAfterViewChecked](#_620e6ac6d8f549f7f380541b0899f86e124f68ce62da579b91b00a990d1b1ef2)

## AbstractLifeCycleComponent.ngAfterViewChecked() method

[AfterViewChecked](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
ngAfterViewChecked(): void;
```
<b>Returns:</b>

`void`


<a name="_042c7dc869a5bd638fa5eaaf01fc098c18fb6c0d743532c73963b3143f89a9e1"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [ngAfterViewInit](#_042c7dc869a5bd638fa5eaaf01fc098c18fb6c0d743532c73963b3143f89a9e1)

## AbstractLifeCycleComponent.ngAfterViewInit() method

[AfterViewInit](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
ngAfterViewInit(): void;
```
<b>Returns:</b>

`void`


<a name="_d0129f22df2b9b263dfee29229eb0dffb5dbab7b63488d38fc665493bac5ae69"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [ngDoCheck](#_d0129f22df2b9b263dfee29229eb0dffb5dbab7b63488d38fc665493bac5ae69)

## AbstractLifeCycleComponent.ngDoCheck() method

[DoCheck](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
ngDoCheck(): void;
```
<b>Returns:</b>

`void`


<a name="_73b8659056aa7e52b652f5f168279e849fcf5133bbd4db15fc704a0034970c6b"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [ngOnChanges](#_73b8659056aa7e52b652f5f168279e849fcf5133bbd4db15fc704a0034970c6b)

## AbstractLifeCycleComponent.ngOnChanges() method

[OnChanges](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
ngOnChanges(changes: SimpleChanges): void;
```

## Parameters

|  Parameter | Type | Description |
|  --- | --- | --- |
|  changes | <code>SimpleChanges</code> |  |

<b>Returns:</b>

`void`


<a name="_4a3eaca012f0a31afae330318f807caed782c711116fb3cf661515a1145b921e"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [ngOnDestroy](#_4a3eaca012f0a31afae330318f807caed782c711116fb3cf661515a1145b921e)

## AbstractLifeCycleComponent.ngOnDestroy() method

[OnDestroy](https://angular.io/guide/lifecycle-hooks)

<b>Signature:</b>

```typescript
ngOnDestroy(): void;
```
<b>Returns:</b>

`void`


<a name="_3a9a3e849bf51c5deac378bbacc626825bd1170122e2eb364a632b6f7aed7cdd"></a>
<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](#_b0fb4187d71bfc581bfeb1603a96d8b2084f1e5bd80d3205d7c9b3ad61466e82) &gt; [@acoustic-content-sdk/ng-utils](#_73aceb21af10eb0215278890ac41671821045973357890d3e7192559400f1693) &gt; [AbstractLifeCycleComponent](#_793bd0a64039e8f578f8bf3adc657b22a4ee176a00cea92e8077358a51c1715c) &gt; [ngOnInit](#_3a9a3e849bf51c5deac378bbacc626825bd1170122e2eb364a632b6f7aed7cdd)

## AbstractLifeCycleComponent.ngOnInit() method

{@<!-- -->linkhttps://angular.io/guide/lifecycle-hooks\| OnInit<!-- -->}

<b>Signature:</b>

```typescript
ngOnInit(): void;
```
<b>Returns:</b>

`void`

---
_Source: https://npm.io/package/@acoustic-content-sdk/ng-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._