Title: Angular | Dynamically adding components in innerHTML
Tags: angular
Question: Im developing a blog in Angular.
This is how the app works:
Angular fetches a blog post from a server:
this.content = body.content;
// content is : <h1&gt;Some title for a blog post</h1&gt;<p&gt;Content here...</p&gt;<p&gt;More content..</p&gt;
Angular injects the fetched HTML code into an element as innerHTML:
Above solution works perfectly for standard HTML tags.
Question: How can I implement a similar solution that supports custom components?
Example: If content contains a custom component, ie:
// content is : <h1&gt;Some title for a blog post</h1&gt;<app-custom-component&gt;</app-custom-component&gt;
Comment: https://angular.io/guide/dynamic-component-loader

Comment: https://blog.angular-university.io/angular-ng-content/

Comment: I think it's not possible. `` is an angular code. The angular code will be converted to vanilla js code while building and In production, you're running JavaScript code.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:02/10/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angular>', 'Title': 'Angular |\xa0Dynamically adding components in innerHTML', 'ViewCount': 179, 'id': 66137554, 'user_AboutMe': '', 'user_AccountId': 1727432.0, 'user_DisplayName': 'Vingtoft', 'user_Reputation': 11920.0, 'user_Views': 480.0, 'user_id': 1581803.0}}