Possible issue with @ViewChild in AngularDart

[Corey Marques]

I'm running into a strange issue trying to get a reference to a component. It appears that @ViewChild doesn't work if it's in a sub or child component. 

I've written two very small angular apps to show the problem using Dart 2.3.2.

In this example, I'm printing the component to the console to show that I have a reference and it's working. It prints "select"

pubspec.yaml

environment:
  sdk: '>=2.1.0 <3.0.0'

dependencies:
  angular: ^5.2.0
  angular_components: ^0.11.0

dev_dependencies:
  build_runner: ^1.1.2
  build_web_compilers: ^1.0.0

app_component.dart

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
    selector: 'my-app',
    template:'''
      <select #mySelect>
        <option value="1">one</option>
        <option value="2">two</option>
      </select>
    ''',
    directives: const [formDirectives]
)
class AppComponent implements AfterViewInit {
  @ViewChild("mySelect")
  SelectElement element;

  @override
  ngAfterViewInit() {
    print(element);
  }
}

In this next example (same pubspec) I'm doing the same thing but I'm doing it from a child component and it's not working. It prints "null"

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'child_component.dart';

@Component(
    selector: 'my-app',
    template:'''
      <child-component></child-component>
    ''',
    directives: const [formDirectives, ChildComponent]
)
class AppComponent implements AfterViewInit {
  @override
  ngAfterViewInit() {
  }
}

child_component.dart

import 'dart:html';

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
    selector: 'child-component',
    template:'''
      <select #mySelect>
        <option value="1">one</option>
        <option value="2">two</option>
      </select>
    ''',
    directives: const [formDirectives]
)
class ChildComponent implements AfterViewInit {
  @ViewChild("myselect")
  SelectElement element;

  @override
  ngAfterViewInit() {
    print(element);
  }
}

Am I doing this wrong? I'm very new to AngularDart but we are trying to adopt it for a large application. This is scaring me a little and making me wonder if it's really used in the field for large applications. I want to make sure I'm not committing to a framework that isn't getting attention. I noticed most examples I find when trying to figure out a problem are using TypeScript + Angular.

Thanks for your time.

[Hadrien Lejard]

Hello,

You have a typo on ViewChild "myselect" in you child component, it's case sensitive, it should be "mySelect"

--
You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
To view this discussion on the web visit https://groups.google.com/a/dartlang.org/d/msgid/web/ff1ae73d-5ba7-4f3f-8587-58f7fa3744f8%40dartlang.org.

[Corey Marques]

Thank you for taking the time to look into that. It was driving me nuts. I've been bit by the case sensitive issue before, totally missed it.