How to assign Angular @Input value into another variable and populate into the child?

Question

I have following parent html

<p>Parent</p>
<app-child [mainData]="mainData"></app-child>

parent.ts

mainData = [];
ngOnInit() { 
 this.myService((res)=>{
 this.mainData = res;
})
}

Child html

<p>My JSON {{mainData | json}}</p> //Here getting result from parent

child.ts

@Input() mainData = [];
myDataCopy = [];
ngOnInit() { 
   this.myDataCopy = this.mainData; 
   console.log('My copy Data', this.myDataCopy); // Doesn't get result on here 
}

If I need to process the @Input data how it possible?

Could you share the implementation of myService() with us? the callback indicates that you are working with some asyncronous here, which would explain why your code does not work the way you intend — Chund
– Chund, Commented Oct 21, 2019 at 6:33

Adrita Sharma · Accepted Answer · 2019-10-21 06:31:26Z

5

Try it in ngOnChanges lifecycle hook

child.ts

ngOnChanges(changes: SimpleChanges) {
  const mainDataChange = changes.mainData ;

  if (mainDataChange) {
    this.myDataCopy = this.mainData; 
    // or, this.myDataCopy = mainDataChange.currentValue;
    console.log('My copy Data', this.myDataCopy);
  }
}

answered Oct 21, 2019 at 6:31

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

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

2 Comments

Rijo Over a year ago

what you mean SimpleChanges?

Adrita Sharma Over a year ago

SimpleChange class represents a basic change from a previous to new value.

noririco · Accepted Answer · 2019-10-21 06:56:40Z

3

You can try @Input getter and setter

  _mainData: any;
  @Input()
  set mainData( val ) {
    this._mainData = val;
  }

  get mainData: any {
    return this._mainData;
  }

And read more Here

answered Oct 21, 2019 at 6:56

noririco

8157 silver badges15 bronze badges

Comments

Alexandre · Accepted Answer · 2019-10-21 06:36:16Z

1

Maybe syntax depend on Angular version...

Can you try to force "bindingPropertyName" argument in @Input declaration ?

like :

@Input('mainData') mainData = [];

answered Oct 21, 2019 at 6:36

Alexandre

5881 gold badge5 silver badges22 bronze badges

Comments

Andrew Allen · Accepted Answer · 2019-10-21 07:32:10Z

Just to throw another alternative out there taken from this blog.

Stackblitz

export class ChildComponent implements OnChanges  {
  /* METHOD THREE 
   * Using a decorator
  */
  @OnChange<number>((value, simpleChange) => {
    console.log('OnChange decorator methodThree', value)
  })
  @Input()
  methodThree: number;

}

Decorator

export interface SimpleChange<T> {
  firstChange: boolean;
  previousValue: T;
  currentValue: T;
  isFirstChange: () => boolean;
}

export function OnChange<T = any>(callback: (value: T, simpleChange?: SimpleChange<T>) => void) {
  const cachedValueKey = Symbol();
  const isFirstChangeKey = Symbol();
  return (target: any, key: PropertyKey) => {
    Object.defineProperty(target, key, {
      set: function (value) {
        // change status of "isFirstChange"
        if (this[isFirstChangeKey] === undefined) {
          this[isFirstChangeKey] = true;
        } else {
          this[isFirstChangeKey] = false;
        }
        // No operation if new value is same as old value
        if (!this[isFirstChangeKey] && this[cachedValueKey] === value) {
          return;
        }
        const oldValue = this[cachedValueKey];
        this[cachedValueKey] = value;
        const simpleChange: SimpleChange<T> = {
          firstChange: this[isFirstChangeKey],
          previousValue: oldValue,
          currentValue: this[cachedValueKey],
          isFirstChange: () => this[isFirstChangeKey],
        };
        callback.call(this, this[cachedValueKey], simpleChange);
      },
      get: function () {
        return this[cachedValueKey];
      },
    });
  };
}

This method uses a typescript decorator. IMHO decorators are likely to stay but...

Decorator are an experimental feature that may change in future releases

Surya R Praveen · Accepted Answer · 2022-10-21 12:08:08Z

0

app.components

import {   Component,  Inject,  Input,  OnInit, SimpleChanges} from '@angular/core';

export class ResultsComponent implements OnInit {
  @Input() public employeeData!: Array<Insight>;
  filterBy: any;

  constructor() {
  }


  ngOnChanges(changes: SimpleChanges): void {
    if (changes) {
       //To do filter
      // this.filterBy = this.employeeData.filter((obj) => {
      //   return obj.joiningDate === '2022-10-01T00:00:00.000Z';
      // });

      //Assign Input Data to Var
      this.filterBy = this.employeeData!;
      console.log(this.filterBy);
    }
  }
}

answered Oct 21, 2022 at 12:08

Surya R Praveen

3,7551 gold badge29 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to assign Angular @Input value into another variable and populate into the child?

5 Answers 5

2 Comments

Comments

Comments

Stackblitz

Decorator

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Decorator

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related