DEV Community: Sudhakar George

Integrating sg-autocomplete Component

Sudhakar George — Mon, 03 Mar 2025 22:39:49 +0000

What is the sg-autocomplete Component?

The sg-autocomplete component is a user interface element that functions like a text input field. As the user types, it dynamically suggests relevant options from a predefined JSON list, allowing them to quickly select a matching value instead of typing the full term manually.

You can configure it with any elements from the JSON file.

You can navigate the autocomplete dropdown using the mouse or tab key from the keyboard.

Getting Started

Use the below command to add your package in your application

npm i sg-autocomplete

You can consume it in your application as shown below:

<sg-autocomplete autotext="JSON-ELEMENT-NAME"></sg-autocomplete>

Say, for Example, if your JSON element is like this

{
    url: "https://cdn-icons-png.flaticon.com/512/1804/1804486.png", 
    title: "URL", 
    description:"URL"
  },
  {
    url: "https://i.ibb.co/7XqwsLw/fox.jpg",
    title: "Fox", 
    description:"Fox"
 },

If you want to add "description" to the autocomplete suggestion list, you can do so like this

sg-autocomplete autotext="description"></sg-autocomplete>

Options

Examples

Usage

Now, we will see how to integrate this library into your applications.

a) Vanilla JavaScript

You can include the component in your HTML file in two ways:

1. Using a CDN:

Add a tag in your HTML file's , pointing to the component's JavaScript file hosted on a CDN.

For example:

<script src="https://cdn.jsdelivr.net/npm/sg-autocomplete/dist/sg-autocomplete/sg-autocomplete.js"></script>

2) Using ES Modules:
If you prefer to use ES Modules, you can import the component using an import statement:

 <script type="module">
   import { defineCustomElements } from './dist/sg- 
   autocomplete/loader/index.es2017.mjs';
   defineCustomElements();
 </script>

Make sure to adjust the paths according to your project structure.

Use the component in your HTML:

You can now use the component in your HTML like any other HTML element:
Code

 <sg-autocomplete autotext="description" dropdown=true >
</sg-autocomplete>

Interact with the component using JavaScript:

Example of setting the JSON data:

 const autocompleteLst = [
        {url: "https://cdn-icons-png.flaticon.com/512/1804/1804486.png", title: "URL", description:"URL"},
        {url: "https://i.ibb.co/dBCHzXQ/paris.jpg", title: "Paris Eiffel", description:"Paris Eiffel"},
        {url: "https://i.ibb.co/JKB0KPk/pizza.jpg", title: "Pizza Time", description:"Pizza Time"},
        {url: "https://i.ibb.co/VYYPZGk/salmon.jpg", title: "Salmon ", description:"Salmon"},
      ];
      document.querySelector('sg-autocomplete').suggestionlist = autocompleteLst

You can access and manipulate the component using standard DOM APIs:

 const input = document.querySelector('#sg-autocomplete');

Handling Events:

  input.addEventListener('click', function(event) {
  // Code to execute when the button is clicked
     console.log('Input Value:'+ event.target.value);
 });

  input.addEventListener("keydown", (e) => {
     console.log(e.key+'Input Value keydown:'+ e.target.value);
  });

b) Angular

Step 1: Add an import to main.ts

import { defineCustomElements} from '../node_modules/sg-autocomplete/loader';

And somewhere near the bottom, we'll call this function.

defineCustomElements();

Step 2: Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

and then

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Please Note: schemas [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.

Step 3: Declare the arrayData: In your Angular component's TypeScript file, declare the arrayData that you are passing.

 arrayData  =[{"url": "https://i.ibb.co/10fFGkZ/car-race.jpg", "title": "Car Racing", "description":"Car Racing"} , 
    {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
    {"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"}];
  autotext  =this.arrayData ;

Now, Set the array data value to the sg-autocomplete component

 ngOnInit() {
     const myElement = this.el.nativeElement.querySelector('sg-autocomplete');
      if (myElement) {
        myElement.suggestionlist =this.autotext;
      }
    }

Step 4: Now, in app.component.html you utilize your new custom element.

   <sg-autocomplete autotext="description" dropdown=true></sg-autocomplete>

Note: Here, "description" is the JSON element name that will show it as a drop-down suggestion list.

Step 5: To consume the autocomplete value, you can create a function to access it like this

 getValue() {
      const autocompleteValue = this.el.nativeElement.querySelector('sg-autocomplete') as HTMLInputElement;
    }

c) React

Step 1:
Now we'll add an import to index.js

import { defineCustomElements} from '../node_modules/sg-autocomplete/loader';

And somewhere near the bottom, we'll call this function.

defineCustomElements();

Step 2:
Next, in app.js Pass the json array and utilize the new custom element,

function App() {
  const arrayData  =[{"url": 
    {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
    {"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"},
    {"url": "https://i.ibb.co/7XqwsLw/fox.jpg", "title": "Fox", "description":"Fox"},
    ];

  const myElement = useRef(arrayData);
    useEffect(() => {
      if (myElement.current) {
        const element = myElement.current;
        document.querySelector('sg-autocomplete').suggestionlist = element;
      }
    }, []);
  return (
    <div>
          <sg-autocomplete autotext="description" dropdown="true"></sg-autocomplete>
    </div>
  );
}

d) Vue

Add defineCustomElements to one of our main files. Specifically main.js for Vue.

import { defineCustomElements} from '../node_modules/sg-autocompleter/loader';

And somewhere near the bottom, we'll call this function.

defineCustomElements();

Next, in App.Vue, you consume the custom element.

<template>
  <div>
  <sg-autocomplete autotext="description" dropdown="true"></sg-autocomplete>
  </div>
</template>

<script>
    export default {
      data() {
        return {
        arrayData:[
            {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
            {"url": "https://i.ibb.co/VYYPZGk/salmon.jpg", "title": "Salmon ", "description":"Salmon"},
            {"url": "https://i.ibb.co/10fFGkZ/car-race.jpg", "title": "Car Racing", "description":"Car Racing"}  
           ]
      }
   },
    mounted() {
      document.querySelector('sg-autocomplete').suggestionlist = this.arrayData;
    }
};
</script>

Click Here for Vue application live demo.

Hope this article is useful to you and your project. If you like this article, like & share it with your friends.

Follow Me for more articles.

Integrating sg-image-viewer component in Angular, Vue and React Application

Sudhakar George — Fri, 24 Jan 2025 02:43:47 +0000

Integrating sg-image-viewer component

Sudhakar George ・ Jan 24

#angular #react #vue #webcomponents

Integrating sg-image-viewer component

Sudhakar George — Fri, 24 Jan 2025 02:30:56 +0000

What is sg-image-viewer?

An "image viewer component" is used to view multiple images in a gallery-like format, allowing users to easily switch between related pictures.
The image viewer component seamlessly integrates with the rest of the application, it directly access the data from the application's in JSON format.
Overall, the tight integration of the image viewer component with the application's core infrastructure ensures a fast, reliable, and scalable solution for image rendering and management.

In this article we will go over how to integrating sg-image-viewer component with Angular, React and Vue Applications in detail.

Getting Started
Use the below command to add your package in your application

npm i sg-image-viewer

You can consume it in your application as shown below:

<sg-image-viewer imageList='IMAGE_JSON_DATA_LIST' ></sg-image-viewer>

Please note your can provide your list of images as the imageList value which returns as JSON Array. Your JSON Array looks something like this. It has 3 properties url, title and description.

[
 {
   "url": "https://i.ibb.co/gM5NNJX/butterfly.jpg",
    "title": "Butterfly",
    "description":"Butterfly"
  },
  {
   "url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg",
   "title": "Coffee with Milk", 
    "description":"Coffee with Milk"
   },
];

Options :

Please find the complete options avaliable for the user to configure it based on their needs.

Pagniation will be added at the bottom as default. Default page size is 10 per page

Examples:

1. Integrating with Angular Application

Step 1: Adding the component

Go to your root folder of your angular application and use the below command to add the package.

npm i sg-image-viewer

Your package.json will be updated with the component as shown below.

Step 2: Adding the Custom Elements in main.js

Add an import to main.ts

import { defineCustomElements} from '../node_modules/sg-image-viewer/loader';

And somewhere near the bottom we’ll call this function.

defineCustomElements();

your main.js file looks like this

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { defineCustomElements} from '../node_modules/sg-image-viewer/loader';

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZoneEventCoalescing: true
})
  .catch(err => console.error(err));
  defineCustomElements();

Step 3: Adding the Custom Elements Schema in your module

Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

and then

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.

Step 4: Declare the imageList data
In your Angular component's TypeScript file, declare the arrayData that you are passing. I am adding it in app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular-webcomponent';
  arrayData  =[{"url": "https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg","title": "Horse", "description": "Horse"}, 
    {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
    {"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"},
    {"url": "https://i.ibb.co/7XqwsLw/fox.jpg", "title": "Fox", "description":"Fox"},
    {"url": "https://i.ibb.co/L1m1NxP/girl.jpg", "title": "Mountain Girl", "description":"Mountain Girl"},
    {"url": "https://images.pexels.com/photos/1559117/pexels-photo-1559117.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "title": "Winter", "description":"Winter"},
    {"url": "https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg", "title": "Koi Fish", "description":"Koi Fish"},
    {"url": "https://i.ibb.co/dBCHzXQ/paris.jpg", "title": "Paris Eiffel", "description":"Paris Eiffel"},
    {"url": "https://i.ibb.co/JKB0KPk/pizza.jpg", "title": "Pizza Time", "description":"Pizza Time"},
    {"url": "https://i.ibb.co/VYYPZGk/salmon.jpg", "title": "Salmon ", "description":"Salmon"},
    {"url": "https://i.ibb.co/10fFGkZ/car-race.jpg", "title": "Car Racing", "description":"Car Racing"}  
    ];

  imageList  =this.arrayData ;
}

Step 5: Consume it in your Html file.

Now, in app.component.html add the sg-image-viewer component.

<sg-image-viewer  [imageList]="arrayData" mode="carousel"  gallery-style="frame"></sg-image-viewer>

your output will be like this

2. Integrating with React Application

Step 1: Adding the component

Go to your root folder of your angular application and use the below command to add the package.

npm i sg-image-viewer

Step 2: Now we'll add an import to _index.js

import { defineCustomElements} from '../node_modules/sg-image-viewer/loader';

And somewhere near the bottom we'll call this function.

defineCustomElements();

Step 3: Next, in app.js Pass the json array and utilize the new custom element,

function App() {
  const arrayData  =[{"url": 
    {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
    {"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"},
    {"url": "https://i.ibb.co/7XqwsLw/fox.jpg", "title": "Fox", "description":"Fox"},
    ];
  return (
    <div className="App">
       <sg-image-viewer imageList={arrayData}></sg-image-viewer>
    </div>
  );
}

your output will be like this

3. Integrating with Vue Application

Step 1: Adding the component

Go to your root folder of your angular application and use the below command to add the package.

npm i sg-image-viewer

Step 2: Add defineCustomElements to one of our main files. Specifically main.js for Vue.

import { defineCustomElements} from '../node_modules/sg-image-viewer/loader';

And somewhere near the bottom we'll call this function.

defineCustomElements();

Step 3: Next, in App.Vue you consume the custom element.

<template>
  <div>
   <sg-image-viewer :image-list="JSON.stringify(arrayData)" 
      gallery-style="flexbox" header="true" header-title="sg-image- 
      viewer" isvue></sg-image-viewer> 
  </div>
</template>

<script>
export default {
  data() {
    return {
  arrayData:[{"url": "https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg","title": "Horse", "description": "Horse"}, 
    {"url": "https://i.ibb.co/gM5NNJX/butterfly.jpg", "title": "Butterfly", "description":"Butterfly"},
    {"url": "https://i.ibb.co/ygqHsHV/coffee-milk.jpg", "title": "Coffee with Milk", "description":"Coffee with Milk"},
    {"url": "https://i.ibb.co/7XqwsLw/fox.jpg", "title": "Fox", "description":"Fox"},
    {"url": "https://i.ibb.co/L1m1NxP/girl.jpg", "title": "Mountain Girl", "description":"Mountain Girl"},
    {"url": "https://images.pexels.com/photos/1559117/pexels-photo-1559117.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "title": "Winter", "description":"Winter"},
    {"url": "https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg", "title": "Koi Fish", "description":"Koi Fish"},
    {"url": "https://i.ibb.co/dBCHzXQ/paris.jpg", "title": "Paris Eiffel", "description":"Paris Eiffel"},
    {"url": "https://i.ibb.co/JKB0KPk/pizza.jpg", "title": "Pizza Time", "description":"Pizza Time"},
    {"url": "https://i.ibb.co/VYYPZGk/salmon.jpg", "title": "Salmon ", "description":"Salmon"},
    {"url": "https://i.ibb.co/10fFGkZ/car-race.jpg", "title": "Car Racing", "description":"Car Racing"}  
    ]
  }
};
</script>

your output will be like this

Click Here for Vue application live demo.

Hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.

tooltip component

Sudhakar George — Tue, 17 Dec 2024 15:57:11 +0000

Integrating sg-tooltip in Angular Project

Sudhakar George ・ Dec 17 '24

Integrating sg-tooltip in Angular Project

Sudhakar George — Tue, 17 Dec 2024 15:34:46 +0000

What is an Tooltip Component?

A tooltip component is a user interface (UI) element that displays extra information when a user interacts with a specific object, such as a button, icon, or text link. Tooltips are useful for providing more clarity to the user and can be used to describe the function of an element.

Here are the sg-tooltip Component options:

Animation Options:

sg-tooltip component integration in Angular Application

Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.

 npm i sg-tooltip

Your package.json will be updated with the component as shown below.

Step2: Configure the main.js file

Add an import to main.js

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

And somewhere near the bottom, we’ll call this function.

defineCustomElements();

your main.js file looks like this

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

import { defineCustomElements} from '../node_modules/sg-tooltip/loader';

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZoneEventCoalescing: true
})
  .catch(err => console.error(err));
  defineCustomElements();

Step3: Update the app.module.ts file

Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;
and then

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.

Step 4: Consume it in your Html file.

Now, in app.component.html add the sg-tooltip component.

<sg-tooltip tooltip-text="Hover the Text" tooltip-title="Basic Tooltip"></sg-tooltip>

Click Here for live Demo.

Conclusion:

This sg-tooltip component have different options, you can configure it based on your project needs.

Hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.

Integrating sg-json-table component with Angular Application

Sudhakar George — Thu, 21 Nov 2024 16:10:34 +0000

What is sg-json-table Component ?

This component is used to load the data from the API returning JSON Array.

You just need to provide the data-url which returns JSON Array, It will load and display table with pagination, search, print options. You can also customize the options and themes based on your needs.

I created an sg-json-table component, devloper just need to use the tag and configure it based on their needs.

In this article we will go over how to integrating sg-json-table component with Angular Application in detail.

Getting Started

Use the below command to add your package in your application

npm i sg-json-table

you can consume it in your application as shown below:

<sg-table data-url='YOUR_API_URL' ></sg-table>

Please note your can provide your API URL as the data-url value which returns as JSON Array. Your JSON array looks like this

[
  {
    "name": "Adeel Solangi",
     "id": "V59OF92YF627HFY0",
  },
  {
    "name": "Afzal Ghaffar",
     "id": "ENTOCR13RSCLZ6KU",
  }]

Options :

You can find the complete options avaliable for the user to configure it based on their needs.

Examples :

Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.

npm i sg-json-table

Your package.json will be updated with the component as shown below.

Step 2: Adding the Custom Elements in main

Add an import to main.ts

import { defineCustomElements} from '../node_modules/sg-json-table/loader';

And somewhere near the bottom we'll call this function.

defineCustomElements();

Please Note: If you are using multiple component then you can define the defineCustomElements as shown below:

import { defineCustomElements as defineCustomElements1} from '../node_modules/sg-copyright/loader';
import { defineCustomElements as defineCustomElements2} from '../node_modules/sg-avatar/loader';
import { defineCustomElements as defineCustomElements3} from '../node_modules/sg-table/loader';
.
.
.
defineCustomElements1();
defineCustomElements2();
defineCustomElements3();

Step 3: Adding the Custom Elements Schema in your module

Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

and then

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})export class AppModule { }

Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.

Step 4: Consume it in your Html file.
Now, in app.component.html add the sg-avatar component.

<sg-table data-url='https://microsoftedge.github.io/Demos/json-dummy-data/128KB.json'info='true' paging="true">
</sg-table>

Click Here for live example

Conclusion:
This sg-json-table component have different options, you can configure it based on your project needs.

Hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.

Integrating sg-avatar Component in Angular Application

Sudhakar George — Thu, 14 Nov 2024 15:00:41 +0000

What is an Avatar Component?

An avatar component is a user interface (UI) element that displays visual or textual content to represent a user’s identity. Avatars can be used to display information about a user in various places, such as menus, tables, and chats.

I created an avatar component, devloper just need to use the tag and configure it based on their needs.

In this article we will go over how to integrating sg-avatar component with Angular Application in detail.

sg-avatar component integration in Angular Application

Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.

npm i sg-avatar

Your package.json will be updated with the component as shown below.

Step2: Configure the angular.json file

Now you need to configure the angular.json file. You’ll add this configuration under the projects > yourProjectName > architect > build > options > assets section:

"input": "node_modules/sg-avatar/dist/components/assets/",
"output": "/assets/"

Your angular.json should look like this:

Please note that this will copy the images from the avatar component and place it in your application build folder. If you are not going to use male and female images then you can skip this step.

Step 3: Adding the Custom Elements in main

Add an import to main.ts

import { defineCustomElements} from '../node_modules/sg-avatar/loader';

And somewhere near the bottom we’ll call this function.

defineCustomElements();

Please Note: If you are using multiple component then you can define the defineCustomElements as shown below:

import { defineCustomElements as defineCustomElements1} from '../node_modules/sg-copyright/loader';
import { defineCustomElements as defineCustomElements2} from '../node_modules/sg-avatar/loader';
.
.
.
defineCustomElements1();
defineCustomElements2();

Step 4: Adding the Custom Elements Schema in your module

Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from@angular/core;

and then

schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please Note: schemas: [ _CUSTOM_ELEMENTS_SCHEMA _] need to be added to each component where you are using custom HTML tags.

Step 5: Consume it in your Html file.

Now, in app.component.html add the sg-avatar component.

Conclusion:

This sg-avatar component have different options, you can configure it based on your needs.

Options

Example:

Hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.

Integrating Stencil Web Components in Angular Project

Sudhakar George — Tue, 05 Nov 2024 02:57:34 +0000

Web Components is a suite of different technologies allowing you to create reusable custom user interface components.

In this article, we’ll explore how to create custom Web Components using Stencil.js and integrate them into Angular applications.

What is Stencil.js?
Stencil is an open-source compiler that generates standards-compliant web components. It builds highly performant, reusable components that can be used with any JavaScript framework or library. Created by the Ionic team, Stencil combines the best features of popular frameworks like Angular, React, and Vue, providing a simple and efficient way to build custom elements.

Advantages of Stencil Components

Stencil provides some syntactic sugar with TSX (JSX with TypeScript), which makes it much easier to build web components with cleaner, reduced code.
Stencil’s compiler performs static analysis on each component to customize the build. This results in a highly optimized runtime with minimal size
Stencil will automatically polyfill modern browser features and APIs for browsers that don’t support them.
Stencil uses APIs built directly within the browser instead of writing custom client-side JavaScript

# Creating a Stencil Project :

Step 1: Install Stencil CLI

First, we need to set up the stencil CLI globally. Go to your terminal and run the below command:

npm install -g @stencil/core

Step 2: Create a new Stencil Project

To create a new Stencil Project, Go to the desired folder location and run the below command:

npm init stencil

When you run the above command, it will be prompted to select the project type, Please select the component and provide a project name.

? Select a starter project.

Starters marked as [community] are developed by the Stencil Community,
rather than Ionic. For more information on the Stencil Community, please see
https://github.com/stencil-community » - Use arrow-keys. Return to submit.
>   component                Collection of web components that can be used anywhere
    app [community]          Minimal starter for building a Stencil app or website
    ionic-pwa [community]    Ionic PWA starter with tabs layout and routes

Step 3: Install Dependencies

Navigate to your stencil project location (cd your-stencil-project) and install the dependencies as shown below

npm install

Once the dependencies are installed, run the below command to make sure the Stencil project is running correctly.

 npm start

Go to this location and check your output http://localhost:33333

Creating a Web Components :

Now let’s create a custom Web Component. For this example, we’ll create a simple Button component.

Step 1: Generating a new Component

Go to your project location in the terminal and execute the below command to generate a new component:

npm run generate

You’ll be prompted to enter the name of your component. For this article, we name the button component as “new-button”. Enter the component name and press Enter.

> my-stencil-project@0.0.1 generate
> stencil generate

[38:18.7]  @stencil/core
[38:19.1]  v4.22.1
√ Component tag name (dash-case): ... new-button
√ Which additional files do you want to generate? » Stylesheet (.css), Spec Test  (.spec.tsx), E2E Test (.e2e.ts)

$ stencil generate new-button

The following files have been generated:
  - src\components\new-button\new-button.tsx
  - src\components\new-button\new-button.css
  - src\components\new-button\test\new-button.spec.tsx
  - src\components\new-button\test\new-button.e2e.ts

New components will be added to your project.

Step 2: Define the Component

Go to your generated component file location(src/components/new-button/new-button.tsx) and define your component as shown below:

import { Component, h,  Prop } from '@stencil/core';

@Component({
  tag: 'new-button',
  styleUrl: 'new-button.css',
  shadow: true,
})
export class NewButton {
  @Prop() text: string; 
   render() {
    return (
      <button>
         {this.text}
      </button>
    );
  }
}

Note:

@Prop decorator lets you create parameters with access to component attributes.

Step 3: Add Styles

Add some basic styles to your component in the new-button.css file:

button {
  background-color: #0056b3;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color:#1500ffde; 
}

Step 4: Build Your Component

Build your component by running:

npm run build

Step 5: Test your Component

You can test your component by adding the component name to your index.html

<new-button text="My First Component"></new-button>

Here text is the label name of your button component.

Your index.html file looks like this:

<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
    <title>Stencil Component Starter</title>

    <script type="module" src="/build/my-stencil-project.esm.js"></script>
    <script nomodule src="/build/my-stencil-project.js"></script>
  </head>
  <body>
    <new-button text="My Component"></new-button>
  </body>
</html>

Now, run the below command and check the output in your browser (http://localhost:33333)

You can find the complete source code on GitHub

# Integrating Web Components into Angular Application
Now that our custom Web Component is built with Stencil.js, let’s integrate it into an Angular application. For this article, we are using Angular v18.

We can integrate the Stencil Web Components in different ways.

You can publish your web component as an NPM package and configure the dependency in your angular application.
You can manually copy and paste the web components into your angular application and configure it based on it.
You can directly integrate your stencil project into the angular application.

In this article, We are going to integrate your stencil project directly into the angular applicaion.

Create an Angular Application

Step 1: Set Up the Environment

Go to your terminal and install the Angular command-line interface (CLI). This will help you get up and running quickly with Angular:

npm install -g @angular/cli

Step 2: Create a New Angular Project

Once Angular CLI is installed, you can use it to create a new Angular project. Navigate to the directory where you want to create your project and run the following command:

ng new stencil-angularapp --standalone=false

Step 3: Add the Stencil Project as depedency in Angular Application.

Now, We are going to add the stencil project in our Angular Application as a depedency.

Open your tsconfig.json from your angular project (stencil-angularapp) and include relative path of your Stencil Project under compilerOptions like below.

    "paths": {
         "@web-components/*": ["../my-stencil-project/*"]
     }

Now create a folder called /libs/stencil-generated under the src folder this is where we will use the typescript path feature for keeping the stencil project as its dependency.

Now add an angular module from we will export our components inside this libs directory like below, We are creating a module calledweb-components.module.ts

We are done with the basic configuration, Now we need to configure the stencil project to copy the component into the angular application.

Adding the Angular Output Target
Go to your stencil project and Install the @stencil/angular-output-targetdependency to your Stencil component library package.

npm install @stencil/angular-output-target --save-dev

In your project’s stencil.config.ts, add the angularOutputTarget configuration to the outputTargets array:

import { Config } from '@stencil/core';
// New Import
import { angularOutputTarget, ValueAccessorConfig  } from '@stencil/angular-output-target';

// props binding
const angularValueAccessorBindings: ValueAccessorConfig[] = [];

export const config: Config = {
  namespace: 'my-stencil-project',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
      customElementsExportBehavior: 'auto-define-custom-elements',
      externalRuntime: false,
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
    // Newly Added Target
    angularOutputTarget({
      componentCorePackage: '', // Update the path
      directivesProxyFile: '', // Update the path
      valueAccessorConfigs: angularValueAccessorBindings,
    })
  ],
  testing: {
    browserHeadless: "new",
  },
};

Now update angularOutputTarget with relative paths of your angular application.

angularOutputTarget({
      componentCorePackage: '@web-components/dist/components', 
      directivesProxyFile: './../stencil-angularapp/src/libs/stencil-generated/proxies.ts', 
      valueAccessorConfigs: angularValueAccessorBindings,
    })

Now, build the stencil project with the following command.

npm run build

Once the build is successful you would see the stencil-generated folder in your angular application is populated with some files.

If you notice because of our tsconflg.json settings, angular is able to know what @web-components/dist/components is referring to.

Consume the webcomponent in your Angular Application

Now we will see how to consume the webcomponents in our Application

Step 1: Registering Custom Elements

update the web-components.module.ts with our component definition in the declarations and exports block.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Added for Component Rendering
import {defineCustomElements} from '@web-components/loader';
import { NewButton } from './stencil-generated/proxies';

defineCustomElements(window);  // Added for rendering the component 
                                  in the browser


@NgModule({
  declarations: [NewButton],   // Declare the Webcomponent
  imports: [
    CommonModule
  ],
  exports: [NewButton]        // Ecport the Webcomponent         
})
export class WebComponentsModule { }

Please note that *declareCustomElements *(not declareCustomElement) is used to initate the loader to load the custom web component , This line is very important without which the browser would render nothing.

Step2 : Update your Angular component

Now , we are going to consume the web components in our angular application module and HTML file.

Update your app.module.ts by importing the WebComponentsModuleas shown below:

import { WebComponentsModule } from '../libs/web-components.module'; // Add webcomponent

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    WebComponentsModule   // Import it here 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now update app.component.html to consume your webcomponent.

  <div class="content">
    <h1>Integrating the Stencil WebComponent</h1>
    <hr>
     <new-button text="My First Component"></new-button>
  </div>

<router-outlet />

run the angular app in dev mode

ng serve

Open http://localhost:4200 in your browser and check your webcomponent output.

You can find the complete Angular application source code on GitHub

Conclusion:

Stencil offers a powerful way to build reusable and performant components that can be easily integrated into Angular applications. If you’re looking for a solution that promotes framework independence, performance optimization, and better component reusability, Stencil is a great option to consider.

Hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.

Integrating the Copyright Component in an Angular Application

Sudhakar George — Sun, 03 Nov 2024 18:16:37 +0000

A “copyright functionality” on a website refers to the practice of displaying a copyright notice, typically in the footer, which indicates that the content on the site is protected by copyright and belongs to the website owner, usually including the copyright symbol, the year of publication, and the owner’s name, essentially informing users that they cannot copy or use the content without permission

I created a copyright component; developers just need to use the tag based on their needs. In this article, we will go over how to integrate the Copyright component with an Angular Application in detail.

Adding sg-copyright package

Step1: Add the sg-copyright package to your application

In your Angular application go to the root folder and install the sg-copyright library via npm. This will install the latest version of the library:

npm i sg-copyright

Once the package is installed successfully, Your package.json will be updated with the sg-copyright package.

Step2: Configure the main.js file

Add an import to main.js

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

And somewhere near the bottom, we’ll call this function.

defineCustomElements();

your main.js file looks like this

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

import { defineCustomElements} from '../node_modules/sg-copyright/loader';

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZoneEventCoalescing: true
})
  .catch(err => console.error(err));
  defineCustomElements();

Step3: Update the app.module.ts file

Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;
and then

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please Note: schemas: [ CUSTOM_ELEMENTS_SCHEMA ] need to be added to each component where you are using custom HTML tags.
Say, for example, if you use the sg-copyright in your footer component, then your footer component looks like this.
import { Component } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'app-footer',
  standalone: true,
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  templateUrl: './footer.component.html',
  styleUrl: './footer.component.css'
})
export class FooterComponent {
}

Step4: Consume the component in html file

Now consume the component in your HTML file (footer component)as show below

<sg-copyright placement="center" from="2020" company="ABCD Crop" locale="en" color="#ffffff"></sg-copyright>

You can configure the component based on your application style. Here all parameters are optional.

You can also find the sg-copyright information on npm website.

Example

 <footer id="footer">
   <div class="rodape">
     <sg-copyright placement="center" from="2020" company="ABCD Crop" locale="en" color="#ffffff"></sg-copyright>
   </div>
  </footer>

Output

Conclusion:

This sg-copyright copyright has different options, you can configure it based on your needs.

     sg-copyright components options

I hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.

Load PDF file in Angular

Sudhakar George — Tue, 15 Oct 2024 13:52:21 +0000

Load PDF file in Angular

In most projects one common requirement is to load and view PDF documents directly within the application. There are differents ways we can achive this, In this article, I will walk through the process of integrating an angular application using ngx-extended-pdf-viewer a third-party package.
Please note that for this article i am using Angular 18.

Step 1: Set Up the Environment
Go to your terminal and install the Angular command-line interface (CLI). This will help you get up and running quickly with Angular:

 npm install -g @angular/cli

Step 2: Create a New Angular Project

Once Angular CLI is installed, you can use it to create a new Angular project. Navigate to the directory where you want to create your project and run the following command:

ng new ngx-pdf-viewer  --no-standalone

Step 3: Serve Your Angular Application:

After the project is created, navigate into the project directory then use an Angular CLI to serve your application locally by running:

ng serve

The project is running on localhost:4200

Output will be like this

# Adding ngx-extended-pdf-viewer package
Step1 : Add the ngx-extended-pdf-viewer

Run the command below to install the ngx-extended-pdf-viewer library via npm. This will install the latest version of the library:

npm install ngx-extended-pdf-viewer

Once the package is installed successfully, Your package.json will be updated with the ngx-extended-pdf-viewer package.

Step2: Configure the angular.json file

Now you need to configure the angular.json file. You’ll add this configuration under theprojects > yourProjectName > architect > build > options > assets section:

  "input": "node_modules/ngx-extended-pdf-viewer/assets/",
  "output": "/assets/"

Your angular.json looks like this

Step 3: Configure the application module:

Go to the app.module.ts file and import NgxExtendedPdfViewerModule from ngx-extended-pdf-viewer and pass it to the imports array:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxExtendedPdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Load the PDF document :

Add your PDF files in the src/assets directory as shown below:

Now load the PDF file in your app.component.html file as shown below

<ngx-extended-pdf-viewer [src]="'assets/pdf/sample_file.pdf'"></ngx-extended-pdf-viewer>

Your output will be like this

You can find the complete source code in GitHub.

# Enhancing the PDF Viewer
There are many configuration options you can use. You can see all the options on the ngx-extended-pdf-viewer website.

Say for example you want to change the zoom size and the height of the pdf view, you can do so by adding the configuration parameters as shown below:

 <ngx-extended-pdf-viewer [src]="'assets/pdf/sample_file.pdf'"
      [height]="'90vh'" zoom="30%">
    </ngx-extended-pdf-viewer>

Conclusion:

In this article, we explored how to leverage the PDF viewer to load and view PDFs within Angular applications using the external packages.

Hopefully, this article is useful to you and your project.

Integrating Angular with Contentstack

Sudhakar George — Thu, 03 Oct 2024 19:25:54 +0000

Integrating Angular with Contentstack allows you to build powerful and dynamic web applications powered by a headless CMS.

What is ContentStack?

Contentstack is a headless content management system (CMS) that helps businesses manage content across multiple digital channels. It's designed to help companies create unique digital experiences, accelerate growth, and lower the cost of ownership.

Features

Headless
Contentstack is not tied to a specific presentation layer, so it can serve content to any channel, such as websites, mobile apps, or marketing kiosks.
API-based
Contentstack allows developers and content managers to work independently and simultaneously to create and manage content
Integrations
Contentstack can connect with other tools and platforms, such as Marketo, Salesforce, and Google Analytics

How to integrate Contentstack with Angular:

Step 1: Create an Angular Project

Steps to create Angular Project from Scratch:

1) Install Angular CLI:

Angular CLI (Command Line Interface) is a powerful tool for creating and managing Angular projects. You can install it globally using npm by running the following command in your terminal or command prompt:

npm install -g @angular/cli

2) Create a New Angular Project:

Once Angular CLI is installed, you can use it to create a new Angular project. Navigate to the directory where you want to create your project and run the following command:

ng new angular-contentstack-example --no-standalone

3) Serve Your Angular Application:

After the project is created, navigate into the project directory then use an Angular CLI to serve your application locally by running:

ng serve

Step 2: Add and Configure Contentstack Angular Module

1) You need to start by installing the JavaScript SDK. Navigate to the root folder and run the following command:

npm install --save contentstack

Your package.json will be updated with the contentstack dependency as shown below:

2) Create ContentStack Module and Service

Create a src/modules/contentstack folder to add the ContentStack Modules and Service. It have following 3 files.

config.ts
contentstack.module.ts
contentstack.service.ts

1) config.ts

It is a configuration file.

import { Injectable } from '@angular/core';

@Injectable()
export class Config {
    api_key: string;
    access_token: string;
    environment?: string;
  }

2) contentstack.module.ts

import { ModuleWithProviders, NgModule, InjectionToken } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContentstackService} from './contentstack.service';
import { Config } from './config';
export const CsbaseAppConfigToken = new InjectionToken<string>('CsbaseAppConfigToken');

export function _csbaseAppFactory(config) {
  try {
      return  new ContentstackService(config);
  } catch (e) {
    return new ContentstackService(null);
  }
}

const ContentstackAppProvider = {
  provide: ContentstackService,
  useFactory:  _csbaseAppFactory,
  deps: [ CsbaseAppConfigToken ]
};



@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [ContentstackAppProvider]
})
export class ContentstackModule {

  static initializeApp(config: Config): ModuleWithProviders {
    return {
      ngModule: ContentstackModule,
      providers: [
        {provide: CsbaseAppConfigToken, useValue: config }
      ]
    };
  }

}

3) contentstack.service.ts

import { Injectable } from '@angular/core';
import * as contentstack from 'contentstack/web';
import { Config } from './config';


@Injectable()
export class ContentstackService {
  Stack: any = {};
  stackConfig: any = {};
  constructor(private config: Config) {
    this.stackConfig = config;
    this.Stack = contentstack.Stack(config);
  }

  public stack() {
    return contentstack.Stack(this.stackConfig);
  }
}

3) Configure ContentStack Module in Main App

Next, you need to configure the module. Add the contentstack module along with the config into your main App module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ContentstackModule} from '../modules/contentstack/contentstack.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

const Config = {
  'api_key': 'YOUR_API_KEY',
  'delivery_token': 'YOUR_DELIVERY_TOKEN',
  'environment': 'YOUR_ENVIRONMENT'

 };

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ContentstackModule.initializeApp(Config)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This adds the Contentstack Angular module in your App module along with the config required for retrieving data from Contentstack.

Important:

Replace YOUR_API_KEY, YOUR_DELIVERY_TOKEN, and YOUR_ENVIRONMENT with your actual Contentstack credentials.

4) Use the Service in your Components

Inject the Contentstack Service into your components to fetch and display content:

import { Component } from '@angular/core';
import { ContentstackService } from '../modules/contentstack/contentstack.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'angular-contentstack-example';
  constructor(private cs: ContentstackService) {}
  entryText:any = {};

  getEntry() {
   const Query = 
    this.cs.stack().ContentType('YOUR_CONTENT_TYPE').Query();
    Query.where('uid','YOUR_ENTRY_UID');
    Query
    .includeReference()
    .toJSON()
    .find()
    .then(
       entry => {
         this.entryText = entry[0][0];
       },
       err => {
         console.log(err, 'err');
       }
    ); 
}

 ngOnInit() {
  this.getEntry()
  }

}

Important:

Replace YOUR_CONTENT_TYPE, YOUR_ENTRY_UID with your actual Contentstack credentials.

Content Type
Content type lets you define the structure or blueprint of a page or a section of your digital property. It is a form-like page that gives Content Managers an interface to input and upload content.

Entry
An entry is the actual piece of content created using one of the defined content types.

In your HTML you can iterate a data and map it according to your needs.

For Example

    @for (item of entryText.sections; track item; let index = $index) {
      <tr>
         <td>{{ index }} </td>
         <td>{{ entryText[index].form_name}} </td>
         <td>{{ entryText[index].script_text}}</td>
         <td>{{ entryText[index].label}}</td>
       </tr> 
    }

Generate an API document with redoc to view a local API .json file using the Angular Application

Sudhakar George — Wed, 02 Oct 2024 16:14:52 +0000

In this tutorial, I am going to create a sample Angular application to generate a API document using redoc to read a local JSON files.

Step 1: Create an Angular Project

Steps to create Angular Project from Scratch:

Step 1: Install Angular CLI:

npm install -g @angular/cli

Step 2: Create a New Angular Project:

Once Angular CLI is installed, you can use it to create a new Angular project. Navigate to the directory where you want to create your project and run the following command:

ng new angular-redoc --no-standalone

Step 3: Serve Your Angular Application:

After the project is created, navigate into the project directory then use an Angular CLI to serve your application locally by running:

ng serve

Folder Structure going to be like this:

Step 2: Add and Configure the Redoc in Angular Project

What is Redoc?

Redoc is an open source tool for generating beautiful API documentation from OpenAPI (formerly Swagger) definitions.

Redoc is a clean and easy way to produce web-ready documentations.

By default Redoc offers a three-panel, responsive layout:

The left panel contains a search bar and navigation menu.
The central panel contains the documentation.
The right panel contains request and response examples.

Step 1: Adding the Redoc :

Go to the root folder and execute the following npm command to add the Redoc into the project

npm i redoc

Once you execute the command you can see the redoc is added into the package.json file

Step 2: Add the Redoc Script:

Add the script element in index.html page

<script src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"> </script>

Note: If you would instead prefer to host the depdencies yourself,You can then reference the Redoc script with a node modules link as well :
<script src="node_modules/redoc/bundles/redoc.standalone.js"> </script>

Step 3: Configure the Redoc in the component:

Create a method to fetch the local json object and map it in the HTML file

Added it in your component:

initDocs(){
    const container = this.el.nativeElement.querySelector('#redoc');
    Redoc.init('**LOCAL JSON FILE INFORMATION**', {
     scrollYOffset: 60,
     hideDownloadButton: true
   }, container);
 }

Note: Angular's ElementRef to access the native DOM element and the ngOnInit lifecycle hook to ensure that the component is ready before initializing Redoc.

Here is the complete code:

import { Component, ElementRef, OnInit } from '@angular/core';
declare var Redoc: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit  {
  title = 'angular-redoc';

  constructor(private el: ElementRef) { }

  ngOnInit() {
    this.initDocs();
  }



  initDocs(){
    const container = this.el.nativeElement.querySelector('#redoc');
    Redoc.init('**LOCAL JSON FILE INFORMATION**', {
    scrollYOffset: 60,
    hideDownloadButton: true
   }, container);
  }
}

Step 4: Read the JSON file from the local directory:

Create a Json file and place it in your assert folder.

You can find the sample Json file in the following location
http://petstore.swagger.io/v2/swagger.json

Note: It is not possible to call the local JSON file directly due to same-origin policy restrictions

Step 5: Call the local Json file from the component:

Using the import statement One way to read a JSON file from the assets folder in Angular is to use the import statement in your component.

Eg:

import * as sampleJsonData from '../assets/redoc-sample.json';

You need to add "resolveJsonModule": true in the compilerOptions of your tsconfig.json the file that is at the root of your Angular application.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "resolveJsonModule": true
  },
  "angularCompilerOptions": {
  }
}

Declare a variable and assign the JSON object in a new variable called data.

data: any = sampleJsonData ;

Set the local file name

Replace the 'LOCAL JSON FILE INFORMATION' with the assigned variable (this.data) as seen below:

  initDocs(){
    const container = this.el.nativeElement.querySelector('#redoc');
    Redoc.init(this.data, {
    scrollYOffset: 60,
    hideDownloadButton: true
   }, container);
  }

Map the HTML file with the selector name:

     <div id="redoc"></div>

Thats it !!

Your output will be something like this: