Unable to access Input Property in NgOnInit -Angular 6

Question

My Parent page looks like this.

html:

<counter  [conversationId]="conversationId"></counter>

component:

public conversationId: string;

public showModal() {   
 this.conversationId = '1234'
 this.modalService.showComponent(CounterPage, { class: 'modal-lg' }); 
}

My Child page looks like this.

 @Input() conversationId: any;
 public ngOnInit  (): void {
    alert(this.conversationId); //shows undefinded.
  }

Looks like this is common issue here. None of the solutions worked for me.

What is `conversationId` when it is being passed in? If you are passing in `undefined` then it would make sense that it remains `undefined`. — Ashley, May 20 '19 at 22:36
I am not passing undefined. My code clearly shows assigning '1234' to conversationId before calling show component — Chatra, May 21 '19 at 02:15

score 0 · Answer 1 · answered May 20 '19 at 23:52

0

The params receive values before the method ngAfterContentInit().

See the lifecycle of angular in this image: https://v2.angular.io/resources/images/devguide/lifecycle-hooks/hooks-in-sequence.png

try:

@Input() conversationId: any;
 public ngAfterContentInit  (): void {
    alert(this.conversationId); //shows undefinded.
  }

answered May 20 '19 at 23:52

Renan Oliveira

19
2

so, what is the best way to access conversationId ? – Chatra May 21 '19 at 01:37
The best ways I know of are using ngAfterContentInit or the constructor, however I prefer to use ngAfterContentInit – Renan Oliveira May 21 '19 at 02:20
value is not showing in nfAfterContentInit, your code comments shows undefined – Chatra May 21 '19 at 02:32

Unable to access Input Property in NgOnInit -Angular 6

1 Answers1