@dataunlocker/defender-angular

Angular integration for DataUnlocker Defender. This package provides a standalone component to protect your Angular application from content blockers using DataUnlocker.

Installation

Before installing this package, you need to set up the DATAUNLOCKER_ID environment variable.

Setting up DATAUNLOCKER_ID

You can set the environment variable in one of the following ways:

Option 1: Using .npmrc file

Create a .npmrc file in your project root:

DATAUNLOCKER_ID=your_dataunlocker_id_here

Option 2: Using environment variable

Set the environment variable before installing the package:

# For Unix/Linux/macOS
export DATAUNLOCKER_ID=your_dataunlocker_id_here

# For Windows (Command Prompt)
set DATAUNLOCKER_ID=your_dataunlocker_id_here

# For Windows (PowerShell)
$env:DATAUNLOCKER_ID="your_dataunlocker_id_here"

You can also provide DATAUNLOCKER_ID in your deployment pipeline or build cloud environment.

Installing the library

After setting up the environment variable, install the library:

npm install @dataunlocker/defender-angular

Usage

1. Import the Component

Import DefenderComponent in your root layout:

import { DefenderComponent } from "@dataunlocker/defender-angular";

@Component({
  imports: [DefenderComponent],
  // ...
})
export class AppComponent {}

2. Wrap your app with Defender

Add <defender> as a top-level wrapper component on your app.

<defender>
  <!-- Your protected content goes here -->
  <div>This is your web application code</div>
</defender>

Defender slightly changes how your app is rendered, and introduces an extra <div> around your app's content. You can style this <div> any way you want.

You can also listen to loaded and errored events of Defender, either with @dataunlocker/defender-angular binding or from the base package @dataunlocker/defender. You can init your app or tracking code on the loaded event, but mind that placing code in DataUnlocker's Secure Enclave gives you a better protection against blockers.

<!-- (loaded) accepts data returned by Secure Enclave, (errored) accepts error code -->
<defender
  (loaded)="onLoad($event)"
  (errored)="onError($event)">
  ...
</defender>

Examples

With Navigation

<defender>
  <nav>
    <!-- Navigation content -->
  </nav>
  <main>
    <router-outlet></router-outlet>
  </main>
</defender>

Support

For issues and feature requests, please feel free to open the issue at @dataunlocker/defender-angular or contact DataUnlocker support.