Can not pass data to ng-bootstrap with @input

Question

I have a component with a list of all users, and when we click on edit or add new I open same modal box with a form for edit or for add new user. In case I want to edit user I need to show user data in form in modal box. My modal box is in another component, and I need to pass data to modal.

In my user.component I get data for selected user and I set it to

const modalRef = this.modalService.open(AddComponent);

this.userService.getUserDetail(username).subscribe((response: UserModel) => {
    this.user = response;
    modalRef.componentInstance.user = this.user;
  });

And in modal box component I set

export class AddComponent {
      addNewUserForm: FormGroup;
      @Input() user;

constructor (...){
      console.log(this.user) //get undefined
  }
}

I also try set console.log(this.user) in ngOnInit and ngAfterViewInit but always get undefined

Thank you for help...

All looks good with the code. If the `response` has some value, it should come to the `AddComponent`. Can you create a stackblitz for the issue ? — Sachin Gupta, Oct 01 '19 at 05:39
@arter porperty is not available in life cycle hooks or constructor but you can use it in some method after opening the modal check this [stackblitz](https://stackblitz.com/edit/angular-jtihfs) open modal and click log property button — jitender, Oct 01 '19 at 05:41
@jitender yes, when I make function and call this after modal I initialized I get data... but is there any way to "onLoad" or "onInit" or something else get this data? — Arter, Oct 01 '19 at 05:50

score 0 · Answer 1 · answered Oct 01 '19 at 05:54

0

Use ngOnInit instead of constructor

ngOnInit() {
      console.log("hihi", this.name)
   }

Hi, I've made a working Stackbligz

answered Oct 01 '19 at 05:54

varman

8,704
5
19
53

this is not working, already try this... like @jitebder write above "property is not available in life cycle hooks or constructor but you can use it in some method after opening the modal". – Arter Oct 01 '19 at 05:56
1

As per your requirement I made a stackbigz app where you find the 'hihi world' in the console. Pardon me If I'm wrong – varman Oct 01 '19 at 06:05
yes, you are right... but when i use ngOnInit i get undefined... Becuase, I get data from API and modal is opened before I get data.... – Arter Oct 01 '19 at 06:14
1

@Arter then you should open modal after you get api response – jitender Oct 01 '19 at 06:22
1

@varman I upvote for your answer but that is not the correct answer. In my main question, I write that I already try with `ngOnInit` but not working. The solution is like I add an answer, change `const modalRef...` to another position... I can not mark my answer like correct... `You can accept your own answer in 2 day`... But tm thank you for suggestion – Arter Oct 01 '19 at 06:35
@Arter you can also use the `ngOnChange()` along with `@Input user`. The function gets triggered whenever an input property changes – Sachin Gupta Oct 01 '19 at 06:53

score 0 · Accepted Answer · answered Oct 01 '19 at 06:23

Ok, here is the answer if I put const modalRef = this.modalService.open(AddComponent); inside subscribe I get data with ngOnInit(){console.log(this.user)}

this.userService.getUserDetail(username).subscribe((response: UserModel) => {
this.user = response;

const modalRef = this.modalService.open(AddComponent); //i put this here
modalRef.componentInstance.user = this.user;
});

and in add.component.ts

export class AddComponent implements OnInit{
  addNewUserForm: FormGroup;
  @Input() user;

ngOnInit(){
  console.log(this.user);
 }
}

Can not pass data to ng-bootstrap with @input

2 Answers2