Display Dynamic Html and CSS to Angular Component

This blog is about how can we display Html and CSS received from server side. This is helpful while we display dynamic Html and CSS to component page. This html does not include any events.

Let’s start. First I am creating node server to create API which will return Html and CSS data.

I created app.js file with /getPage API which reads the html and css file from server and return the data to frontend.

Now we will create Angular Application using ng new application-name command. We are going to bind html using innerHtml attribute.

Create service to call API to get data.

Html can bind to component using innerhtml but css can’t bind directly. We need to append new style element using Renderer2 package of angular.

After this start node server and run angular application using ng serve command. It will display design and content received from server.

So, by using innerHtml attribute and Renderer2 package of angular we can make component dynamic. Whatever Html and CSS content received from server is displayed in that component.