How to Embed Swagger UI into Angular

Swagger UI is a popular tool that allows you to visualize and interact with APIs defined using the OpenAPI Specification (OAS). Integrating Swagger UI into an Angular application can greatly enhance the developer experience by providing a user-friendly interface to explore and test APIs. In this blog post, we’ll walk through the steps to embed Swagger UI into an Angular project.

Prerequisites:

Basic understanding of Angular.
An existing Angular project.

Install Swagger UI Package

npm i swagger-ui-dist

This module, swagger-ui-dist, exposes Swagger-UI's entire dist folder as a dependency-free npm module. Use swagger-ui instead, if you'd like to have npm install dependencies for you.

SwaggerUIBundle and SwaggerUIStandalonePreset can be imported:

import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist";

Add the code in ngOninit section

SwaggerUIBundle({
  urls: [
    {
      name: "V1",
      url: "https://fakerestapi.azurewebsites.net/swagger/v1/swagger.json",
    },
    {
      name: "V2",
      url: "https://petstore.swagger.io/v2/swagger.json",
    },
  ],
  domNode: document.getElementById("swagger-ui"),
  deepLinking: true,
  presets: [SwaggerUIBundle["presets"].apis, SwaggerUIStandalonePreset],
  layout: "StandaloneLayout",
});

Put this code to html file
<div id="swagger-ui"></div>

Link css in angular.json file styles section
"node_modules/swagger-ui-dist/swagger-ui.css"

OUTPUT

Conclusion

Integrating Swagger UI into your Angular application provides a user-friendly way to visualize and interact with your APIs. By following these steps, you can seamlessly embed Swagger UI and enhance the developer experience when working with your APIs. Whether you’re building internal tools or exposing APIs to third-party developers, Swagger UI within Angular can streamline the process and improve documentation and testing.

Remember to keep your Swagger UI version updated and stay informed about changes in the Angular ecosystem for a smooth development experience.

Happy Coding!