Android HtmlView Does not accept size or font face styling

Html view in android does not accept styling or font-family. IOS this works.

Here is a sample code that does not style correctly <HtmlView html="<span><b><font size='10' color='blue' face='lato'>{{item.text}} </font></b></span>" </HtmlView>

[rahadur]

This is how i create a HtmlView custom component.

Angular Component 💥💥💥

import { Component, OnInit, AfterViewInit, Input, ViewChild, ElementRef } from "@angular/core";
import { Color } from 'tns-core-modules/color';

@Component({
	selector: "HtmlViewer",
	moduleId: module.id,
	template: `
		<HtmlView #htmlView [html]="htmlString" (loaded)="onLoaded()"></HtmlView> 
	`,
	styleUrls: ['./html-viewer.component.css']
})
export class HtmlViewerComponent implements OnInit, AfterViewInit {

	@Input('html') html: string;

	@Input('textSize') textSize: number

	@Input('textColor') textColor: string;

	@Input('textLinkColor') textLinkColor: string;

	@ViewChild('htmlView') htmlView: ElementRef;

	htmlString: string;


	constructor() {
		this.htmlString = '';
	}

	ngOnInit(): void {
		this.htmlString = this.html ? this.html : '';
	}


	ngAfterViewInit() {
	}


	onLoaded() {
		let htmlView = this.htmlView.nativeElement.android;

		htmlView.setTextSize(this.textSize);
		htmlView.setTextColor(this.textColor ? new Color(this.textColor).android : new Color('#999999').android);
		htmlView.setLinkTextColor(this.textLinkColor ? new Color(this.textLinkColor).android : new Color('#0000FF').android);
	}
}

[corne-de-bruin]

Hi @captainhaddock29

HTML:

<!-- Styling the content through external css is not possible -->
<HTMLView
        [html]="htmlString"
        #htmlView>
</HTMLView>

This is our Angular component:

export class HtmlViewComponent implements OnChanges {
    @Input()
    public html: string = '';
    @ViewChild('htmlView')
    public htmlView: ElementRef;
    public htmlString: string = '';

    private textColor: string = HEX.textColor;
    private linkColor: string = HEX.linkColor;

    private fontSize: string = '[insert font size]';
    private fontFamily: string = '[insert font family]';
    private fontLocation: string = '[insert font directory example: app/fonts]';
    private font: string = '[insert font file name]';

    public ngOnChanges(): void {
        try {
            this.setHTMLView();
        } catch (exception) {
            console.error(exception);
        }
    }

    protected setHTMLView(): void {
        if (isIOS) {
            this.htmlString = this.template;
            wait(() => this.htmlView.nativeElement.ios, () => {
                const htmlView = this.htmlView.nativeElement.ios;
                const linkTextAttributes: any = NSDictionary.dictionaryWithObjectForKey(
                    new Color(this.linkColor).ios, NSForegroundColorAttributeName
                );
                htmlView.linkTextAttributes = linkTextAttributes;
                htmlView.dataDetectorTypes = UIDataDetectorTypes.None;
            });
        } else if (isAndroid) {
            wait(() => this.htmlView.nativeElement.android, () => {
                const htmlView = this.htmlView.nativeElement.android;
                const LINK_MASK_NONE = 0;
                const parsedHtmlString = android.text.Html.fromHtml(this.html);
                const textColor = android.graphics.Color.parseColor(this.textColor);
                const linkColor = android.graphics.Color.parseColor(this.linkColor);
                const assets = androidApp.context.getAssets();
                const typeface = android.graphics.Typeface.createFromAsset(assets, this.fontLocation + fs.path.separator + this.font);
                htmlView.setAutoLinkMask(LINK_MASK_NONE);
                htmlView.setText(parsedHtmlString);
                htmlView.setTextColor(textColor);
                htmlView.setLinkTextColor(linkColor);
                htmlView.setTypeface(typeface);
            });
        }
    }

    private get template(): string {
        let html = '';

        if (!isNullOrUndefined(this.html)) {
            html = this.html;
        }

        return `
            <style type="text/css">
                body {font-family: "${this.fontFamily}"; font-size: ${this.fontSize};}
                a {text-decoration:none;}
             </style>
             <span>
                 <font color="${this.textColor}">
                     ${html}
                 </font>
            </span>`;
    }
}