feat(range): hookup the ion-range with a custom value accessor

This commit is contained in:
Ken Sodemann
2018-01-31 11:22:07 -06:00
parent 3151aec8de
commit 41ccdd52a6
5 changed files with 22 additions and 14 deletions

View File

@ -5,7 +5,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
// https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158
@Directive({
/* tslint:disable-next-line:directive-selector */
selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime',
selector: 'ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime',
providers: [
{
provide: NG_VALUE_ACCESSOR,

View File

@ -28,7 +28,7 @@ In order to test local changes they need to be copied into `node_modules` after
1. In `packages/core`, run `npm run build`
1. In `packages/demos/angular`, run `rm -rf node_modules/\@ionic/core/dist`
1. In `packages/demos/angular`, run `cp -r ../../core/dist node_modules/\@ionic/core/dist`
1. In `packages/demos/angular`, run `cp -R ../../core/dist node_modules/\@ionic/core/dist`
Use a similar procedure if you want to test local changes to `@ionic/angular`

View File

@ -189,22 +189,27 @@
<ion-row>
<ion-col>
<h2>Segment</h2>
<h2>Range</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-segment [(ngModel)]="segmentValue" >
<ion-segment-button value="taco"></ion-segment-button>
<ion-segment-button value="burrito"></ion-segment-button>
<ion-segment-button value="enchilada"></ion-segment-button>
</ion-segment>
<label for="stdRangeInput">Range Value</label>
<input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"/>
</ion-col>
<ion-col>
Value:
<span >{{segmentValue}}</span>
<span>{{rangeValue}}</span>
<span>{{typeOf(rangeValue)}}</span>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-range id="ionRangeInput" [(ngModel)]="rangeValue"></ion-range>
</ion-col>
<ion-col></ion-col>
</ion-row>
</ion-grid>
<a href='home'>Home</a>

View File

@ -15,6 +15,10 @@ export class BasicInputsPageComponent implements OnInit {
checkboxValue = true;
toggleValue = false;
rangeValue = 15;
searchValue: string;
constructor() {}
ngOnInit() {}

View File

@ -1,5 +1,5 @@
import { Component } from '@angular/core';
import { PopoverController } from '@ionic/angular';
// import { PopoverController } from '@ionic/angular';
@Component({
selector: 'page-one',
@ -14,8 +14,7 @@ export class PopoverPageToPresent {
ngOnInitDetection = 'initial';
constructor(private controller: PopoverController) {
}
// constructor(private controller: PopoverController) { }
ngOnInit() {