ngx-dynamic-content This project was generated with Angular CLI version 11.0.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

ngx-dynamic-content

Dynamic Content Projection in Angular 11+ This libarary based on archived ng-dynamic (https://github.com/lacolaco/ng-dynamic)

$ npm install --save ngx-dynamic-content

'dynamic' means...

We often need to project some dynamic contents into your Angular app. For example, if you make a markdown editor, you want to display the rendererd preview. Also if you have a content from database with angular directives or custom markups

*dynamicComponent="template"

dynamicComponent is a directive to create dynamic component which has the template.

Example:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NgxDynamicContentModule } from 'ngx-dynamic-content';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, RouterModule.forRoot([]), NgxDynamicContentModule.forRoot({ imports: [RouterModule] })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *dynamicComponent="template; context: {text: text};"></div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  template = `
  <article>
    <h1>Awesome Document</h1>
    <div>
      <p>{{text}}</p>
    </div>
	<a [routerLink]="['/user/bob']">user/bob</a>
  </article>
  `;

  text = 'foo';
}

Result:

<ng-component><article><h1>Awesome Document</h1><div><p>foo</p></div><a ng-reflect-router-link="/user/bob" href="/user/bob">user/bob</a></article></ng-component>

DynamicComponentModule

To use dynamicComponent, you have to import all necessary modules to compile the dynamic content, with forRoot static method. Its argument is a NgModule metadata object:

/**
 * Setup for DynamicComponentDirective
 * 
 * ```ts
 * @NgModule({
 *   imports: [
 *     NgxDynamicContentModule.forRoot({
 *       imports: [CommonModule,RouterModule]
 *     })
 *   ],
 * })
 * class AppModule {}
 * ```
 */

License

MIT

Developing

Contributions welcome!