Retriving color from JSON API and display this in html file

Hi, I have a json API with hexadecimal color. I want to to display this in html file. how to do this?

provide your little bit a code to understand your situation

I think there are many solutions to achieve the behavior you want, try out following:

In your module:

// Declare a modules variable, which will store the value of the retrieved hexcode
protected hexColor: string = null;

// Some function, which will get the hex color from a json api
protected getHexColorFromJSON(): void {

	this.myApiCal().then((data: any) => {

		// Assign the retrieved data to the modules variable
		this.hexColor = data;

	}).catch((error: Error) => {

Now, after you’ve got your data from your api, you can use the modules variable to work with it in your markup:

<div [ngStyle]="{ 'background-color': this.hexColor }"></div>

Hope it helps.


1 Like