Adding the Swagger Editor to an Angular project

You can use swagger-editor-dist package to achieve this.

npm i swagger-editor-dist --save

After you install the dependency, you have to include the required scripts and css file. You can do that in angular.json file

"styles": [
   "node_modules/swagger-editor-dist/swagger-editor.css",
   "src/styles.css"
 ],
"scripts": [
   "node_modules/swagger-editor-dist/swagger-editor-bundle.js",
   "node_modules/swagger-editor-dist/swagger-editor-standalone-preset.js"
 ]

Next step is to prepare the html where you want to put the editor. Pick any of your components and add

<div id="swagger-editor"></div>

Final step is to instantiate the editor to that div. In the same component, add this

declare const SwaggerEditorBundle: any;
declare const SwaggerEditorStandalonePreset: any;
....
....
ngOnInit(): void {
  const editor = SwaggerEditorBundle({
    dom_id: '#swagger-editor',
    layout: 'StandaloneLayout',
    presets: [
      SwaggerEditorStandalonePreset
    ],
    url: 'http://rackerlabs.github.io/wadl2swagger/openstack/swagger/dbaas.json'
  });
}

I also created an example app for this.

Feel free to checkout my Github Repo - Swagger Editor Angular 8