CODEWITHSUNDEEP
angulartypescriptangular-componentsngonchanges
Simon
Simon

Reputation: 75

ngOnChanges() not working after data update

I have a problem with updating value using NgOnChanges.

I am sharing data between components using @Input() decorator.

Component 1 html:

 <div class="container-right">
    <app-transaction-details [clickedElement] = clickedElement></app-transaction-details>
</div>

Component 2

@Input() clickedElement?: Transaction

Clicked element is a tr row which is selected and passed after click.

<tr mat-row *matRowDef="let row; columns: displayedColumns"
            class="single-row" (click) = "clickedElement = row" ></tr>

Now in my Component 2 I want to invoke function every time that clickedElement data changes. I have tried implement OnChanges interface but it doesn't work - getPossibleBalance() is called only if I select different row.

 export class TransactionDetailsComponent implements OnChanges {
  
  @Input() clickedElement?: Transaction
  possibleBalance = ""

  ngOnChanges(changes: SimpleChanges): void {
    if(changes.clickedElement){
      this.possibleBalance = this.getPossibleBalance()
    }
  }

So my question is what am I doing wrong?

Upvotes: 1

Views: 224

Answers (0)

Related Questions