From 1e6e481958fea99e5c29628d0339cccde1305302 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 6 Feb 2018 11:32:00 -0500
Subject: [PATCH] docs(demos): add dynamic segment button demo

---
 .../src/app/segment/segment-page.component.ts | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/demos/angular/src/app/segment/segment-page.component.ts b/packages/demos/angular/src/app/segment/segment-page.component.ts
index 21496c45e1..8c3328c363 100644
--- a/packages/demos/angular/src/app/segment/segment-page.component.ts
+++ b/packages/demos/angular/src/app/segment/segment-page.component.ts
@@ -59,6 +59,22 @@ import { Component } from '@angular/core';
         </ion-segment>
         <ion-button color="dark" (click)="toggleBDisabled()">Toggle Button Disabled</ion-button>
         <ion-button color="dark" (click)="toggleSDisabled()">Toggle Segment Disabled</ion-button>
+
+        <ion-item>
+          <ion-label>Period Days</ion-label>
+          <ion-select [(ngModel)]="valve.periodDays" (ionChange)="periodDaysChange(valve)">
+            <ion-select-option value="1">1 Day</ion-select-option>
+            <ion-select-option value="2">2 Days</ion-select-option>
+            <ion-select-option value="3">3 Days</ion-select-option>
+            <ion-select-option value="4">4 Days</ion-select-option>
+            <ion-select-option value="5">5 Days</ion-select-option>
+            <ion-select-option value="6">6 Days</ion-select-option>
+            <ion-select-option value="7">7 Days</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-segment [(ngModel)]="valve.selectDay">
+          <ion-segment-button *ngFor="let info of valve.daysInfo" value="{{info.day}}">{{info.day+1}}th day</ion-segment-button>
+        </ion-segment>
       </ion-content>
 
       <ion-footer>
@@ -114,6 +130,32 @@ export class SegmentPageComponent {
   isDisabledB: boolean = true;
   isDisabledS: boolean = false;
 
+  valve = {
+    daysInfo: [],
+    selectDay: '0',
+    periodDays: 3
+  }
+
+  constructor() {
+    this.periodDaysChange(this.valve);
+  }
+
+  periodDaysChange(valve) {
+    valve.periodDays = parseInt(valve.periodDays);
+    if (valve.daysInfo.length < valve.periodDays) {
+      for (let i = valve.daysInfo.length; i < valve.periodDays; ++i) {
+        valve.daysInfo.push({day:i, intervals:[]});
+      }
+    } else if (valve.daysInfo.length > valve.periodDays) {
+      valve.daysInfo = valve.daysInfo.slice(0, valve.periodDays);
+    }
+  }
+
+  addDays(valve) {
+    valve.periodDays += 1;
+    this.periodDaysChange(valve);
+  }
+
   toggleBDisabled() {
     this.isDisabledB = !this.isDisabledB;
   }