Integrating Privacy Notices with Angular Applications

The first time you publish a notice, an integration code snippet will be generated that allows you to implement the notice across your Angular sites. Angular is a TypeScript-based front-end web framework created and maintained by Google. Angular applications are designed to be single-page applications (SPAs), meaning they load a single HTML page and dynamically update the content as the user interacts with the application without needing to reload the entire page.

Since Angular is a single-page application, you cannot directly copy the integration SDK and add the required component's html. Follow the steps outlined below to use the integration SDK in an Angular application.

To integrate privacy notices with Angular applications

  1. On the Privacy Notice Management menu, select Privacy Notices. The Privacy Notices screen appears.
    Note:

    If you own the Policy Management module, the menu will be named Policy.

  2. Click the link in the Name column for the privacy notice you want to integrate. The Privacy Notice Details screen appears.

  3. Navigate to the Integration tab.
  4. Copy the div container highlighted below and paste it into the component template (html), where the privacy notice content should be displayed.


  5. Use the approach below in the components typescript.
    JAVASCRIPT 
    // type declaration for Onetrust
declare const OneTrust: {
  NoticeApi: {
    Initialized: Promise<boolean>;
    LoadNotices: (urls: string[]) => Promise<void>;
    UnloadNoticeStyles: () => number;
  };
};

@Component({
  selector: 'privacy-notice',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy{

ngOnInit(){
// implementation to include otnotice script and fetch notce content
    const scriptTag = document.createElement("script");
    scriptTag.setAttribute("src","{{script-url}}/otnotice-1.0.min.js");  // update script url based on integration sdk 
    scriptTag.setAttribute("id","otprivacy-notice-script");
    scriptTag.setAttribute("settings","{{settings-value}}");    //update settings value from integration sdk
    scriptTag.onload = () => {
      OneTrust.NoticeApi.Initialized.then(() => {
            OneTrust.NoticeApi.LoadNotices(["notice-url"]); // update notice-url from integration sdk
        });
    }
    document.getElementsByTagName('head')[0].appendChild(scriptTag);
}

ngOnDestroy(){
// removing the notice script from the html
  if(typeof OneTrust !== 'undefined')
    {
      OneTrust.NoticeApi.UnloadNoticeStyles();
    }  
  const scriptElement = document.getElementById("otprivacy-notice-script");
  if(scriptElement)
    {
      scriptElement.remove();
    }
}
}