Skip to main content
Home  ›  Blog

New App: Directory / Showcase (DNN + Angular 4)

This App can be used for directories or showcases, and you can use it as the foundation to build anything else. It uses Angular 4 best practices and is the ideal place to start learning Angular.

The Directory App

This is what it looks like: 

End User Features

  1. Responsive, tile view of logos/images
  2. Super-fast, everything is AJAX
  3. Mouseover shows more details
  4. link on each tile
  5. The user can search
  6. ...filter by category / industry
  7. and filter by starting letter
  8. ...only letters which have items shine green

Some Screenshots


Admin / Content-Editor Features

  • Uses standard 2sxc content-items to manage the content, incl. drag-drop image upload and more. 
  • in-Angular hover toolbars to edit, add, delete content
  • Multi-language content...
  • ...and multi-language resources (labels like "Search" / "Suche", etc.)
  • SEO-URLs for all filters
  • Versioned / draft content as you need it

Developer Features

  1. Built using Angular 4
  2. Ideal demo for dnn-sxc-angular, as it shows how to perfectly integrate an Angular SPA into DNN
  3. Uses reactive development paradigms - which you should really learn (see also the post which explains how dnn and angular connect)
  4. Styling uses Bootstrap 3 and SASS
  5. Full source code included...
  6. and MIT licensed - so you can enhance it any way you want to

Get it Now!

Download it from the app-catalog or browse the code on Github.

Love from Switzerland,
Daniel & Christoph

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler