1

We are using Angular Elements to create custom elements (web components) out of our component library. However, it seems after doing this the Angular lifecycle hooks do not execute in the same order as they normally do. For example, ngOnChanges usually executes before ngOnInit but now the order is flipped; ngOnInit is running before ngOnChanges and therefore the input variables inside ngOnInit are undefined. From what I can gather this seems to be intentional link here. I am wondering if there is a workaround to force ngOnInit to run first or pause from running the ngOnInit code until bindings have happened first? We need to make sure the variables have the proper values before running the initiation logic inside ngOnInit.

Note: We don't have access to the original component's code so we can't change any of it we can only control how the parent uses it.

Component Code:

export class CustomButton implements OnInit, OnChanges {

@Input() title: any;

constructor(public userService: UserService) { }

ngOnInit() {
    console.log(this.title);  // <--- Executes first, variable undefined
    // ... Initiation Logic ... // This logic is failing due to undefined
}

ngOnChanges(simpleChanges: SimpleChanges) {
    console.log(simpleChanges);     // <--- Executes second, variable has proper values
}
}

Parent Usage:

<custom-buttom title="{{title}}"></custom-button>

Thanks for your help :]

B Snow
  • 393
  • 3
  • 14
  • input property changes executes ngOnChanges, so you can handle your onInit logic in onChanges hook – rahul tiwari Jan 20 '21 at 07:49
  • Hello, yes this would work but if you see my Note above we don't have access to the original component's code so we can't move the logic. Thanks though – B Snow Jan 20 '21 at 07:57

0 Answers0