Angular How to use @decorators inside dynamic component?

Question

Basically, I need to create component based on dynamic template and share parent data to newly created component and also share data to other components.

// import
    @Component({
        selector: 'app-modal',
        template: `<div #vcf></div>`,
        providers: [AppsService],
        encapsulation: ViewEncapsulation.None,
    })
    export class AppModalComponent implements OnInit, OnDestroy, AfterViewInit {
    @ViewChild('vcf', {read: ViewContainerRef}) vcf: ViewContainerRef;

    private cmpRef: ComponentRef<any>;

    constructor(
        private appService: AppsService,
        private compiler: Compiler,
        private injector: Injector,
        private m: NgModuleRef<any>
    ) {}

    ngOnInit() { }

    ngAfterViewInit() {
        let template;
        const styles = [`input { width: 100px }`];
        this.appService.getAppTemplate().subscribe((templateData) => {
            console.log('dynamic html data ::: ', templateData); // ok
            template = templateData;
            // Component dynamically.
            const templateComponent = Component({template})(class DynamicTemplateComponent {

                @Input() sendSMS; // Error, Saying Decorators are not valid here

                someMethod() {
                    alert('some data submitting'); // working
                }
                addSMSData() {
                       alert('ok');
                }      
            });
            const templateModule = NgModule({
                imports: [RouterModule,  FormsModule, CommonModule],
                declarations: [templateComponent]
            })(class {});

            this.compiler.compileModuleAndAllComponentsAsync(templateModule)
                .then((factories) => {
                    const f = factories.componentFactories[0];
                    this.cmpRef = f.create(this.injector, [], null, this.m);
                    this.cmpRef.instance.name = 'templateFrm';
                    this.vcf.insert(this.cmpRef.hostView);
                });
        });
    }
}

Here my dummy template which is being rendering and working also.

<input type="text" id="sms_title" [(ngModel)] ="sms_title" name="sms_title" placeholder="SMS title" required> <button type="submit" (click)="addSMSData()">Submit</button>

So how to use decorators inside the newly created component which has everything on the fly.

@Input() getSMSData; // Error, Decorators are not valid here

Some idea will be appreciable.

Thanks.

Do you have any documentation of this being a actual possibility? Because I needed the same feature one year ago and it ended up to be impossible back then due to JIT being ditched for AOT which doesn't allow dynamic templates to be made after the initial build. — enf0rcer, Jul 07 '18 at 08:02
@uday214125 As your code says , template is being built , is it rendering ? — Shaik Nizamuddin, Jul 07 '18 at 08:09
@ShaikNizamuddin yes it is rendering as i am using property binding as well. See my updated query. — uday214125, Jul 07 '18 at 08:20
refer https://stackoverflow.com/questions/37487977/passing-input-while-creating-angular-2-component-dynamically-using-componentreso and https://stackoverflow.com/questions/46815473/angular-4-dynamic-component-loading-emitting-data-to-parent-component — Shantanu, Jul 07 '18 at 10:25
You can create a service to share data between you components — Hikmat G., Jul 07 '18 at 11:20

Angular How to use @decorators inside dynamic component?

0 Answers0