From ee833881da3ecaa0a9153397f0c7e62c1923f19c Mon Sep 17 00:00:00 2001
From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Date: Wed, 1 May 2024 13:26:16 -0400
Subject: [PATCH] fix(angular): set active segment button when dynamically
 changing items (#29418)

Issue number: resolves #29414

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In Angular when the segment buttons are dynamically rendered, the
segment will not set the active visual state for the selected segment
after the re-render.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- In Angular the segment will set the active item visually when the
items are dynamically changed

Previously this PR:
https://github.com/ionic-team/ionic-framework/pull/28837 aimed to
resolve https://github.com/ionic-team/ionic-framework/issues/28816. I
have confirmed that the modified approach in the dev-build fixes #29414
and #28816 and the previous change is no longer needed.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `8.0.2-dev.11714411675.10f48160`
---
 core/src/components/segment/segment.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 4b7913d76b..4c425e18b2 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -141,14 +141,6 @@ export class Segment implements ComponentInterface {
   async componentDidLoad() {
     this.setCheckedClasses();
 
-    /**
-     * If the value changes before watchers
-     * are setup, then the ionSelect watch callback
-     * will not fire. As a result, we manually
-     * fire this event when Select is loaded.
-     */
-    this.ionSelect.emit({ value: this.value });
-
     /**
      * We need to wait for the buttons to all be rendered
      * before we can scroll.
@@ -495,6 +487,15 @@ export class Segment implements ComponentInterface {
     }
   };
 
+  private onSlottedItemsChange = () => {
+    /**
+     * When the slotted segment buttons change we need to
+     * ensure that the new segment buttons are checked if
+     * the value matches the segment button value.
+     */
+    this.valueChanged(this.value);
+  };
+
   private getSegmentButton = (selector: 'first' | 'last' | 'next' | 'previous'): HTMLIonSegmentButtonElement | null => {
     const buttons = this.getButtons().filter((button) => !button.disabled);
     const currIndex = buttons.findIndex((button) => button === document.activeElement);
@@ -573,7 +574,7 @@ export class Segment implements ComponentInterface {
           'segment-scrollable': this.scrollable,
         })}
       >
-        <slot></slot>
+        <slot onSlotchange={this.onSlottedItemsChange}></slot>
       </Host>
     );
   }