ng-what-if

angular.ts

// https://github.com/antischematic/angular-state-library

function loadTodos(userId, reload) {
   return inject(HttpClient).get(endpoint, { params: { userId }}).pipe(
      retry({ delay: () => reload })
   )
}

@Component({
   template: `
      <ngFor {let todo of todos}>
         <ui-todo [value]="todo" />
      </ngFor>
   `
})
export class UITodos {
   @Input() userId

   reload = new EventEmitter()

   @Select() get todos() {
      return read(loadTodos(this.userId, this.reload))
   }

   @Action() updateTodo(todo) {
      dispatch(updateTodo(todo), {
         finalize: this.reload
      })
   }

   @Caught() handleError(error) {
      console.error(error)
   }
}

@Component({
   template: `
      { save.unstable && <ui-spinner /> }
      <ng-form (submit)="save.emit(model)">
         <input type="checkbox" [(ngModel)]="model.completed" />
         <input type="text" [(ngModel)]="model.title" />
         <button>Save</button>
      </ng-form>
   `
})
export class UITodo {
   @Input() model

   @Output() save = new Transition()
}

@Component({
   template: `
      <component value="hello!" />
   `
})
export class DynamicComponent {
   @Input() component = DefaultComponent
}

@Component()
export class DefaultComponent {
   @Input() value
}

@Component({
   template: `
      <slotted-component>
         <my-component ngSlot="hello" value="hello!" {let slotVar}>
            {{ slotVar }}
         </my-component>
      </slotted-component>
   `
})
export class DynamicComponent {}

@Component({
   template: `
      <ng-slot select="hello" [slotVar]="123">
         <div>Fallback content!!</div>
      </ng-slot>
   `
})
export class SlottedComponent {
   @ContentChild("hello") slotted: MyComponent
}