CODEWITHSUNDEEP
angulartypescript
Morlas
Morlas

Reputation: 121

Changing variable on click in different component

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?

Upvotes: 0

Views: 705

Answers (1)

Aniruddha Das
Aniruddha Das

Reputation: 21688

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;
}

example

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

Upvotes: 1

Related Questions