Save the Angular HTML code of components in a database and display them as individual components

I have a project where users can edit and add Angular Component code in HTML & TS format. When I use the HTML code on the view, it works correctly and shows the Angular Component. However, when retrieving it from the SQL database, only the text is displayed.

The HTML code comes from the database using a stored procedure with NVarchar data type.

TS Code :

this.stringifiedData = JSON.stringify(this.postdata);
this.helpService.GetComponentContent(this.uRL_Address, this.sp_Name, 
this.stringifiedData).subscribe(val => {
this.tableJSon = val;
this.stringifiedData = JSON.stringify(this.tableJSon);
this.Table_JS_Data = JSON.parse(this.stringifiedData);

HTML:

{{this.Table_JS_Data[0].HtmlCode}}

And the result is:

https://i.sstatic.net/HpLLL.png

The problem is that I want to display it as an Angular component rather than just text. Is there a way to achieve this? Any ideas?

angulartypescript

Answer №1

Consider attempting it like this:

<section [innerHTML]="Table_JS_Value[0].HtmlContent"></section>

Answer №2

When utilizing Angular, content enclosed within {{...}} is treated as string interpolation. To enable the rendering of actual HTML code, you must bind it to the innerHTML property within the HTML structure.

Here's an example of how this can be achieved:

<div [innerHTML]="this.Data[0].HtmlContent"></div>

Answer №3

From my understanding, it is not feasible. Component templates must be compiled into actual HTML, which cannot occur at runtime in the browser if inserted as raw HTML.

You may follow the suggestion provided by alifnaiech in his response, but keep in mind that it will only function with valid HTML that the browser can process. Using Angular components that are not integrated as web components will not yield results.

If you anticipate receiving structured content for these "components" from the backend, consider storing JSON data representing this structure and utilizing a static template to render the "component" through use of *ngIf, *ngFor, etc.

If this isn't applicable, you have the option to explore ComponentFactory (which includes links to tutorials on dynamic component usage) for handling more complex scenarios.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Following an update, the functioning of Visual Studio Tools for Apache Cordova ceases to operate accurately

Currently working on an ionic application using Visual Studio Tools for Apache Cordova, everything was going smoothly until I decided to update the Tools for Apache Cordova and TypeScript Tools for Visual Studio. Following the update, the Ripple emulator s ...

typescriptionic-frameworkvisual-studio-cordovaripple

Issue with updating BehaviorSubject not being reflected when called from my service component has been identified

In my HomeComponent, I am currently using *ngIf to switch between 3 components. The focus right now is on the relationship between two of them - the ProductListComponent and the ProductDetailComponent. Inside the ProductListComponent, there is a ProductLis ...

angulartypescript

Angular 2 Service's filtering functionality can be enhanced with an Array parameter

I developed a function to retrieve filtered results from a JSON dataset. getItem(id: string): Observable<any[]> { return this.http.get('path/to/my.json') .map((response) => { let results: any = response.json( ...

angulartypescript

Issue with Angular and CharJS: TypeError occurs when trying to read property '15' of an undefined value

An error message was encountered as follows: ERROR TypeError: Cannot read property '15' of undefined at ChartElement.getPixelForValue (Chart.js:14599) at ChartElement.updateElement (Chart.js:5930) at ChartElement.addElementAndReset (Chart.js:3781 ...

angulartypescriptchart.jsangular8

Angular resolvers which produce observables will only pause until the initial value is delivered

Before my components are rendered, my application requires basic data that needs to be accessible to all components. Thus, I created a resolver that returns an observable. export const appRoutes: Route[] = [ { path: '', resolve: ...

angularrxjsrxjs-observablesangular-resolver

Declaring NgModules in RC5

After updating to angular 2 RC5, I was receiving warnings instructing me to relocate my components to module declarations: The NgModule AppModule is using AcademylistComponent via "entryComponents" but it was not declared or imported! This warning will ...

angulartypescript

Out of nowhere, the Typescript compiler began spewing out unexpected errors

I'm experiencing a sudden influx of errors while trying to run the typescript compiler for my Angular 2 project. I haven't made any significant changes knowingly and even after cloning a fresh copy from the repository, the errors persist. The err ...

node.jsangular

Angular with Firebase: How to ignore a field in a query

I am curious to see if my current structure is compatible with Firebase, or if I need to make adjustments. Let's take a look at an example using the "/rooms" endpoint, which contains an array of Room objects: export class Room { id: number; p ...

javascriptangulartypescriptfirebase

Exploring Angular's Subcomponents

While working on my application, I encountered a dilemma. I currently pass data from the main component to the subcomponents after pulling it from the API with a single request. Should I continue with this approach or have each component make its own separ ...

angulartypescriptcomponents

Setting up Firebase remote config in an Angular 8 application

Exploring the new features of Firebase, I have decided to implement remote config on a webapp during this holiday season. My goal is to simplify the process for a client whose company website will display their holiday hours. Snippet of HTML template: &l ...

angularfirebase

It is not possible to access an object's properties using bracket notation when the index is a variable

Is there a way to convert the JavaScript code below into TypeScript? function getProperties(obj) { for (let key in obj) { if (obj.hasOwnProperty(key)) { console.log(obj[key]); } } } I've been trying to find a solution but it seems t ...

typescript

Create a circle surrounding the latitude and longitude on a Bing Maps angular display

I successfully integrated the Bing map with Angular using the angular-map package, and now I want to draw a circle around a given latitude and longitude. To achieve this, I installed the following npm packages: npm install --save angular-maps npm ins ...

angulartypescriptdictionary

Activate TypeScript EMCAScript 6 support for Cordova projects in Visual Studio

I am interested in utilizing the async/await feature of TypeScript in my VS2015 Cordova project. I have updated "target": "es6" in tsconfig.json Although there are no errors shown in intellisense, I encounter the following error while building the project ...

typescriptvisual-studio-2015taco

Is there a way to retrieve the Windows username without manual input?

Currently, I am working on creating an internal web portal for our organization. The technologies I am using include Angular 5, Java Spring, REST, JDBC, JSON, and MS SQL Server. To ensure seamless authentication on my website, I have implemented a method ...

javaspringangularresttypescript

Tips for retrieving data sent through Nextjs Api routing

Here is the API file I have created : import type { NextApiRequest, NextApiResponse } from 'next/types' import { PrismaClient } from '@prisma/client' const prisma = new PrismaClient() export default async function handler(req: NextApi ...

reactjstypescriptnext.js

The process of sorting an array based on another array that has multiple elements

Currently dealing with two arrays: array1 containing elements [1, 2, 3, 4, 5] and array2 containing elements [3, 4]. My goal is to filter out elements in array1 that are also found in array2. The code I have written seems to work fine when array2 has only ...

arraysangularfilter

Unraveling the mystery of "??=" in Javascript/Typescript code

In a recent TypeScript code snippet, I came across the following: const arrayAA: Record< someSchema['propX'], typeof arrayBB > = {}; for (const varB of arrayBB) { (arrayAA[someStringValue] ??= []).push(varB) } What is ...

javascripttypescript

React Navigation Browser

While developing my application, I encountered an error that I can't seem to resolve. It seems to be related to how I defined the routes in the code. Originally, the app had only one route, but after making changes to have multiple routes, I started g ...

reactjstypescriptdocker-composereact-router

What is the most effective way to utilize getStaticPaths in a dynamic manner within next.js

There is a need to paginate static pages for each of the 3 blog categories, but the problem lies in the variable number of pages and the inability to access which category needs to be fetched in getStaticPaths. The project folder structure appears as foll ...

javascriptreactjstypescriptnext.jsserver-side-rendering

Encountering an issue with Modal functionality on Ionic 4 when spanning across multiple pages

A modal named worksmodal was created and works perfectly when opened from the page showworks. However, a new requirement emerged where the same modal needs to be opened from the Notifications page as well, resulting in an error when trying to open it from ...

angularionic-frameworkionic2ionic3ionic4