ngx-dynamic-content v3.1.6
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!