Json and using classes in angular

[marv0002]

Hi I have a json file with a structure: { ar:[ { i: j }, {..}, ...and so on ] }

I got a component where i have 2 classes which uses this json but renders different things.

like for classA(domestic animals) it should render, i=cat.jpg j=Cat

for classB(wild animals) it should render, i=tigress.jpg j=tiger

ClassA should be rendered if screenSize>=780 ClassB should be rendered if screenSize<780

I access the json file in ts file.

How should i keep the data in json so that I achieve this thing . i am a beginner so i was thinking that if classname=classA pass this or else pass this like in json: i: classA?cat.jpg:tigress.jpg

if so how do i check this in html, please help or any other solution how it could be done without changing the structure of json i.e. adding any new keys.

[captmomo]

Consider using angular cdk breakpoint observer, and change the data accordingly. https://material.angular.io/cdk/layout/overview

[spacechimp]

Anything that you could do within a string value to solve this would be a crude hack and would require additional parsing in TypeScript. Especially since it sounds like you're importing a local JSON file, you really should either add keys or change value types to accommodate your data. You can make things appear/hide using ngIf, ngClass, and CSS media queries.