How to output values from Material date range picker in angular dart

Issue

How to get values from list of material-date-range-picker in angular dart?

https://dart-lang.github.io/angular_components/#/material_datepicker

<ul>
    <li *ngFor="let rangeSimplified of datepickerComparisonList">
        <material-date-range-picker
            compact
            [range]="rangeSimplified"=
            [(minDate)]="minDate"
            [(maxDate)]="maxDate"
            [(outputDateFormat)]="outputDateFormat"
            [required]="true">
        </material-date-range-picker>
    </li>
</ul>

I want to get an array of values of all periods selected by the user.

Solution

I was able to solve my problem

Here is an example project:

Dart:

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

// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [
    NgIf,
    NgFor,
    MaterialDateRangePickerComponent,
    MaterialButtonComponent,
  ],
  providers: [
    datepickerBindings,
  ]
)
class AppComponent {
  AppComponent();

  String _log = '';
  String get log => this._log;
  set log(String value) {
    print(value);
    this._log += '\n$value';
  }

  List<DateRangeTile> rangeTileList = <DateRangeTile>[];

  void rmRange() {
    rangeTileList.removeLast();
  }

  void addRange() {
    this.rangeTileList.add(DateRangeTile());
  }

  void checkDateRange() {
    log = '';
    log = '### Ranges:';
    for (DateRangeTile rangeTile in this.rangeTileList) {
      log = '${rangeTile.range.toString()}';
    }
    log = '### ### ###';
    log = '';
  }
}

class DateRangeTile {
  DatepickerComparison _range;
  DatepickerComparison get range => this._range;
  set range(DatepickerComparison value) {
    this._range = value;
  }

  DateRangeTile();

  /*
  // DatepickerComparison sample
  DatepickerComparison.previousPeriod(
    DatepickerDateRange.custom(
      Date.today().add(days: 3),
      Date.today().add(days: 4),
    ),
  ),
  */
}

HTML

<h3>DateRangePicker list</h3>
<div *ngFor="let rangeTile of rangeTileList">
    <material-date-range-picker [(range)]="rangeTile.range"></material-date-range-picker>
    <br>
</div>

<material-button *ngIf="rangeTileList.length == 0" disabled class="float-left">REMOVE</material-button>
<material-button *ngIf="rangeTileList.length > 0" raised (click)="rmRange()" class="float-left">REMOVE</material-button>
<material-button raised (click)="addRange()" class="float-left">ADD</material-button>
<material-button raised (click)="checkDateRange()" class="float-left">CHECK</material-button>

<pre>{{log}}</pre>

CSS

:host {
    /* This is equivalent of the 'body' selector of a page. */
}

.float-left {
    float: left;
}

Answered By – Plague Fox

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)