Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

10.25.3 • Public • Published

dnn-sxc-angular - Connecting Angular to DNN and/or 2sxc

This is a connector for angular 8+ (git | web) for developers using

  1. the open source platform DNN 7+ (git | web)
  2. and/or the open source CMS 2sxc 10+ (git | web)

This connector does

  1. allows you to develop from local while running with hot-reload on a DNN, even on the production site
  2. automatically provides all important dnn-parameters (module ID, security token, etc.) to angular
  3. adds an Http Interceptor for the HttpClient which automatically applies these parameters to all requests
  4. gives you quick commands like data.query$ to get data with little effort from the server
  5. prevents the enter-key from causing DNN form submits (optional, you can override this)

It uses observables to make it happen, thereby avoiding timing / async problems common in this scenario.

Setup & Discover Dnn-Sxc-Angular

It's published on npm, so the most common way is to get it using npm with npm install "" --save. But we recommend that you follow the quick-start guide.

  1. Start discovery using the tutorial app - ideally using the getting started recipe
  2. If you've already mastered the basics and wish to build your own, you can
    1. Rename the tutorial app and continue working with that
    2. or modify an existing app to work with the same conventions

How To Use

Using WebAPIs inside DNN

This will now work automatically, because all headers etc. are now automatically added by the system. So just use your normal http-requests and everything works like magic :)

Using 2sxc Content-Items, Queries and APIs

This package contains a Data object, which provides 3 observable streams

  • content$
  • query$
  • api$

To use them, best check out the tutorial app or simply work through TypeScript intelisense - we documented all the commands.

Getting ModuleId, TabId, etc. and the sxc Instance

There is a Context object which provides these properties as streams (observables). Just inject Context and access it from there. Note that you almost never need this, as the HttpClient is already configured and ready to go, including the headers it needs.

  • moduleId$
  • tabId$
  • sxc$
  • etc. (there are about 3 more...)

Internal Notes


  • enhance the content-manager to provide write commands (ATM read-only)




npm i

DownloadsWeekly Downloads






Unpacked Size

154 kB

Total Files


Last publish


  • avatar
  • avatar
  • avatar