Skip to content

Instantly share code, notes, and snippets.

@alyssamichelle
Last active May 7, 2020 20:35
Show Gist options
  • Save alyssamichelle/20089a65e8b90a932f00a723c4ccf696 to your computer and use it in GitHub Desktop.
Save alyssamichelle/20089a65e8b90a932f00a723c4ccf696 to your computer and use it in GitHub Desktop.
File from the Kendo UI Financial Portfolio Demo App: examples-standalone/finance-portfolio/src/app/components/stock-chart/stock-chart.component.html
<div class="container">
<div class="row py-4 d-flex justify-content-between align-items-center">
<div class="col col-4 d-flex daterange-input-wrap">
<kendo-daterange>
<kendo-dateinput
kendoDateRangeStartInput
[autoCorrectOn]="'change'"
[min]="calendarMin"
[max]="calendarMax"
[(ngModel)]="range.start"
(valueChange)="handleRangeChange($event, range.end)"
>
</kendo-dateinput>
<kendo-dateinput
kendoDateRangeEndInput
[autoCorrectOn]="'change'"
[min]="calendarMin"
[max]="calendarMax"
[(ngModel)]="range.end"
(valueChange)="handleRangeChange(range.start, $event)"
>
</kendo-dateinput>
</kendo-daterange>
</div>
<ul class="k-reset d-flex col-12 col-sm-8 col-md-6 col-lg-3 justify-content-center justify-content-sm-start">
<li class="ml-3" *ngFor="let filter of timeFilters">
<span
[ngClass]="{ 'active': activeTimeFilter === filter.duration }"
class="list-item time-filter-item"
(click)="onTimeFilterClick(filter.duration)"
>
{{ filter.name }}
</span>
</li>
</ul>
<div class="col-12 col-sm-4 col-md-6 col-lg-4 text-center text-sm-right mt-3 mt-sm-0">
<kendo-dropdownlist
class="dropdown-list-selection interval"
[style.width.px]="135"
[style.marginRight.px]="8"
[data]="intervals"
[iconClass]="'k-i-arrow-chevron-down'"
[textField]="'name'"
[valueField]="'interval'"
[(value)]="selectedInterval"
[itemDisabled]="disableIncompatibleIntervals"
>
<ng-template kendoDropDownListValueTemplate let-dataItem>
<span class="service-category"> Interval: {{ dataItem?.name }}</span>
</ng-template>
</kendo-dropdownlist>
<kendo-dropdownlist
[style.width.px]="140"
class="dropdown-list-selection"
[data]="charts"
[iconClass]="'k-i-arrow-chevron-down'"
[valueField]="'value'"
[textField]="'text'"
[valuePrimitive]="true"
[(value)]="chartType"
>
<ng-template kendoDropDownListValueTemplate let-dataItem>
<span class="chart-category selected d-flex align-items-center">
<img src="assets/{{ dataItem.value }}.png"/>
{{ dataItem.text }}
</span>
</ng-template>
<ng-template kendoDropDownListItemTemplate let-dataItem>
<span class="chart-category d-flex align-items-center">
<img src="assets/{{ dataItem.value }}.png"/>
{{ dataItem.text }}
</span>
</ng-template>
</kendo-dropdownlist>
</div>
</div>
<div class="row">
<div class="col">
<app-stock-details
[chartType]="chartType"
[interval]="selectedInterval?.interval"
[range]="normalizedRange"
[symbol]="stockDataService.selectedStock?.symbol"
>
</app-stock-details>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment