Angular2 wait for @Input object to be fully initialized

Question

I have a .ts class with a variable decorated as @Input
I would like to make a copy of this object but i cant figure out the right place to do this is, my current code:

@Input() myObj: MyObj;
public copy: MyObj;

 ngOnInit() {
    this.copy = JSON.parse(JSON.stringify(myObj));
}

The call within the ngOnInit method breaks because the ngOnInit is called before the myObj variable is fully created.

I have also tried to create the copy within the ngAfterContentInit method but that is also called before myObj variable is fully created.
I have seen other questions similar to mine, but they all wait for an observable, my object is not an observable, is simply an object passed from parent to child through the view:

<child-view [myObj]="myObjInParent"/>

You can use a setter and validate passing input there or you can leverage ngOnChanges hook — yurzui
– yurzui, Commented Feb 12, 2022 at 16:34

Akmal · Accepted Answer · 2022-02-12 16:37:24Z

2

One way you could possibly do it is to place an *ngIf on the like this

<child-view *ngIf="myObjInParent" [myObj]="myObjInParent"/>

That would essentially display the component only after the myObjInParent changes from undefined to your value. Not the best solution, but it works.

Also you can make a copy of an object using an ES6 spread operator

this.copy = {...myObj}

using a three dot notation. Hope I could help!

answered Feb 12, 2022 at 16:37

Akmal

4144 silver badges8 bronze badges

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

Comments

Christophe b · Accepted Answer · 2022-02-13 02:49:00Z

0

It depends when you have to use your copy variable in your code.

You can create a getter which does the parsing if copy is null, and if not you just return the copy value.

It may be null the first few times you call the getter, but eventually once all the datas are loaded the parsing will be done automatically.

answered Feb 13, 2022 at 2:49

Christophe b

141 silver badge2 bronze badges

Comments

Zeeshan S. · Accepted Answer · 2022-02-13 03:20:55Z

0

If you want copy to be initialized only once at the time of component initialization then Akmal's solution works: https://stackoverflow.com/a/71093779/904375

But in case you want the copy to be updated every time the @Input() is updated, then you have to create a getter/setter. For eg.:

  private _copy: any;
  
  private _employee: Employee;
  
  get employee() { return this._employee; }
  
  @Input() set employee(value: Employee) {
    this._employee = value;
    this._copy = {...value};
  };

answered Feb 13, 2022 at 3:20

Zeeshan S.

2,0912 gold badges21 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular2 wait for @Input object to be fully initialized

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related