Use component templating without a module

I have been looking for the capability to use Angular strictly as a component/template renderer. I don’t need it to compile into customElements, I just need to mount a component instance on a DOM element and pass in dependencies using simple property injection.

Basic syntax example

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

@Component({
  selector: 'app-home',
  declarations: [ pipes, directives, components ],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
class HomeComponent {
    constructor(
        public dependencyA: any,
        private dependencyB: any
     ) {}
}

const target = document.querySelector('#component-root')

const component = new HomeComponent()
const instance = component.mount(target, [dependencyA, dependencyB]) 
  .subscribe(mountEvent => console.log(mountEvent))

instance.unmount()
  .subscribe(mountEvent  => mountEvent )

Perhaps if the injector is omitted and an array supplied, elect to use property injection, where passing an injector will enable usage of the dependency injection framework.

component.mount(target, [dependencyA, dependencyB]) 
component.mount(target, { injector }) 

[JoostK]

I think @robwormald’s presentation during ng-conf last Wednesday may be interesting to you, as it touches some of the ideas you mention in the description.

[angular-automatic-lock-bot[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.}