How to render static html content in Angular

Question

We have few html pages.We are fetching content of those HTML pages from the database but tags are present in the file.We are using innerHtml (property binding) to render content into Html tags.

I would like to render the entire HTML page from the database in the Angular application.

Is there any way through which I can pull data from the backend alongside HTML tags and render those in Angular?

I'm not sure what you're asking if you could please clarify. Are you talking about wanting to import full html pages with their own html, body, meta tags, etc? As like an iframe? Or as their own page within the application that would still allow things like routing and angular lifecycle events etc etc? Because you wouldn't be able to just replace the angular attached html document with another and expect anything to work the same. — Chris W.
– Chris W., Commented May 13, 2021 at 16:46
I have one service(returning JSON string with Key:Value) through which inner HTML contents are populated.but whenever there is a change then we need to change it in the database by the variable name. Instead of that I want to add one page/div in the database and fetch it from service and render in Angular component.So whenever there will be the change I have to take that HTML make changes/add new contents and update it in database.In this way there will be no impact on front end application. — sujayadkar
– sujayadkar, Commented May 13, 2021 at 16:59

Ben L · Accepted Answer · 2021-05-14 00:29:52Z

0

I think if you pass json with the element type and attributes you can use Renderer2 to dynamically render the content you want. https://angular.io/api/core/Renderer2

answered May 14, 2021 at 0:29

Ben L

7445 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sujayadkar · Accepted Answer · 2021-05-20 03:18:51Z

0

I am able to do this by storing HTML content almost 20 div tags in database and fetching them from API and rendering on UI using innerHTML.

answered May 20, 2021 at 3:18

sujayadkar

1133 silver badges17 bronze badges

Comments

Eliseo · Accepted Answer · 2021-05-20 07:53:50Z

0

you need take account if your html data has styles or headers . I imagine you always can "extract" the inner html between <body> and <\body> using

const innerHTML=(data.match(/(?<=<body>)((.|\n)*?)(?=<\/body>)/) ||[""])[0];

data is the variable you has the whole html

answered May 20, 2021 at 7:53

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to render static html content in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related