Updating value in the child component , on value changes in the parent component

Question

I am working in Angular ,where -

• I am trying to Update value in the child component , on value changes in the parent component

  (as value is coming dynamically to the parent component from some other component) .

How I tried

• I tried to pass data from parent component to child component Using @Input decorator

• using @Input value is passed just once when component loads and latter on value is not passed

I am sharing my code below

Parent component

.html

<app-banner [tournamentType]='tournamentType'></app-banner>

.ts

child component

.ts file

import { Component, OnInit , Input } from '@angular/core';
import { ServicesService } from '../service/services.service';

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {

  @Input() tournamentType;

  sportsType : any = 1;



  constructor(private rest : ServicesService) { }

  ngOnInit() {
    console.log("this. is banner page" + this.tournamentType);
    alert('hello');

    this.loadDataFromApi(1);
  }

  loadDataFromApi(sportsType) {

     this.rest.getbanner(this.sportsType).then(res => {
       console.log('>>>$$$$$ banner >>>>>> $$$$$$$$$$');
       console.log('  @Input tournamentType; ====' + this.tournamentType );
       console.log(res);

     })
    console.log(sportsType);
  }
}

Answer 1

Values changes from parent to child components are reflected immediately. However, you can listen for value changes event in the child component. Read more about ngOnChanges

Here is an example on stackblitz

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<app-child [data]="count"></app-child>

app.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
  name = "Angular";

  count = 0;

  constructor() {}

  ngOnInit(): void {
    setInterval(() => this.updateCount(), 1000);
  }

  updateCount(): void {
    this.count++;
  }
}

child.component.html

<p>{{data}}</p>

child.component.ts

import { Component, OnInit, OnChanges, Input, SimpleChanges } from "@angular/core";

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.css"],
})
export class ChildComponent implements OnInit, OnChanges {
  @Input() data: any;

  constructor() {}

  ngOnInit() {}

  ngOnChanges(changes: SimpleChanges): void {
    console.log("value changed", this.data);
  }
}