If you wanna use the React AsyncAPI component in your Angular project, you have two options:
- you may want to use the AsyncApiStandalone bundle with React and ReactDom onboard (preferred option).
- you may want to use the @asyncapi/web-component component as a plain web component.
First read the Readme document and install the React AsyncAPI component by:
npm install --save @asyncapi/react-component
To use component in Angular, follow these steps:
- Import @asyncapi/react-component/browser/standalone bundle and create similar component as below:
import { Component, ElementRef, OnDestroy, AfterViewInit, } from '@angular/core';
import AsyncApiStandalone from "@asyncapi/react-component/browser/standalone";
@Component({
selector: 'asyncapi',
template: `
<div id="asyncapi-doc"></div>
`,
styleUrls: ['./asyncapi.component.scss']
})
export class AsyncApiComponent implements OnDestroy, AfterViewInit {
constructor(private element: ElementRef) {}
ngAfterViewInit() {
const schema = `...`; // AsyncAPI specification, fetched or pasted.
const config = {}; // Configuration for component. This same as for normal React component
const container = this.element.nativeElement.querySelector('#asyncapi-doc');
AsyncApiStandalone.render({ schema, config }, container);
}
ngOnDestroy(): void {
this.element.nativeElement.querySelector('#asyncapi-doc').remove();
}
}
-
Update given NgModule in which you want to use the component by importing the component into the declarations array.
-
Import styles from @asyncapi/react-component/styles/default.min.css:
- import styles in main css file by @import @asyncapi/react-component/styles/default.min.css.
- or import styles using path node_modules/@asyncapi/react-component/styles/default.min.css in angular.json file.
- or copy content from @asyncapi/react-component/styles/default.min.css to assets/asyncapi.min.css and import file like in the second point.
-
Use the component in your application.
First read the Web Component usage document and install the web-component as described in the mentioned document.
To use the component in Angular, follow these steps:
- Update AppModule by adding the CUSTOM_ELEMENTS_SCHEMA to the schemas array in the NgModule metadata:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
...
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
]
})
export class AppModule {}
- Import the @asyncapi/web-component module in an Angular's component where you want to use the web component:
import { Component } from '@angular/core';
import '@asyncapi/web-component/lib/asyncapi-web-component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
...
}
- Use web component in the template as follows:
<asyncapi-component
[schema]="schema"
[config]="config"
[schemaUrl]="schemaUrl"
[schemaFetchOptions]="schemaFetchOptions"
[cssImportPath]="cssImportPath">
</asyncapi-component>
where:
- schema, config, schemaUrl, schemaFetchOptions are Web Component's properties used in any valid combination, as described in Web Component specification,
- cssImportPath is the path to styles. By default it is assets/default.min.css
NOTE: The easiest way to use the default css is to copy the content of the @asyncapi/react-component/styles/default.min.css file to a assets/default.min.css file.