Me he quedado atascado en un lugar donde estoy tratando de llamar al evento del elemento personalizado en el elemento angular usando id
por ejemplo:
elemento angular.html
<custome-element id="elementId"></custome-element>AngularElement.Ts
import { Component, } from '@angular/core'; @Component({ selector: 'angular-element', templateUrl: './angular-element.component.html', styleUrls: ['./angular-elementcomponent.scss'], }) export class AngularElementComponent implements OnInit { callThisFunction() { const data: any = document.getElementById('elementId') as HTMLElement data.someFunction(); // not working console.log('call function in to custom element'); alert('test'); } }CustomeElement.Ts
import { Component, Input, OnInit, EventEmitter } from '@angular/core'; @Component({ selector: 'custome-element', templateUrl: './custome-element.component.html', styleUrls: ['./custome-elementcomponent.scss'], }) export class CustomeElementComponent implements OnInit { constructor() {} ngOnInit(): void { } someFunction() { console.log('call function in to angular element'); alert('test'); } }Aquí quiero llamar a la función someFunction() en el elemento Angular usando ID, sé que puedo llamar con @output pero necesito usar ID y llamar a la función usando ID.
Esto es lo que estoy intentando al pasar id
const data: any = document.getElementById('elementId') as HTMLElement
datos.algunaFunción(); // no funciona
Debe declarar una salida en el componente secundario
@Output() callParentFunctionName = new EventEmitter<void>();y luego emitirlo
someFunction() { this.callParentFunctionName.emit(); alert('test'); }Y luego en el componente padre
<custome-element [passdata]="true" (receiveData)="addData()" (callParentFunctionName)="callThisFunctionOnCustomElement()"></custome-element>O si desea llamar a la función del componente secundario en el componente principal https://angular.io/guide/component-interaction#parent-calls-an-viewchild
O usando el evento de envío
callTheCardBtn() { const data: any = document.getElementById('recaptchaId'); const event = new CustomEvent("addCard", { detail: { name: "Custom Event Triggered" } }); data.dispatchEvent(event); alert('click me'); }