ANGULAR : Click Event on component

Question

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

@pc_coder thanks for your return. I have already tried this method. the problem is that there is no change once it's initialized in the dom there is no more change — CHARAFI Saad
– CHARAFI Saad, Commented Jan 3, 2021 at 18:41

Darren Street · Accepted Answer · 2021-01-03 11:41:03Z

1

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...

Create a new service in your app and within, create a Subject or BehaviourSubject with a method to update it.
On your parent (say) on the "click" event, create an anonymous or typed object and build with data to send to your child.
Inject your service and send your click data to the subject.
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.

answered Jan 3, 2021 at 11:41

Darren Street

1,84820 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pter · Accepted Answer · 2021-01-03 11:37:22Z

0

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.

answered Jan 3, 2021 at 11:37

Pter

801 silver badge6 bronze badges

1 Comment

CHARAFI Saad Over a year ago

thanks for your return. I have already tried this method. the problem is that there is no change once it's initialized in the dom there is no more change

oz1985oz · Accepted Answer · 2021-01-03 12:07:33Z

0

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

answered Jan 3, 2021 at 12:07

oz1985oz

4272 silver badges9 bronze badges

1 Comment

CHARAFI Saad Over a year ago

thanks for your return. I have already tried this method. the problem is that there is no change once it's initialized in the dom there is no more change

Collectives™ on Stack Overflow

ANGULAR : Click Event on component

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related