recompile components at runtime

[sumigoma]

In Angular2, will it be possible to recompile components at runtime or have components whose templates are dynamic (change at runtime), a la $compile? DynamicComponentLoader seems to support the adding components dynamically into the component tree, but their templates are still defined statically for compilation at startup.

[PatrickJS]

this will be easier to do after this PR #3605 I'm assuming your usecase is either A/B testing, Hot Component reload, or different user permission

[sumigoma]

Yea, I was wondering where this would fit in if components are now going to be precompiled during the build process. My usecase is basically hot component reload and general extensibility, though all of your cases seem applicable too.

[danicomas]

Is possible add a component without root(elementRef) and move it @gdi2290?

return this.loader.loadNextToLocation(Dialog, this.elementRef).then(containerRef => {
      //move the element to the body
      var dialogElement = containerRef.location.nativeElement;
      DOM.setStyle(dialogElement, 'display', 'none');
      DOM.appendChild(DOM.query('body'), dialogElement);
      this.dialogRef = containerRef;
      return containerRef;
    });

[danicomas]

@gdi2290 @sumigoma @mhevery @btford @PascalPrecht @ajoslin @tlancina can we compile similar in Angular1 $compile(template)(component)? or the best way is doing loadNextToLocation? Probably can we do it with loader.loadTemplate() but we don't have any instance about this component and we can't pass variables. Isn't it? Regards

In Angular 1 would have a service which would call to a templateURL then we would compile the template with a scope(with options of the service function).

[mhevery]

@danicomas yes you can using the Compiler

[danicomas]

@mhevery Are you saying we should use the DynamicComponentLoader passing the root elementRef (By now we can't use this without elementRef) or exist something like Angular1(get template + create scope and compile both)?

[webteckie]

I also have a use case for this. Can a plunkr example be provided on how to use the compiler as suggested by @mhevery to compile a template injected at runtime?

[danicomas]

@mhevery do you have news about that? Or @tbosch @vicb @gdi2290?

[mhevery]

You can create components on the fly like this:

angular/modules/upgrade/src/upgrade_module.ts

Lines 66 to 77 in 1f2302e

	return Directive({
	selector: name.replace(CAMEL_CASE, (all, next: string) => '-' + next.toLowerCase())
	})
	.Class({
	constructor: [
	new Inject(NG1_COMPILE),
	new Inject(NG1_SCOPE),
	ElementRef,
	function(compile: angular.ICompileService, scope: angular.IScope,
	elementRef: ElementRef) { compile(elementRef.nativeElement)(scope); }
	]
	});

and than load them using DynamicComponentLoader

[danicomas]

Nice @mhevery . But I see that you are using ng1 services. It only will be possible via ng1 injection in ng2 or with ng2 core too? Are you saying that in ng2 the correct way is load via loader.loadNextToLocation or other DynamicComponentLoader method instead the get the template and compile?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}