angular dart querySelector not finding element in modal - dart

Question

I'm unable to find an element inside a modal element. I have a simple component with the following template
<modal>
<select id="pickItem">
<option value="1">one</option>
<option value="2">two</option>
</select>
</modal>
in my ngOnInit I put the code
SelectElement select = querySelector("#pickItem");
print(select);
I get null. If I change the modal tags to divs, it works. Is there and angular preferred way to handle querying elements?
Here is a sample to show ViewChild not working. ViewChild works on the first component. IE:
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);
}
}
This will print "select" to the console when run.
If it's in a child component it doesn't work.
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);
}
}
This will print "null" to the console when run.