Angular Directives Not Working Under FormattedString Span Tag

[rakeshgirase]

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.

[tsonevn]

Hi @rakeshgirase, Thank you for reporting this issue. I tested this case and indeed this is a real issue and the Span visibility will not be changed dynamically while using the ngIf directive. I am logging this as a bug and for further info, you could keep track on the issue.

[RadouaneRoufid]

+1

[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>

[rakeshgirase]

Hi @trunkovich Thank you for the workaround. I raised this bug because it is not working as expected and ideally should be fixed.

[ibnYusrat]

Still no fix..

[jasoniem9246]

still not working

[Bidou44]

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