Tips on integrating ActiveX controls in Angular

Question

Tips on integrating ActiveX controls in Angular

I built my project using Angular 6 and TypeScript in Visual Studio Code. The browser being used is IE11.

Unfortunately, when I try to run the code written in app.component.html, it doesn't work as expected.

The HTML code causing the issue is:

<div>
  <div >
    <object ID="activexFirst" CLASSID="CLSID:xxxxx-xxx" width="300" height="200"></object>
  </div>
  <div>
    <object ID="activeSencod" classid="CLSID:xxxxx-xxx" width="600" height="500"></object>
  </div>
</div>

The TypeScript code in app.component.ts looks like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements AfterViewInit {
//todo..
}

Interestingly, if I write the code directly in Index.html, it works fine. How can I resolve this issue?

angular typescript

Answer 1

Answer №1

Perhaps the angular-element is distinct from a native HTML element, but now everything seems to be working fine. Here is the code snippet from app.component.ts:

 ngAfterViewInit(): void {

    ActiveX.SetActiveXHtml(this.tActive1Div);
  }

And this is what you can find in ActiveX.ts file:

public static SetActiveXHtml(activeXDiv: ElementRef): void {
        let obj = document.getElementById('simplename') as any;
        if (obj == null) {
            obj = document.createElement('object');
            obj.name = 'name';
            obj.id = 'name';
            obj.classid = 'CLSID:xxxxxxxxxxxxxxxxx';
        }
        const cloneObj = obj.cloneNode(true);
        activeXDiv.nativeElement.appendChild(cloneObj);
    }

Remember, the cloneNode method plays a crucial role here!

Answer 2

Perhaps the angular-element is distinct from a native HTML element, but now everything seems to be working fine. Here is the code snippet from app.component.ts:

 ngAfterViewInit(): void {

    ActiveX.SetActiveXHtml(this.tActive1Div);
  }

And this is what you can find in ActiveX.ts file:

public static SetActiveXHtml(activeXDiv: ElementRef): void {
        let obj = document.getElementById('simplename') as any;
        if (obj == null) {
            obj = document.createElement('object');
            obj.name = 'name';
            obj.id = 'name';
            obj.classid = 'CLSID:xxxxxxxxxxxxxxxxx';
        }
        const cloneObj = obj.cloneNode(true);
        activeXDiv.nativeElement.appendChild(cloneObj);
    }

Remember, the cloneNode method plays a crucial role here!

Tips on integrating ActiveX controls in Angular

Answer №1

Similar questions

Material UI React Autocomplete Component

Managing errors with the RxJS retry operator

"Utilize Typescript for defining the parameter type in this

How to resolve the issue of any data type in Material UI's Textfield

In my Angular application, the Authentication JWT is securely stored by Firebase within the Session Storage. Does this implementation pose any security risks

Calculate the total values across a row of a work schedule, based on specific conditions

Is it possible to place Angular Material components using code?

Utilize Firestore for automatic saving of data from Angular Reactive Forms

Modify the name of the variable when sending the object to an HTTP service in Angular version 6

React-Redux: Unable to access the 'closed' property as it is undefined

Exploring nested static properties within TypeScript class structures

What is the best way to specify the type of a property that has already been assigned

Input for uncomplicated changing identifier

Get rid of the "No data" tag from the nz-table within a Simple Component

The TypeScript error states, "Object does not contain property 'name'."

After closing and reopening the app, I noticed that the ionic slider images fail to display until I navigate to the next page

Can the variable name within a function be retrieved?

Create Office Script calculations with quotations included

Declaration of Typescript index.d.ts for a heavily nested function within an npm module

Securing your Angular2 application with TypeScript for enhanced safety