CODEWITHSUNDEEP
angularevent-handling
CHARAFI Saad
CHARAFI Saad

Reputation: 1440

ANGULAR : Click Event on component

I have two components which have the same child but with different inputs.

In the child in the ogOnInit I initiate the inputs in my model. When I click on one of the components for the first time the child's html is updated but when I click again I still have the inputs of the last component saved in the dom.

which is normal because the component is loaded in the dom only once and the ngOnInit is only executed once.

So, my need is to find a solution to update the data in the child with every click.

Here is my code :

First Component :

import { Component } from '@angular/core';

@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss']
})
export class Tab1Page {}

  <app-explore-container amount="1000000" delayed="0" rate="5" duration="180" name="Crédit Immobilier"></app-explore-container>

2nd Component :

 @Component({
 selector: 'app-tab2',
 templateUrl: 'tab2.page.html',
 styleUrls: ['tab2.page.scss']
 })
 export class Tab2Page {}

  <app-explore-container amount="200000" delayed="0" rate="6.0" duration="60" name="Crédit Consommation"></app-explore-container>

Child Component :

@Component({
  selector: 'app-explore-container',
  templateUrl: './explore-container.component.html',
  styleUrls: ['./explore-container.component.scss']
})
export class ExploreContainerComponent implements OnInit, OnChanges {
  @Input() name: string;
  @Input() amount: number;
  @Input() rate: number;
  @Input() duration: number;
  @Input() delayed: number;

  constructor(public simulation: Simulateur) { }

ngOnInit() {
  this.simulation.amount = this.amount;
  this.simulation.rate = this.rate;
  this.simulation.duration = this.duration;
  this.simulation.delayed = this.delayed; 
}

Upvotes: 0

Views: 229

Answers (3)

oz1985oz
oz1985oz

Reputation: 417

Like others says before me you can use ngOnChanges() or set on @Input method like this:

  _name: string;
  @Input() set name(value: string) {
    this._name = value;
  }
  @Input() set amount(value: number) {
    this.simulation.amount = value;
  }
  @Input() set rate(value: number) {
    this.simulation.rate = value;
  }
  @Input() set duration(value: number) {
    this.simulation.duration = value;
  }
  @Input() set delayed(value: number) {
    this.simulation.delayed = value;
  }

Upvotes: 0

Darren Street
Darren Street

Reputation: 1830

I've avoided using Inputs for this very reason, and although totally valid, I've found using a [Service] an easier method to pass a lot of data to the child. TBH I find changing the bound values on the directive rather a clunck to track and debug.

As an alternative could I suggest you utilize data transfer with a service instead...

  1. Create a new service in your app and within, create a Subject or BehaviourSubject with a method to update it.

  2. On your parent (say) on the "click" event, create an anonymous or typed object and build with data to send to your child.

  3. Inject your service and send your click data to the subject.

  4. On your child component, also inject your service & subscribe to the subject to get the latest clicked data.

Your child will always get the latest parameters.

Upvotes: 1

Dinnn
Dinnn

Reputation: 82

Looks like you've already implemented interface OnChanges but haven't declared method ngOnChanges of that interface yet which will cause the error.

Anyway, if you want to update your data whenever the change happen, you have to declare method ngOnChanges and implement your code inside it accordingly.

Example:

ngOnChanges(changes: SimpleChanges) { 
   //add your code here so that your data will change accordingly 
}

Also, you can have a look at this for detail explaination.

Upvotes: 0

Related Questions