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

@Component({
  selector: 'app-root',
  template: `<h1>{{title}}</h1>`
})
export class AppComponent {
  title = "Angular Renderer";
}

<app-root></app-root>
<script src="app.js"></script>

//app.js
function app(title) {
  const app = document.querySelector("app-root");
  const h1 = document.createElement("h1");
  const text = document.createTextNode(title);
  h1.appendChild(text);
  app.appendChild(h1);
}
app("Angular Renderer"); //bootstrap

<app-root>
  <h1>Angular Renderer</h1>
</app-root>

import { 
  Component, ɵrenderComponent as renderComponent 
} from '@angular/core';
@Component({
  selector: 'app',
  template: `<h1>{{title}}</h1>`
})
class AppComponent {
  title="Ivy Renderer";
}

renderComponent(AppComponent);

var AppComponent = /** @class */ (function () {
  AppComponent.ngComponentDef = i0.ɵdefineComponent({
    type: AppComponent,
    selectors: [["app-root"]],
    consts: 2,
    vars: 1,
    template: function AppComponent_Template(rf, ctx) {
      if (rf & 1) {
        i0.ɵelementStart(0, "h1");
        i0.ɵtext(1);
        i0.ɵelementEnd();
      } if (rf & 2) {
        i0.ɵtextBinding(1, i0.ɵinterpolation1("", ctx.title, ""));
      }
    }, encapsulation: 2
  });
}());
export { AppComponent };

{
  "compilerOptions": {
    "experimentalDecorators": true,
    ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "enableIvy": true,
  }
}