CODEWITHSUNDEEP
angularweb-component
YAT
YAT

Reputation: 466

Call Web Component Function from Angular

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?

Upvotes: 3

Views: 1068

Answers (1)

IAfanasov
IAfanasov

Reputation: 4993

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>

Upvotes: 1

Related Questions