vsavkin

var TodosComponent = /** @class */ (function () {
  function TodosComponent(store) {
    this.store = store;
    this.todos = this.store.pipe(select('todos'));
  }

  TodosComponent.ngComponentDef = defineComponent({
    type: TodosComponent,
    selectors: [["todos-cmp"]],
    factory: function TodosComponent_Factory(t) {

vsavkin

function fromStore(config: {[k: string]: string}) {
  return (def: ComponentDef<any>) => {
    const originalFactory = def.factory; // original factory creating a component
    def.factory = () => {
      const cmp = originalFactory(def.type); // component instance
      const store = directiveInject(TodoStore); // using DI to get the store
      config.forEach((key: string) => {
        cmp[key] = store.pipe(select(config[key]));
      });
      return cmp; // return the patched component

vsavkin

@Component({
  selector: 'todos-cmp',
  template: `
    <div *ngFor="let t of todos|async">
        {{t.description}}
    </div>
  `
})
@FromStore({todos: 'todos’})
class TodosComponent {

vsavkin

function FromStore(config: {[k: string]: string}) {
  return (clazz: any) => {
    const originalFactory = clazz.ngComponentDef.factory;
    clazz.ngComponentDef.factory = () => {
      const cmp = originalFactory(clazz.ngComponentDef.type);
      const store = directiveInject(Store);
      Object.keys(config).forEach((key: string) => {
         cmp[key] = store.pipe(select(config[key]));
      });
      return cmp;

vsavkin

factory: function TodosComponent_Factory(t) {
  return new (t || TodosComponent)(directiveInject(Store));
},

vsavkin

var TodosComponent = /** @class */ (function () {
  function TodosComponent(store) {
    this.store = store;
    this.todos = this.store.pipe(select('todos'));
  }

  TodosComponent.ngComponentDef = defineComponent({
    type: TodosComponent,
    selectors: [["todos-cmp"]],
    factory: function TodosComponent_Factory(t) {

vsavkin

@Component({
  selector: 'todos-cmp',
  template: `
    <div *ngFor="let t of todos|async">
        {{t.description}}
    </div>
  `
})
class TodosComponent {
  todos: Observable<Todo[]> = this.store.pipe(select('todos'));

vsavkin

@Component({
  template: `
    <div #dynamic></div>
  `
})
class DynamicContentCompoent {
  @ViewChild('#dynamic') el: ElementRef;
 
  constructor(private loader: CmsTemplateLoader) {}
 

vsavkin

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
 
import { HelloComponent } from './hello.component';
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],

vsavkin

import * as express from 'express';
import {Ticket} from "@myorg/data";

const app = express();

const tickets: Ticket[] = [
  {
    id: 1,
    title: 'Login page is broken'
  },