On Sunday, October 1, 2017 at 1:19:09 PM UTC+2, Turkel wrote:
>
> Yes I agree, Angular not considers this form as part of page just showing
>> it.
>
> Which type of dynamic component, what need to be function of this
> component?
>
Well, here's a pretty basic example. Your actual component (parent
component), needs to use another, say "<lazy-form></lazy-form>" in the
template.
Now, this <lazy-form> component is just a normal angular component, but it
has compiler, injector and ngModule injected, kind of like this:
import { Component, ComponentRef, Input, OnInit, ViewContainerRef,
ViewChild, Compiler, Injector, NgModule, NgModuleRef } from '@angular/core';
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'lazy-form',
template: `<div #vc></div>`, // here's where you'll put your actual form
})
export class TaggedDescComponent {
@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;
@Input() someHTMLForm: string = ''; // this input is the actual form
response you fetched from a remote endpoint.
private cmpRef: ComponentRef<any>;
constructor(private compiler: Compiler,
private injector: Injector,
private m: NgModuleRef<any>,
private sanitizer: DomSanitizer) {
}
ngAfterViewInit() {
const template = this.sanitizer.bypassSecurityTrustHtml(someHTMLForm);
const styles = [`input { width: 100px }`]; // you can add styles like
this here.
// Now here I am creating a Component dinamically.
const tmpCmp = Component({ template, styles })(class
NestedFormComponent {});
// MORE ON this later
// Now that I have a component, I need to add it to a NgModule, also
dynamic one.
const tmpModule = NgModule({
imports: [RouterModule],
declarations: [tmpCmp]
})(class {});
// Now we compile it _on the fly_ and inject into that div up there in
the template.
this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
this.cmpRef = f.create(this.injector, [], null, this.m);
this.cmpRef.instance.name = 'lazyForm';
this.vc.insert(this.cmpRef.hostView);
});
}
// cleanup
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
So your actual component fetches the html, then renders lazy form like
this: *<lazy-form [someHTMLForm]="..."></lazy-form>.*
Now, what you need to do is in your NestedFormComponent class, add whatever
stuff you need to handle the form, like that onSubmit, but you should be
able to pick up from here, hopefully.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
