How to pass value to angular element web component using button click from JavaScript?

Question

I'm trying to update the value which is an input of Angular component by clicking on button which not a part of the Angular Element. How can I update the value in the Angular Elements in order to display in the UI?

HTML Code

<second-hello test="First Value"></second-hello> // This is a Web Component by Angular
<button onclick="change()">Change</button> // This button is part of the Vanilla JS Application. This is not a part of the Angular Component

JavaScript Code:

function change() {
 console.log(document.querySelector('second-hello').getAttribute('test'));
 document.querySelector('second-hello').setAttribute('test', 'New Test worked');
 console.log(document.querySelector('second-hello').getAttribute('test'));
}

// Above JS function changes the value and that can be seen in browser console but it does not update in UI

Answer 1

Your javascript code is trying to directly manipulate the DOM. That is a very jQuery like way to do things, but this is not really the way to leverage and use Angular.

In principle, you want to use ng-model to bind data to your angular component and your function would work with the variables that are bound to this ng-model in your controller. Note: it doesn't have to be ng-model, but this is a great example of how to map the data.

Example:

// in component/page
<my-component ng-model="testData"></my-component>
<button (click)=changeData('value')></button>

// in controller
this.testData = "Initial value"

changeData(newData) {
    this.testData = newData;
}

You should spend some time working with the Angular tutorials ( https://angular.io/start/data ) which will model how to work with components and change their values.

Answer 2

From Angular we need take account two things: one, how refered to the object window, the another one is that we need use ngZone to tell Angular that a change happens. You can has something like

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers:[{provide:"windowObject", useValue: window}]
})

export class AppComponent  {
  name="Angular"
  constructor(@Inject("windowObject") private window: Window,private zone: NgZone){
    this.window["setData"]=(value:any)=>{
      this.zone.run(()=>{
      this.name=value
      })
    }
  }
}

See how you inject the object window and how defined a function "setData" in window. The you can call to the function outside in a button in java script

<button onclick="window.setData('Angular Renamed')">button</button>

You can see in stackblitz

NOTE: you can improve this idea creating a service that emit a value, so all your component that subscribe to the subject take account this changes

Answer 3

You can change the properties (input) of a web component , Angular will then run its onChanges cycle and you can implement the behavior you want from the new value.

HTML

 <my-component size="5"></my-component>

Plain javascript (source page)

const wc = document.getElementsByTagName('my-component')[0]
wc.size = 10

Your Angular component

ngOnChanges(changes: SimpleChanges): void {
  console.log(changes.size)
}