diff --git a/src/components/segment/segment-button.ts b/src/components/segment/segment-button.ts
new file mode 100644
index 0000000000..59310bf5ac
--- /dev/null
+++ b/src/components/segment/segment-button.ts
@@ -0,0 +1,115 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, Output, Renderer, ViewEncapsulation } from '@angular/core';
+
+import { isPresent, isTrueProperty } from '../../util/util';
+
+/**
+ * @name SegmentButton
+ * @description
+ * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
+ *
+ * @usage
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * Friends
+ *
+ *
+ * Enemies
+ *
+ *
+ *
+ * ```
+ *
+ *
+ * @demo /docs/v2/demos/src/segment/
+ * @see {@link /docs/v2/components#segment Segment Component Docs}
+ * @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs}
+ */
+@Component({
+ selector: 'ion-segment-button',
+ template:
+ '' +
+ '',
+ host: {
+ 'tappable': '',
+ 'class': 'segment-button',
+ 'role': 'button'
+ },
+ encapsulation: ViewEncapsulation.None,
+})
+export class SegmentButton {
+ _disabled: boolean = false;
+
+ /**
+ * @input {string} the value of the segment button. Required.
+ */
+ @Input() value: string;
+
+ /**
+ * @output {SegmentButton} Emitted when a segment button has been clicked.
+ */
+ @Output() ionSelect: EventEmitter = new EventEmitter();
+
+ constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
+
+ /**
+ * @input {boolean} If true, the user cannot interact with this element.
+ */
+ @Input()
+ get disabled(): boolean {
+ return this._disabled;
+ }
+
+ set disabled(val: boolean) {
+ this._disabled = isTrueProperty(val);
+ this._setElementClass('segment-button-disabled', this._disabled);
+ }
+
+ /**
+ * @private
+ */
+ _setElementClass(cssClass: string, shouldAdd: boolean) {
+ this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
+ }
+
+ /**
+ * @private
+ * On click of a SegmentButton
+ */
+ @HostListener('click')
+ onClick() {
+ console.debug('SegmentButton, select', this.value);
+ this.ionSelect.emit(this);
+ }
+
+ /**
+ * @private
+ */
+ ngOnInit() {
+ if (!isPresent(this.value)) {
+ console.warn(' requires a "value" attribute');
+ }
+ }
+
+ /**
+ * @private
+ */
+ set isActive(isActive: any) {
+ this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive);
+ this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive);
+ }
+
+}
diff --git a/src/components/segment/segment.ts b/src/components/segment/segment.ts
index d2d88c3df7..68606f731d 100644
--- a/src/components/segment/segment.ts
+++ b/src/components/segment/segment.ts
@@ -1,123 +1,11 @@
-import { Component, ContentChildren, Directive, ElementRef, EventEmitter, HostListener, Input, Output, Optional, QueryList, Renderer, ViewEncapsulation } from '@angular/core';
+import { ContentChildren, Directive, ElementRef, EventEmitter, Input, Output, Optional, QueryList, Renderer } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Config } from '../../config/config';
import { Ion } from '../ion';
import { isPresent, isTrueProperty } from '../../util/util';
-
-/**
- * @name SegmentButton
- * @description
- * The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
- *
- * @usage
- *
- * ```html
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- *
- * Friends
- *
- *
- * Enemies
- *
- *
- *
- * ```
- *
- *
- * @demo /docs/v2/demos/src/segment/
- * @see {@link /docs/v2/components#segment Segment Component Docs}
- * @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs}
- */
-@Component({
- selector: 'ion-segment-button',
- template:
- '' +
- '',
- host: {
- 'tappable': '',
- 'class': 'segment-button',
- 'role': 'button'
- },
- encapsulation: ViewEncapsulation.None,
-})
-export class SegmentButton {
- _disabled: boolean = false;
-
- /**
- * @input {string} the value of the segment button. Required.
- */
- @Input() value: string;
-
- /**
- * @output {SegmentButton} Emitted when a segment button has been clicked.
- */
- @Output() ionSelect: EventEmitter = new EventEmitter();
-
- constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
-
- /**
- * @input {boolean} If true, the user cannot interact with this element.
- */
- @Input()
- get disabled(): boolean {
- return this._disabled;
- }
-
- set disabled(val: boolean) {
- this._disabled = isTrueProperty(val);
- this._setElementClass('segment-button-disabled', this._disabled);
- }
-
- /**
- * @private
- */
- _setElementClass(cssClass: string, shouldAdd: boolean) {
- this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
- }
-
- /**
- * @private
- * On click of a SegmentButton
- */
- @HostListener('click')
- onClick() {
- console.debug('SegmentButton, select', this.value);
- this.ionSelect.emit(this);
- }
-
- /**
- * @private
- */
- ngOnInit() {
- if (!isPresent(this.value)) {
- console.warn(' requires a "value" attribute');
- }
- }
-
- /**
- * @private
- */
- set isActive(isActive: any) {
- this._renderer.setElementClass(this._elementRef.nativeElement, 'segment-activated', isActive);
- this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-pressed', isActive);
- }
-
-}
-
+import { SegmentButton } from './segment-button';
/**
* @name Segment