ViewChild breaks with Mobxautorun

[shaunpatterson]

Given a component's html

<div *mobxAutorun>
      ... input fields ... 
       <app-address #mailingAddress></app-address>
      ... input fields ... 
</div>

and

@ViewChild('mailingAddress') mailingAddress: AddressComponent

in the component

mailingAddress is undefined. If I move the mobxAutorun one level above (ie, the parent component) or remove mobxAutorun, mailingAddress works as expected

[shaunpatterson]

Well, this appears to be by design, since the directive is creating a subview (hence why the ViewChild doesn't work).

I presume the idea here would be to move the directive into my address component and then apply the directive to the other parts of my form?

[adamkleingit]

@shaunpatterson what is the error? If I try it in the example code with a simple span inside the *mobxAutorun - then it works well.

[shaunpatterson]

Given this, and popping into my application

@Component({
  selector: 'app-test',
  template: `
    <div *mobxAutorun>
        <app-test2 #test2></app-test2>        
    </div>
  `
})
export class TestComponent implements OnInit {

  @ViewChild('test2')
  test2: Test2Component;

  constructor() {}

  ngOnInit() {
    debugger;    // RIGHT HERE
  }
}

@Component({
  selector: 'app-test2',
  template: `<span>Test</span>`
})
export class Test2Component implements OnInit {

  constructor() {}

  ngOnInit() {

  }
}

At the debugger statement, this.test2 is undefined.

If I remove <div *mobxAutorun> and make it just <div>, test2 is now defined correctly

[ghost]

try ngAfterViewInit

On Sat, Oct 27, 2018, 16:42 Shaun Patterson notifications@github.com wrote:

Given this, and popping into my application

@Component({ selector: 'app-test', template: <div *mobxAutorun> <app-test2 #test2></app-test2> </div> }) export class TestComponent implements OnInit {

@ViewChild('test2') test2: Test2Component;

constructor() {}

ngOnInit() { debugger; // RIGHT HERE } }

@Component({ selector: 'app-test2', template: <span>Test</span> }) export class Test2Component implements OnInit {

constructor() {}

ngOnInit() {

} }

At the debugger statement, this.test2 is undefined.

If I remove <div *mobxAutorun> and make it just

, test2 is now defined correctly

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mobxjs/mobx-angular/issues/80#issuecomment-433621350, or mute the thread https://github.com/notifications/unsubscribe-auth/ACUsQyC8gw7hwSsFgYJxG4ZsP4HFeFVzks5upGLhgaJpZM4X8H1k .

[shaunpatterson]

Yeah ngAfterViewInit works. But essentially I have to build my form with an empty validator for this address component and then later augment the form with the formgroup from the address component once it's rendered.

I think we can close this ticket

[adamkleingit]

Yeah, it's a general Angular forms question I guess.