HTMLView with ngIf and <br/> tag renders blank

[tsonevn]

From @noumaans on May 4, 2018 20:46

Tell us about the problem

If an HTMLView component is used with an *ngIf, it renders blank / empty if the HTML starts with a <br/> tag.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 4.1.0-2018-04-18-11407
• Cross-platform modules: 4.0.0-2018-05-03-03
• Runtime(s): "tns-ios" 4.1.0-2018-04-24-01
• Plugin(s): (look for the version number in the package.json file of your
  project)

Please tell us how to recreate the issue in as much detail as possible.

Playground Link:
https://play.nativescript.org/?template=play-ng&id=LUVNqq&v=2

NOTE: Remember to make sure the delay is present in ngAfterViewInit - if delay is reduced to 1s, the render starts working again.

Copied from original issue: NativeScript/NativeScript#5783

[tsonevn]

The issue is still reproducible with @next nativescript-angular.

[tsonevn]

Hi @noumaans
In our further investigation, we found that the issue is related to a problem with the correct measuring the component dimensions while loading the HtmlView content.

As a workaround, you can set up the component height, and the content will be appropriately displayed.

<HtmlView  [html]="delayedWithBR.html" height="200"></HtmlView>

[noumaans]

@tsonevn that doesn't work when your height requirement is dynamic since one is rendering a large amount of text - in our case inside a scrollview.

GridLayout with auto,* and height=100% workarounds didn't work either...
Any help for providing this component a dynamic height would be much appreciated.

[tsonevn]

Hi @noumaans,
The current option is to bind the height property and to change its value via code-behind. For example:

<HtmlView backgroundColor="green" *ngIf="delayedWithBR" [height]="hProperty" [html]="delayedWithBR.html"></HtmlView>

[noumaans]

Would this be your recommendation?
1 - set an initial value of height say 100
2 - get device screen size and orientation
3 - perform a calculation in TS to compute the size to allocate to HTMLView
4 - set the height value

Thanks so much for your help. Really appreciate it.

[tsonevn]

Hi @noumaans,
Indeed getting the screen height and calculating the component's height is an option. I will also suggest you reviewing the workaround, which I described here for the NativeScript non-Angular projects and check if it will work as well in NS Angular.