diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index aac510ab44..528588a4e4 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -2,53 +2,6 @@
Segment buttons are groups of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. A segment button can be checked by default by adding the `checked` attribute or by setting the `value` of the segment to the `value` of the segment button. Only one segment button should be selected at a time.
-```html
-
-
-
- Friends
-
-
- Enemies
-
-
-
-
-
-
- Paid
-
-
- Free
-
-
- Top
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Bookmarks
-
-
- Reading List
-
-
- Shared Links
-
-
-```
diff --git a/core/src/components/segment-button/usage/angular.md b/core/src/components/segment-button/usage/angular.md
new file mode 100644
index 0000000000..ce814718a1
--- /dev/null
+++ b/core/src/components/segment-button/usage/angular.md
@@ -0,0 +1,63 @@
+
+```html
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
+
+ Paid
+
+
+ Free
+
+
+ Top
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bookmarks
+
+
+ Reading List
+
+
+ Shared Links
+
+
+```
+
+```javascript
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'segment-button-example',
+ templateUrl: 'segment-button-example.html',
+ styleUrls: ['./segment-button-example.css'],
+})
+export class SegmentButtonExample {
+ segmentButtonClicked(ev: any) {
+ console.log('Segment button clicked', ev);
+ }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/segment-button/usage/javascript.md b/core/src/components/segment-button/usage/javascript.md
new file mode 100644
index 0000000000..c8aaecb0f9
--- /dev/null
+++ b/core/src/components/segment-button/usage/javascript.md
@@ -0,0 +1,58 @@
+
+```html
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
+
+ Paid
+
+
+ Free
+
+
+ Top
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Bookmarks
+
+
+ Reading List
+
+
+ Shared Links
+
+
+```
+
+```javascript
+// Listen for ionClick on all segment buttons
+const segmentButtons = document.querySelectorAll('ion-segment-button')
+for (let i = 0; i < segmentButtons.length; i++) {
+ segmentButtons[i].addEventListener('ionClick', (ev) => {
+ console.log('Segment button clicked', ev);
+ })
+}
+```
\ No newline at end of file
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index dec90a940b..233e91a25e 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -4,63 +4,6 @@ Segments display a group of related buttons, sometimes known as segmented contro
Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
-```html
-
-
-
- Friends
-
-
- Enemies
-
-
-
-
-
-
- Sunny
-
-
- Rainy
-
-
-
-
-
-
- Dogs
-
-
- Cats
-
-
-
-
-
-
- Standard
-
-
- Hybrid
-
-
- Satellite
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
diff --git a/core/src/components/segment/test/preview/index.html b/core/src/components/segment/test/preview/index.html
index ee14866333..3a9578dfeb 100644
--- a/core/src/components/segment/test/preview/index.html
+++ b/core/src/components/segment/test/preview/index.html
@@ -187,6 +187,21 @@
}
}
+ const segments = document.querySelectorAll('ion-segment')
+ for (let i = 0; i < segments.length; i++) {
+ segments[i].addEventListener('ionChange', (ev) => {
+ console.log('Segment value changed', ev);
+ })
+ }
+
+ // Listen for ionClick on all segment buttons
+ const segmentButtons = document.querySelectorAll('ion-segment-button')
+ for (let i = 0; i < segmentButtons.length; i++) {
+ segmentButtons[i].addEventListener('ionClick', (ev) => {
+ console.log('Segment button clicked', ev);
+ })
+ }
+
diff --git a/core/src/components/segment/usage/angular.md b/core/src/components/segment/usage/angular.md
new file mode 100644
index 0000000000..09102fd259
--- /dev/null
+++ b/core/src/components/segment/usage/angular.md
@@ -0,0 +1,71 @@
+```html
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
+
+ Sunny
+
+
+ Rainy
+
+
+
+
+
+
+ Dogs
+
+
+ Cats
+
+
+
+
+
+
+ Standard
+
+
+ Hybrid
+
+
+ Satellite
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```javascript
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'segment-example',
+ templateUrl: 'segment-example.html',
+ styleUrls: ['./segment-example.css'],
+})
+export class SegmentExample {
+ segmentChanged(ev: any) {
+ console.log('Segment changed', ev);
+ }
+}
+```
diff --git a/core/src/components/segment/usage/javascript.md b/core/src/components/segment/usage/javascript.md
new file mode 100644
index 0000000000..acc0bcee23
--- /dev/null
+++ b/core/src/components/segment/usage/javascript.md
@@ -0,0 +1,66 @@
+```html
+
+
+
+ Friends
+
+
+ Enemies
+
+
+
+
+
+
+ Sunny
+
+
+ Rainy
+
+
+
+
+
+
+ Dogs
+
+
+ Cats
+
+
+
+
+
+
+ Standard
+
+
+ Hybrid
+
+
+ Satellite
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```javascript
+// Listen for ionChange on all segments
+const segments = document.querySelectorAll('ion-segment')
+for (let i = 0; i < segments.length; i++) {
+ segments[i].addEventListener('ionChange', (ev) => {
+ console.log('Segment changed', ev);
+ })
+}
+```
\ No newline at end of file