I want to invoke a change of variable in component2 when clicked on element in component1.
component1.html
<p (click)="loadThisDiagram()">Load</p>
component1.ts
@Output() update = new EventEmitter<any>();
loadThisDiagram() {
this.update.emit({
url: 'new_diagram'
});
}
component2.ts
loadingDiagram() { const url = event.url; }
What am I doing wrong?
In your second component you are emitting the event but in your parent component you need to catch that event. Also in your parent component you are emitting click but catching as update which is miss matching.
@Output() click = new EventEmitter<any>();
loadThisDiagram() {
this.update.emit({
url: 'new_diagram'
});
}
Here you are emiting the event which need to catched in the other component
Catch the event by calling the function
management(event) {
this.url = event.url;
}
normal event emit example. here myChange is an event and on change of the event it calls myCahngeFun
<div class="col-3">
<cfs-change (myChange)="myChangeFun($event)"></cfs-change>
</div>
Here myChange is a event bind and it will call myChangeFun in the same component. so whenever there will be any event change to myChange it will notify
public myChangeFun(event) {
this.newSearch = event.newSearch;
...
}
In the cfs-change componenet you need to notify the parent component that myChange is change, so apply the event to myChangeFun.
public someotanyfuncton() {
...
this.myChange.emit({newSearch: this.viewFacets});
}
So the above call will notify the parent component that the child component is change and emited.
Hope it helps
