In the realm of my webpage, I have a plethora of headings, paragraphs, images, and other data at my disposal. From the backend, a dataset is provided to me that includes an array with various properties housing the desired information. The challenge lies in presenting this data on the page based on these properties. Here is a snippet of the data retrieved from the backend:
{
"result": {
"slogan": "Majeed",
"bannerImage": "data:image/png;base64,...",
"schoolName": "JPSC",
"schoolTenancyName": "JPSC",
"logo": null,
"city": "Harbel",
"county": "Kakata",
"district": "Kakata",
"addressline": "319-Hadi Street, Alhamd COlony, Allama Iqbal Town",
"profilePageContents": [{
"id": "355156f4-3499-4883-846d-e41bed8a2765",
"heading": "Yamaha",
"paragraph": "Hello Guys this is ahsan nissar and this is my school profile page and you can",
"image": "data:image/png;base64,...",
"alignment": "Left"
},
{
"id": "d06ce9a5-94a9-4433-adda-ed7efe93f5b2",
"heading": "Hello friends",
"paragraph": "I am Ahsan and this is my school. No one can enter here without permission.",
"image": "data:image/png;base64,...",
"alignment": "Left"
}
]
}
My task now is to display the profilePageContents, considering the specified property that triggers how the pictures and paragraphs are shown. Upon inspecting the preview, it is evident that all paragraphs are displayed indiscriminately, which is not the intended outcome.
To tackle this issue effectively, I have included relevant TypeScript code below:
... Detailed TypeScript code omitted for brevity ...Upon reviewing the HTML implementation, it seems that there might be room for improvement in how the paragraphs are rendered based on their alignment. If finding a solution involves leveraging Angular class binding or making adjustments using DOM manipulation, any guidance on this matter would be greatly appreciated. Thank you!