Call Web Component Function from Angular

user_4952230 0
Viewed 237

I want to call a function of an web component that I'm using in an Angular 10 Project.

Lets say I have an Angular Component called Foo:

foo.component.ts:

export class FooComponent implements OnInit, OnDestroy {
   @ViewChild('bar') bar: any;
   
   constructor() {  }

   ngOnInit(): void {
    //  this.bar.hello('world')
   }
}

foo.component.html:

<h1>FOO</h1>
<wc-bar></wc-bar>

The webComponent bar was build with VueJS and has a function called hello, how can I call that function?

web-component angular
1 Answers

I believe it should work this way:

foo.component.ts:

export class FooComponent implements OnInit, OnDestroy {
   @ViewChild('bar') bar: ElementRef<Bar>; // if you have `Bar` typings

   ngAfterViewInit(): void { // According to https://angular.io/api/core/ViewChild view queries are set before the ngAfterViewInit
      this.bar.nativeElement.hello('world')
   }
}

foo.component.html:

<h1>FOO</h1>
<wc-bar #bar></wc-bar>
user_3901610
Related