Angular Directives Not Working Under FormattedString Span Tag

For Some reason Angular Ng Directives are not working Following is a code sample:

<Button dock="top" class="btn btn-primary btn-rounded-lg" style="margin: 5;">
    <FormattedString>
        <Span text="Question {{state.questionNumber}}"></Span>
        <Span *ngIf="isPracticeMode()" text=" of {{state.totalQuestions}}">
        </Span>
    </FormattedString>
</Button>

When you toggle between items where isPractiveMode gives you true and false then the Formatted String becomes longer and longer. Please find the image attached.

[trunkovich]

@rakeshgirase I’d suggest you creating FormattedString in component and bind it to the Label. Example:

  formattedString: FormattedString;

  ngOnChanges(changes): void {
    if (changes && changes.job && changes.job.currentValue) {
      this.formattedString = this.generateValuesFormattedString(changes.job.currentValue);
    }
  }

  generateValuesFormattedString(job: Job): FormattedString {
    const formattedString = new FormattedString();
    _.each(job.values, (value, i) => {
      const titleSpan = new Span();
      const answerSpan = new Span();
      titleSpan.text = `${value.attribute.title}\n`;
      let answer = `${getAnswer(value)}`;
      answer += i < (job.values.length - 1) ? '\n\n' : '';
      answerSpan.text = answer;
      answerSpan.color = new Color('#333333');
      formattedString.spans.push(titleSpan, answerSpan);
    });

    return formattedString;
  }

<Label *ngIf="formattedString" textWrap="true" [formattedText]="formattedString"></Label>

[Bidou44]

@tsonevn This is still not working, should I create a new issue for this?