Angular 2 Dart: How to select and change element in an imported sub-component?

Issue

The following angular/ dart library (https://pub.dartlang.org/packages/pikaday_datepicker_angular2) seems not to be written very well as it is not possible to set an external change of the date (there is no setter – I can only set the default day / date in the beginning but not if it changes externallay).

My question is: How can I access the inner of an imported library component in order to change a value or some HTML inside?

my_component.html:

<div>
    <pikaday #pickuptimeselector [day]="selectedDay"(dayChange)="changeDate($event)" format="DD.MM.YYYY"
                       [minDate]="mindate" [maxDate]="maxdate"
                       [(i18n)]="datepickerI18n"
                       firstDay="1">
    </pikaday>
</div>

my_component.dart:

import 'package:pikaday_datepicker_angular2/pikaday_datepicker_angular2.dart';


@Component(
    selector: 'my_component',
    styleUrls: const ['my_component.css'],
    templateUrl: 'my_component.html',
    directives: const [materialDirectives,PikadayComponent],
    providers: const [materialProviders]
)
class MyComponent {

  Map<String,dynamic> datepickerI18n = new Map<String,dynamic>();

  DateTime selectedDay;

  void dayChange() { 
  ...
  }
}

Generated output of the pikaday component from the Chrome console:

<pikaday _ngcontent-oid-5="" firstday="1" format="DD.MM.YYYY"><input type="text" id="pikadayInput1" class="" placeholder="" aria-label="Use the arrow keys to pick a date"></pikaday>

As you can see there is an input inside the component. As Datetime selectedDay changes I want to set a new date value to this input field. How?

Solution

This is not possible in any legal way. If your app is using mirrors you could try it, but you should never do it in production application.

Best way is to fix the library and send a pull request.

Answered By – rkj

Answer Checked By – Robin (FlutterFixes Admin)