diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
index 7a58174a63..c55854fc68 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.html
@@ -61,8 +61,6 @@
   </button>
   <div fxFlex fxLayoutGap="8px" fxLayout="column" class="tb-rate-limits-preview" [ngClass]="{'tb-rate-limits-preview-short': !disabled}">
     <span translate>tenant-profile.rate-limits.preview</span>
-    <div>
-      <tb-rate-limits-text [formControl]="rateLimitsControl"></tb-rate-limits-text>
-    </div>
+    <tb-rate-limits-text [rateLimitsArray]="rateLimitsControl.value"></tb-rate-limits-text>
   </div>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.scss b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.scss
index 64f9c7afe2..2a53096c17 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.scss
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-list.component.scss
@@ -27,7 +27,7 @@
     span {
       padding-left: 1em;
     }
-    div {
+    tb-rate-limits-text {
       border: 1px groove rgba(0, 0, 0, .25);
       border-radius: 4px;
       padding: 1em;
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
index 077ede2e0b..e154a7ce54 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.html
@@ -15,5 +15,4 @@
     limitations under the License.
 
 -->
-<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}"
-     [innerHTML]="rateLimitsText"></div>
+<div class="tb-rate-limits-text" [ngClass]="{disabled: disabled}" [innerHTML]="rateLimitsText"></div>
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts
index 604318d6fd..0b65e97d5d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits-text.component.ts
@@ -14,64 +14,41 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
-import { ControlValueAccessor, FormBuilder, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { RateLimits, rateLimitsArrayToHtml } from './rate-limits.models';
 
 @Component({
   selector: 'tb-rate-limits-text',
   templateUrl: './rate-limits-text.component.html',
-  styleUrls: ['./rate-limits-text.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => RateLimitsTextComponent),
-      multi: true
-    }
-  ]
+  styleUrls: ['./rate-limits-text.component.scss']
 })
-export class RateLimitsTextComponent implements ControlValueAccessor, OnInit {
+export class RateLimitsTextComponent implements OnChanges {
 
   @Input()
-  disabled: boolean;
-
-  noRateLimitsText = this.translate.instant('tenant-profile.rate-limits.not-set');
-
-  public rateLimitsText: string;
-
-  private propagateChange = (v: any) => { };
-
-  constructor(private dialog: MatDialog,
-              private fb: FormBuilder,
-              private translate: TranslateService) {
-  }
-
-  registerOnChange(fn: any): void {
-    this.propagateChange = fn;
-  }
+  rateLimitsArray: Array<RateLimits>;
 
-  registerOnTouched(fn: any): void {
-  }
+  @Input()
+  disabled: boolean;
 
-  ngOnInit() {
-  }
+  rateLimitsText: string;
 
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
+  constructor(private translate: TranslateService) {}
 
-  writeValue(value: Array<RateLimits>): void {
-    this.updateText(value);
+  ngOnChanges(changes: SimpleChanges): void {
+    for (const propName of Object.keys(changes)) {
+      if (propName === 'rateLimitsArray') {
+        const change = changes[propName];
+        this.updateView(change.currentValue);
+      }
+    }
   }
 
-  private updateText(value: Array<RateLimits>) {
-    if (value && value.length) {
+  private updateView(value: Array<RateLimits>): void {
+    if (value?.length) {
       this.rateLimitsText = rateLimitsArrayToHtml(this.translate, value);
     } else {
-      this.rateLimitsText = this.noRateLimitsText;
+      this.rateLimitsText = this.translate.instant('tenant-profile.rate-limits.not-set');
     }
   }
-
 }
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
index 3a6591790f..ac341c8b69 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.html
@@ -21,7 +21,7 @@
     <div [formGroup]="rateLimitsFormGroup" fxFlex fxLayout="row" fxLayoutGap="8px"
          (click)="onClick($event)"
          [matTooltip]="'tenant-profile.rate-limits.edit-limit' | translate" matTooltipPosition="above">
-      <tb-rate-limits-text formControlName="rateLimits"></tb-rate-limits-text>
+      <tb-rate-limits-text [rateLimitsArray]="rateLimitsArray"></tb-rate-limits-text>
     </div>
   </fieldset>
   <button mat-icon-button color="primary" type="button" *ngIf="!disabled"
diff --git a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.ts b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.ts
index 5d25e5a8db..77eb7ee1b3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/tenant/rate-limits/rate-limits.component.ts
@@ -30,6 +30,7 @@ import {
   RateLimitsDetailsDialogData
 } from '@home/components/profile/tenant/rate-limits/rate-limits-details-dialog.component';
 import {
+  RateLimits,
   rateLimitsDialogTitleTranslationMap,
   rateLimitsLabelTranslationMap,
   RateLimitsType,
@@ -66,6 +67,10 @@ export class RateLimitsComponent implements ControlValueAccessor, OnInit, Valida
 
   rateLimitsFormGroup: FormGroup;
 
+  get rateLimitsArray(): Array<RateLimits> {
+    return this.rateLimitsFormGroup.get('rateLimits').value;
+  }
+
   private modelValue: string;
 
   private propagateChange = null;