Importing Widget

Component Type Script File

After installing the widget-lib from the NPM repository, navigate to the component designated for administrators to configure settings. In this component, import the TechBootstrapImportMateModule module.

Next, define two local variables:

_apiBasePath – This variable stores the full base URL of your deployed backend solution. If you are running the backend locally, the value would be:

http://localhost:3000

Ensure this value reflects the correct deployment environment.

_bearToken – This variable holds the access token for your SaaS application or project. It ensures that users accessing the backend API are properly authenticated within your application.

Example of a simple component having the import module

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TechbootstrapImportMateModule } from 'techbootstrap-import-mate';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, TechbootstrapImportMateModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-plugin-workspace';
  _apiBasePath="http://localhost:3000";
  _bearToken="token";
}

HTML file

Once the TypeScript file is set up, you can now add the corresponding HTML tag to your component. Place it in your desired location within the template:

<app-tb-import-mate [apiBasePath]="_apiBasePath" [bearToken]="_bearToken"></app-tb-import-mate>

This component will utilize the configured _apiBasePath and _bearToken to communicate with the backend, ensuring proper authentication and connectivity.

Once you have successfully followed the above steps and run the app, you will be able to see the Admin Widget with the following UI