ECT Samples (version 1.7)

Pure Javascript Samples

Embedded Coding Tool
Link to the sample
Link to the GitHub repository
Link to the related documentation

Embedded Coding Tool using a callback function for the selection
Link to the sample
Link to the related documentation

Embedded Coding Tool multilingual
Link to the sample
Link to the related documentation

Embedded Coding Tool in popup mode
Link to the sample
Link to the related documentation

Embedded Coding Tool using ICF
Link to the sample
Link to the related documentation

Multiple instances of Embedded Coding Tool
Link to the sample
Link to the related documentation

Embedded Browser
Link to the sample
Link to the related documentation

Embedded Browser multilingual
Link to the sample
Link to the related documentation

How to integrate ECT in Angular, React and Vue.js

Embedded Coding Tool in the Angular framework

Link to the Angular sample
Link to the GitHub repository

In the Angular sample, the Embedded Coding Tool is integrated into a component called ECTAngularComponent within the folder ect-angular. All the other files are automatically generated by an Angular project. The files we are interested in are:

The HTML file ect-angular/ect-angular.component.html

• contains the required HTML tags <input> and <div>

The Typescript file ect-angular/ect-angular.component.html.ts

• imports the ECT package using import * as ECT from "@whoicd/icd11ect";
• sets these properties to the ECT Angular component:
  • sets the selector that identifies this component to app-ect-angular
  • imports the HTML template using templateUrl
  • set the component as standalone
  • imports the CSS style using styleUrls with setting encapsulation: ViewEncapsulation.None

@Component({
    selector: "app-ect-angular",
    templateUrl: "./ect-angular.component.html",
    standalone: true,
    styleUrls: ["../../node_modules/@whoicd/icd11ect/style.css"],
    encapsulation: ViewEncapsulation.None
})

• configures the ECT into the ngOnInit() method
• does the manual binding of the ECT component into the ngAfterContentInit() method for binding it only after Angular has fully initialized all content

Then, the ECTAngularComponent has to be imported and declared into the Angular main.ts

import { ECTAngularComponent } from "./ect-angular/ect-angular.component";

@Component({
    imports: [ECTAngularComponent]
})

Finally, the ECTAngularComponent can be used in the Angular main.html

<app-ect-angular></app-ect-angular>

Embedded Coding Tool in the React framework

Link to the React sample
Link to the GitHub repository

In the React sample, the Embedded Coding Tool is integrated into a component called ECTReactComponent.

The ECTReactComponent:

• imports the ECT package using import * as ECT from "@whoicd/icd11ect";
• imports the CSS style using import "@whoicd/icd11ect/style.css";
• configures the ECT into the constructor() method
• does the manual binding of the ECT component into the componentDidMount() method for binding it only after the component has been mounted
• includes the required HTML tags <input> and <div> into the render() method

Finally, the ECTReactComponent is included in the React app by importing it into the React's main.tsx

Embedded Coding Tool in the Vue.js framework

Link to the Vue.js sample
Link to the GitHub repository

In the Vue.js sample, the Embedded Coding Tool is integrated into a component called ECTVueComponent.

The ECTVueComponent:

• includes the required HTML tags <input> and <div> into the <template> tag
• imports the ECT package using import * as ECT from "@whoicd/icd11ect";
• imports the CSS style using import "@whoicd/icd11ect/style.css";
• configures the ECT into the created() method
• does the manual binding of the ECT component into the mounted() method for binding it only after the component has been mounted

Finally, the ECTVueComponent is included in the Vue.js app by importing it into the App.vue