[Fixed] ngx-translate dynamic form in selector

Issue

I’ve a problem with dynamic form translation.
How can I translate [label] in register.component.html with ngx-translate?

So my code looks:

text-form-input.component.html

<div class="form-group">
<label>{{label}}</label>
    <input 
        [class.is-invalid]="ngControl.touched && ngControl.invalid"
        type={{type}} 
        class="form-control" 
        [formControl]="ngControl.control"
        placeholder={{label}}>

<div *ngIf="ngControl.control.errors?.required" class="invalid-feedback">text to translate {{label}}</div>

<div *ngIf="ngControl.control.errors?.minlength" class="invalid-feedback">{{label}} text to translate {{ngControl.control.errors.minlength['requiredLength']}} </div>

<div *ngIf="ngControl.control.errors?.maxlength" class="invalid-feedback">{{label}} text to translate {{ngControl.control.errors.maxlength['requiredLength']}} </div>

<div *ngIf="ngControl.control.errors?.isMatching" class="invalid-feedback">text to translate</div>
</div>

text-form-input.ts

import { Component, Input, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';

@Component({
  selector: 'app-text-form-input',
  templateUrl: './text-form-input.component.html',
  styleUrls: ['./text-form-input.component.css']
})
export class TextFormInputComponent implements ControlValueAccessor {
  @Input() label: any;
  @Input() type = 'text'


  constructor(@Self() public ngControl: NgControl) {
    this.ngControl.valueAccessor = this;
   }

  writeValue(obj: any): void {

  }
  registerOnChange(fn: any): void {

  }
  registerOnTouched(fn: any): void {

  }


}

register.component.html

<div class="row justify-content-center">
    <div class="col-md-4">
        <form [formGroup]='registerForm' (ngSubmit)="register()" autocomplete="off">
            <h1 class="text-center text-primary">{{'default.register' | translate}}</h1>


            <hr>
            <app-text-form-input [formControl]='registerForm.controls["email"]' [label]='"E-mail"'></app-text-form-input>
            <app-text-form-input [formControl]='registerForm.controls["password"]' [label]='"Hasło"' type="password"></app-text-form-input>
            <app-text-form-input [formControl]='registerForm.controls["confirmPassword"]' [label]='"Powtórz hasło"' type="password"></app-text-form-input>
            <div class="form-group">
                <label >{{'user.role' | translate}}</label>
                <select 
                    formControlName="role" 
                    class="form-control">
                        <option *ngFor="let roles of role " [value]="roles.Role">{{roles.name}}</option>
                </select>
            </div>
            <app-text-form-input [formControl]='registerForm.controls["firstName"]' [label]='"Imię"'></app-text-form-input> 
            <app-text-form-input [formControl]='registerForm.controls["lastName"]' [label]='"Nazwisko"'></app-text-form-input>
            <app-date-form-input [formControl]='registerForm.controls["dateOfBirth"]' [label]='"Data urodzenia"'[maxDate]='maxDate' ></app-date-form-input>
            <div class="form-group">
                <label>{{'user.state' | translate}}</label>
                <select 
                    formControlName="state" 
                    class="form-control">
                        <option *ngFor="let state of states">{{state.name}}</option>
                </select>
            </div>
            <app-text-form-input [formControl]='registerForm.controls["zipCode"]' [label]='"Kod pocztowy"'></app-text-form-input>
            <app-text-form-input [formControl]='registerForm.controls["city"]' [label]='"Miasto"'></app-text-form-input>
            <app-text-form-input [formControl]='registerForm.controls["address"]' [label]='"Adres"'></app-text-form-input>

            <div class="row" *ngIf="validationErrors.length > 0">
                <ul class="text-danger">
                    <li *ngFor="let error of validationErrors">{{error}}</li>
                </ul>
            </div>

            <div class="form-group text-center">
                <button class="btn btn-success mr-1"
                [disabled]="!registerForm.valid"
                 type="submit">{{'default.confirm' | translate}}</button>
                <button class="btn btn-danger ml-1" (click)="cancel()">{{'default.cancel' | translate}}</button>
            </div>

        </form>
        
        <p>Form value {{registerForm.value | json}}</p>
        <p>Form status {{registerForm.status | json}}</p>
    </div>
</div>

So I would like to translate every single [label] from my JSON file.
When I try to bind translation to label I got

Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{}}]

Translation work fine if I added to paragraph using ex. {{‘user.firstName’ | translate}}

Solution

you can try to add code bellow in text-form-input.ts
Maybe it’s not best solution but should work.

ngOnInit(): void {
  this.translateService.get('user.' + this.label).subscribe((data:any)=> {
    this.label = data
    this.label = JSON.parse(JSON.stringify(this.label))
     });
}