I have an angular project I'm working on where I'm trying to store an object that's being populated from a server in an HTML data attribute. This object looks something like this:

{"decimalPlaces": "2", "soft": "false"}

I've seen other solutions on stack overflow but they use jquery and I can't use that here. What I would like to be able to do is just feed the entire object to one HTML data attribute rather than have one data attribute for every property in this object. I would like for it to look something like the below line, and then be able to pull out precise data as needed from the angular component.ts file:

data-everything="allData"

And NOT like this

data-decimals="allData.decimalPlaces"
data-soft="allData.soft"

Is this possible? Also I have tried JSON.stringify as suggested in other solutions as well, in addition to console.dir to see if I could pull any data out of this "allData" but neither helped.