ECT Samples (version 1.6)

Pure Javascript Samples

Embedded Coding Tool
Link to the sample
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

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

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

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

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

The Typescript file app/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
  • imports the CSS style using styleUrls with setting encapsulation: ViewEncapsulation.None

@Component({
    selector: "app-ect-angular",
    templateUrl: "./ect-angular.component.html",
    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 app/app.module.ts

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

@NgModule({
    declarations: [AppComponent, ECTAngularComponent]
})

Finally, the ECTAngularComponent can be used in the Angular app/app.component.html

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

Embedded Coding Tool in the React framework

Link to the React sample

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 index.js

Embedded Coding Tool in the Vue.js framework

Link to the Vue.js sample

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