node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »


swangular-components alt text

swangular-components is a component library for angular 2.0.0 to render swagger 2.0 documentation.


  • Create CI pipeline using Travis CI
  • Create base module
  • Fix for npm link
  • Add Output to api-swagger for debug purposes on swagger updates
  • Add more validation than just required
  • Finish request builder
  • Add support for security property in swagger 2.0
  • Make scheme selectable for the request if there are more than one
  • Clean up auth service. It's not pretty.
  • Show enumerations of enums.
  • Add support for arrays in dynamic forms
  • Add unit tests
  • Refactor into better components
  • Document more components and have more in depth documentation


npm install swangular-components --save

Changes in systemjs.config.js

  var map = {
    'app':                        'dist',
    '@angular':                   'node_modules/@angular',
    'rxjs':                       'node_modules/rxjs',
    'swangular-components':       'node_modules/swangular-components'
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'swangular-components':       { main: 'index.js', defaultExtension: 'js'}

Import in NgModule

  import { NgModule }       from '@angular/core';
  import { BrowserModule  } from '@angular/platform-browser';
  import { AppComponent }   from './components/app.component';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { SwangularModule } from 'swangular-components';
      declarations: [
      imports:      [
      bootstrap:    [AppComponent]
  export class AppModule {}



error-panel is an optional component that can show errors



api-swagger is the root of the tree. If you use this element, it basically injects a whole swagger page.

<api-swagger url="http://a-valid-swagger/endpoint"></api-swagger>


api-method is for showing what a url-verb combo does, i.e GET - /values

<api-method operation="{{operationObject}}" verb="get" urlTemplate="/values/{id}"></api-method>


api-model is for showing the schema and example of a request or response model

<api-model schema="{{schemaObject}}"></api-swagger>


There are a couple of injectable providers that can be used.


SwaggerService should be used to make a request to a swagger 2.0 endpoint.


Any errors reported into this service get put into the error panel.