carbon-components-angular 5.72.0 → 5.72.2

package/docs/documentation/components/TextareaLabelComponent.html

@@ -310,6 +310,10 @@
                                     <span class="modifier">Private</span>
                                 <a href="#_inputListener" >_inputListener</a>
                             </li>
+                            <li>
+                                    <span class="modifier">Private</span>
+                                <a href="#_subscription" >_subscription</a>
+                            </li>
                             <li>
                                     <span class="modifier">Private</span>
                                 <a href="#_textareaElement" >_textareaElement</a>
@@ -506,7 +510,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/input/textarea-label.component.ts:248</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="254" class="link-to-prism">src/input/textarea-label.component.ts:254</a></div>
                             </td>
                         </tr>
 
@@ -564,7 +568,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="197" class="link-to-prism">src/input/textarea-label.component.ts:197</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="199" class="link-to-prism">src/input/textarea-label.component.ts:199</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -596,7 +600,7 @@
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="227" class="link-to-prism">src/input/textarea-label.component.ts:227</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="229" class="link-to-prism">src/input/textarea-label.component.ts:229</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -625,7 +629,7 @@ on each change. Excess words are trimmed from the end of the value.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="232" class="link-to-prism">src/input/textarea-label.component.ts:232</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="234" class="link-to-prism">src/input/textarea-label.component.ts:234</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -657,7 +661,7 @@ on each change. Excess words are trimmed from the end of the value.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="162" class="link-to-prism">src/input/textarea-label.component.ts:162</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="164" class="link-to-prism">src/input/textarea-label.component.ts:164</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -689,7 +693,7 @@ on each change. Excess words are trimmed from the end of the value.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="214" class="link-to-prism">src/input/textarea-label.component.ts:214</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="216" class="link-to-prism">src/input/textarea-label.component.ts:216</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -722,7 +726,7 @@ counter alongside the label.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="202" class="link-to-prism">src/input/textarea-label.component.ts:202</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="204" class="link-to-prism">src/input/textarea-label.component.ts:204</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -749,7 +753,7 @@ counter alongside the label.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="177" class="link-to-prism">src/input/textarea-label.component.ts:177</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="179" class="link-to-prism">src/input/textarea-label.component.ts:179</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -781,7 +785,7 @@ counter alongside the label.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="208" class="link-to-prism">src/input/textarea-label.component.ts:208</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="210" class="link-to-prism">src/input/textarea-label.component.ts:210</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -814,7 +818,7 @@ screen readers.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="185" class="link-to-prism">src/input/textarea-label.component.ts:185</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="187" class="link-to-prism">src/input/textarea-label.component.ts:187</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -841,7 +845,7 @@ screen readers.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="181" class="link-to-prism">src/input/textarea-label.component.ts:181</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="183" class="link-to-prism">src/input/textarea-label.component.ts:183</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -873,7 +877,7 @@ screen readers.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="157" class="link-to-prism">src/input/textarea-label.component.ts:157</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="159" class="link-to-prism">src/input/textarea-label.component.ts:159</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -901,7 +905,7 @@ its input counterpart through the &#39;for&#39; attribute.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="172" class="link-to-prism">src/input/textarea-label.component.ts:172</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="174" class="link-to-prism">src/input/textarea-label.component.ts:174</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -929,7 +933,7 @@ Since we cannot pass ng-content down easily from label component, we will accept
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="220" class="link-to-prism">src/input/textarea-label.component.ts:220</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="222" class="link-to-prism">src/input/textarea-label.component.ts:222</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -962,7 +966,7 @@ counter to display.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="166" class="link-to-prism">src/input/textarea-label.component.ts:166</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="168" class="link-to-prism">src/input/textarea-label.component.ts:168</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -989,7 +993,7 @@ counter to display.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="173" class="link-to-prism">src/input/textarea-label.component.ts:173</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="175" class="link-to-prism">src/input/textarea-label.component.ts:175</a></div>
                             </td>
                         </tr>
             </tbody>
@@ -1015,7 +1019,7 @@ counter to display.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="189" class="link-to-prism">src/input/textarea-label.component.ts:189</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="191" class="link-to-prism">src/input/textarea-label.component.ts:191</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -1042,7 +1046,7 @@ counter to display.</p>
                 </tr>
                         <tr>
                             <td class="col-md-2" colspan="2">
-                                    <div class="io-line">Defined in <a href="" data-line="193" class="link-to-prism">src/input/textarea-label.component.ts:193</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="195" class="link-to-prism">src/input/textarea-label.component.ts:195</a></div>
                             </td>
                         </tr>
                 <tr>
@@ -1080,7 +1084,7 @@ counter to display.</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/input/textarea-label.component.ts:243</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/input/textarea-label.component.ts:245</a></div>
                         </td>
                     </tr>
 
@@ -1106,7 +1110,7 @@ counter to display.</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/input/textarea-label.component.ts:138</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/input/textarea-label.component.ts:140</a></div>
                         </td>
                     </tr>
 
@@ -1132,7 +1136,7 @@ counter to display.</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/input/textarea-label.component.ts:142</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/input/textarea-label.component.ts:144</a></div>
                         </td>
                     </tr>
 
@@ -1158,7 +1162,7 @@ counter to display.</p>
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/input/textarea-label.component.ts:146</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/input/textarea-label.component.ts:148</a></div>
                         </td>
                     </tr>
 
@@ -1195,15 +1199,16 @@ counter to display.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="346"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:346</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="352"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:352</a></div>
                         </td>
                     </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Attaches the input event listener, ensuring it is never added twice.</p>
+                        <div class="io-description"><p>Attaches the counter listener, listen for either ngControl or native DOM input
+event listener</p>
 </div>
 
                         <div class="io-description">
@@ -1236,8 +1241,8 @@ counter to display.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="400"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:400</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="430"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:430</a></div>
                         </td>
                     </tr>
 
@@ -1305,15 +1310,16 @@ counter to display.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="393"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:393</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="420"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:420</a></div>
                         </td>
                     </tr>
 
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Removes the input event listener and clears the cached reference.</p>
+                        <div class="io-description"><p>Removes the subscription (NgControl path) and removes the DOM listener
+(fallback path). Safe to call when neither is active.</p>
 </div>
 
                         <div class="io-description">
@@ -1346,8 +1352,8 @@ counter to display.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="332"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:332</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="337"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:337</a></div>
                         </td>
                     </tr>
 
@@ -1390,8 +1396,8 @@ If <code>maxCount</code> is unset or the mode is <code>&quot;word&quot;</code>,
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="372"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:372</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="399"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:399</a></div>
                         </td>
                     </tr>
 
@@ -1475,8 +1481,8 @@ any trailing content (partial word or space) beyond the limit is dropped.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="322"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:322</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="327"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:327</a></div>
                         </td>
                     </tr>
 
@@ -1538,8 +1544,8 @@ any trailing content (partial word or space) beyond the limit is dropped.</p>
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="259"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:259</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="265"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:265</a></div>
                         </td>
                     </tr>
 
@@ -1578,8 +1584,8 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="297"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:297</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="302"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:302</a></div>
                         </td>
                     </tr>
 
@@ -1647,8 +1653,8 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
 
                     <tr>
                         <td class="col-md-4">
-                            <div class="io-line">Defined in <a href="" data-line="318"
-                                    class="link-to-prism">src/input/textarea-label.component.ts:318</a></div>
+                            <div class="io-line">Defined in <a href="" data-line="323"
+                                    class="link-to-prism">src/input/textarea-label.component.ts:323</a></div>
                         </td>
                     </tr>
 
@@ -1695,7 +1701,39 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/input/textarea-label.component.ts:248</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="254" class="link-to-prism">src/input/textarea-label.component.ts:254</a></div>
+                        </td>
+                    </tr>
+
+
+        </tbody>
+    </table>
+    <table class="table table-sm table-bordered">
+        <tbody>
+            <tr>
+                <td class="col-md-4">
+                    <a name="_subscription"></a>
+                    <span class="name">
+                            <span class="modifier">Private</span>
+                        <span ><b>_subscription</b></span>
+                        <a href="#_subscription"><span class="icon ion-ios-link"></span></a>
+                    </span>
+                </td>
+            </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Type : </i>    <code>Subscription | null</code>
+
+                    </td>
+                </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <i>Default value : </i><code>null</code>
+                    </td>
+                </tr>
+                    <tr>
+                        <td class="col-md-4">
+                                <div class="io-line">Defined in <a href="" data-line="251" class="link-to-prism">src/input/textarea-label.component.ts:251</a></div>
                         </td>
                     </tr>
 
@@ -1727,7 +1765,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="246" class="link-to-prism">src/input/textarea-label.component.ts:246</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="248" class="link-to-prism">src/input/textarea-label.component.ts:248</a></div>
                         </td>
                     </tr>
 
@@ -1762,7 +1800,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/input/textarea-label.component.ts:243</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="245" class="link-to-prism">src/input/textarea-label.component.ts:245</a></div>
                         </td>
                     </tr>
 
@@ -1794,7 +1832,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="152" class="link-to-prism">src/input/textarea-label.component.ts:152</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="154" class="link-to-prism">src/input/textarea-label.component.ts:154</a></div>
                         </td>
                     </tr>
 
@@ -1836,7 +1874,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="241" class="link-to-prism">src/input/textarea-label.component.ts:241</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="243" class="link-to-prism">src/input/textarea-label.component.ts:243</a></div>
                         </td>
                     </tr>
 
@@ -1867,7 +1905,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="235" class="link-to-prism">src/input/textarea-label.component.ts:235</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="237" class="link-to-prism">src/input/textarea-label.component.ts:237</a></div>
                         </td>
                     </tr>
 
@@ -1903,7 +1941,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                     <tr>
                         <td class="col-md-4">
-                                <div class="io-line">Defined in <a href="" data-line="238" class="link-to-prism">src/input/textarea-label.component.ts:238</a></div>
+                                <div class="io-line">Defined in <a href="" data-line="240" class="link-to-prism">src/input/textarea-label.component.ts:240</a></div>
                         </td>
                     </tr>
 
@@ -1932,7 +1970,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="138" class="link-to-prism">src/input/textarea-label.component.ts:138</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="140" class="link-to-prism">src/input/textarea-label.component.ts:140</a></div>
                                 </td>
                             </tr>
 
@@ -1954,7 +1992,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="142" class="link-to-prism">src/input/textarea-label.component.ts:142</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="144" class="link-to-prism">src/input/textarea-label.component.ts:144</a></div>
                                 </td>
                             </tr>
 
@@ -1976,7 +2014,7 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
                 </tr>
                             <tr>
                                 <td class="col-md-4">
-                                    <div class="io-line">Defined in <a href="" data-line="146" class="link-to-prism">src/input/textarea-label.component.ts:146</a></div>
+                                    <div class="io-line">Defined in <a href="" data-line="148" class="link-to-prism">src/input/textarea-label.component.ts:148</a></div>
                                 </td>
                             </tr>
 
@@ -2001,6 +2039,8 @@ counter listener when <code>enableCounter</code> is already <code>true</code> on
 	ChangeDetectorRef,
 	SimpleChanges
 } from &quot;@angular/core&quot;;
+import { Subscription } from &quot;rxjs&quot;;
+import { startWith } from &quot;rxjs/operators&quot;;
 
 import { TextArea } from &quot;./text-area.directive&quot;;
 
@@ -2220,7 +2260,7 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
 	 */
 	@Input() decorator: TemplateRef&lt;any&gt;;
 
-	//  Tracks current character / word count for the counter display.
+	// Tracks current character / word count for the counter display.
 	textCount &#x3D; 0;
 
 	// @ts-ignore
@@ -2233,7 +2273,11 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
 
 	// Cached reference to the textarea element, set once in ngAfterViewInit.
 	private _textareaElement: HTMLTextAreaElement | null &#x3D; null;
-	// Cached listener so it can be removed precisely (avoids anonymous-function leak)
+
+	// RxJS subscription used when NgControl is available (template-driven &amp; reactive forms).
+	private _subscription: Subscription | null &#x3D; null;
+
+	// Fallback DOM listener used only when no NgControl is present (plain textarea).
 	private _inputListener: ((e: Event) &#x3D;&gt; void) | null &#x3D; null;
 
 	/**
@@ -2281,7 +2325,6 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
 
 	/**
 	 * Attach/remove listener and seed &#x60;textCount&#x60; from the textarea&#x27;s current value.
-	 * @param changes
 	 */
 	ngOnChanges(changes: SimpleChanges) {
 		if (changes.enableCounter &amp;&amp; !changes.enableCounter.firstChange) {
@@ -2330,27 +2373,49 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
 	}
 
 	/**
-	 * Attaches the input event listener, ensuring it is never added twice.
+	 * Attaches the counter listener, listen for either ngControl or native DOM input
+	 * event listener
 	 */
 	private _attachCounterListener(): void {
 		this._detachCounterListener();
-		if (!this._textareaElement) {
-			return;
-		}
-		this._inputListener &#x3D; (e: Event) &#x3D;&gt; {
-			const el &#x3D; e.target as HTMLTextAreaElement;
-			// Word-mode enforcement: clamp value to maxCount words on each input so
-			// the textarea never holds more words than allowed.  Character mode relies
-			// on the native &#x60;maxlength&#x60; attribute set by the developer.
-			if (this.counterMode &#x3D;&#x3D;&#x3D; &quot;word&quot; &amp;&amp; this.maxCount !&#x3D; null) {
-				const clamped &#x3D; this._truncateToWordLimit(el.value || &quot;&quot;, this.maxCount);
-				if (clamped !&#x3D;&#x3D; el.value) {
-					el.value &#x3D; clamped;
-				}
+
+		const control &#x3D; this.textArea?.ngControl;
+		if (control?.valueChanges) {
+			// NgControl listener
+			this._subscription &#x3D; control.valueChanges
+				.pipe(startWith(control.value))
+				.subscribe((value: string) &#x3D;&gt; {
+					const raw &#x3D; value || &quot;&quot;;
+
+					if (this.counterMode &#x3D;&#x3D;&#x3D; &quot;word&quot; &amp;&amp; this.maxCount !&#x3D; null) {
+						const clamped &#x3D; this._truncateToWordLimit(raw, this.maxCount);
+						if (clamped !&#x3D;&#x3D; raw) {
+							// Write back through the control so the form model stays in sync.
+							// emitEvent false to avoid infinite loop
+							control?.control?.setValue(clamped, { emitEvent: false });
+						}
+					}
+
+					this.textCount &#x3D; this._countValue(raw);
+					this.changeDetectorRef.markForCheck();
+				});
+		} else {
+			// Fallback DOM path
+			if (!this._textareaElement) {
+				return;
 			}
-			this.textCount &#x3D; this._countValue(el.value || &quot;&quot;);
-		};
-		this._textareaElement.addEventListener(&quot;input&quot;, this._inputListener);
+			this._inputListener &#x3D; (e: Event) &#x3D;&gt; {
+				const el &#x3D; e.target as HTMLTextAreaElement;
+				if (this.counterMode &#x3D;&#x3D;&#x3D; &quot;word&quot; &amp;&amp; this.maxCount !&#x3D; null) {
+					const clamped &#x3D; this._truncateToWordLimit(el.value || &quot;&quot;, this.maxCount);
+					if (clamped !&#x3D;&#x3D; el.value) {
+						el.value &#x3D; clamped;
+					}
+				}
+				this.textCount &#x3D; this._countValue(el.value || &quot;&quot;);
+			};
+			this._textareaElement.addEventListener(&quot;input&quot;, this._inputListener);
+		}
 	}
 
 	/**
@@ -2375,11 +2440,14 @@ export class TextareaLabelComponent implements AfterViewInit, OnChanges, OnDestr
 		return wordsSeen &lt; limit ? value : value.slice(0, cutIndex);
 	}
 
-
 	/**
-	 * Removes the input event listener and clears the cached reference.
+	 * Removes the subscription (NgControl path) and removes the DOM listener
+	 * (fallback path). Safe to call when neither is active.
 	 */
 	private _detachCounterListener(): void {
+		this._subscription?.unsubscribe();
+		this._subscription &#x3D; null;
+
 		if (this._inputListener &amp;&amp; this._textareaElement) {
 			this._textareaElement.removeEventListener(&quot;input&quot;, this._inputListener);
 			this._inputListener &#x3D; null;