fix(segment): get working with dynamic buttons

combines like code and matches the stencil guide

packages/core/src/components/segment/segment.tsx

@@ -12,16 +12,8 @@ import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@s
   }
 })
 export class Segment {
-  // TODO typing
-  buttons: any;
-
   @Element() private el: HTMLElement;
 
-  /**
-   * Emitted when the value property has changed.
-   */
-  @Event() ionChange: EventEmitter<SegmentEventDetail>;
-
   /**
    * The color to use for the text color.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
@@ -47,22 +39,17 @@ export class Segment {
   @Watch('value')
   protected valueChanged(val: string) {
     this.selectButton(val);
+    this.ionChange.emit();
   }
 
+  /**
+   * Emitted when the value property has changed.
+   */
+  @Event() ionChange: EventEmitter;
+
+
   componentDidLoad() {
-    this.buttons = this.el.querySelectorAll('ion-segment-button');
-
-    for (let i = 0; i < this.buttons.length; i++) {
-      const button = this.buttons[i];
-
-      button.activated = (button.value === this.value);
-
-      // If there is no value set on the segment and a button
-      // is checked we should activate it
-      if (!this.value && button.checked) {
-        button.activated = button.checked;
-      }
-    }
+    this.selectButton(this.value);
   }
 
   @Listen('ionClick')
@@ -70,20 +57,22 @@ export class Segment {
     const selectedButton = ev.target as HTMLIonSegmentButtonElement;
 
     this.value = selectedButton.value;
-    this.selectButton(this.value);
-
-    // TODO should this move to valueChanged
-    this.ionChange.emit();
   }
 
   selectButton(val: string) {
-    for (let i = 0; i < this.buttons.length; i++) {
-      const button = this.buttons[i];
-      button.activated = (button.value === val);
-    }
+    const buttons = this.el.querySelectorAll('ion-segment-button');
 
-    // returning true tells the renderer to queue an update
-    return true;
+    for (let i = 0; i < buttons.length; i++) {
+      const button = buttons[i];
+
+      button.activated = (button.value === val);
+
+      // If there is no value set on the segment and a button
+      // is checked we should activate it
+      if (!val && button.checked) {
+        button.activated = button.checked;
+      }
+    }
   }
 
   hostData() {
@@ -98,10 +87,3 @@ export class Segment {
     return <slot></slot>;
   }
 }
-
-export interface SegmentEvent extends CustomEvent {
-  detail: SegmentEventDetail;
-}
-
-export interface SegmentEventDetail {
-}

packages/core/src/components/segment/test/basic/index.html

@@ -79,6 +79,9 @@
               Inactive
             </ion-segment-button>
           </ion-segment>
+
+          <!-- Dynamic Buttons -->
+          <ion-segment id="dynamicButtons" color="dark"></ion-segment>
         </div>
 
         <div padding-horizontal>
@@ -120,6 +123,23 @@
             });
           }
 
+          var dynamicButtons = document.getElementById('dynamicButtons');
+          updateSegmentButtons(2);
+
+          setTimeout(function() {
+            updateSegmentButtons(4);
+          }, 4000);
+
+          function updateSegmentButtons(length) {
+            dynamicButtons.innerHTML = '';
+
+            for (var i = 0; i < length; i++) {
+              dynamicButtons.innerHTML += `
+                <ion-segment-button value="segment-${i}">
+                  Btn ${i}
+                </ion-segment-button>`;
+            }
+          }
 
         </script>
       </ion-content>