├── src ├── assets │ ├── .gitkeep │ ├── snapshots │ │ ├── blog.png │ │ ├── card.png │ │ ├── home.png │ │ ├── rvt-.png │ │ ├── rvt.png │ │ ├── snow.png │ │ ├── svg.png │ │ ├── cells.png │ │ ├── clock.png │ │ ├── dialog.png │ │ ├── pannel.png │ │ ├── testOb.png │ │ ├── tumblr.png │ │ ├── bigData.png │ │ ├── bintree.png │ │ ├── cellsRaw.png │ │ ├── crudStuff.png │ │ ├── dynForm.png │ │ ├── dynhtml.png │ │ ├── htmlLoad.png │ │ ├── indexDb.png │ │ ├── mixinSamp.png │ │ ├── modalSamp.png │ │ ├── pokeAPI.png │ │ ├── routeList.png │ │ ├── rxjsTest.png │ │ ├── stepper.png │ │ ├── summary.png │ │ ├── svgClock.png │ │ ├── svgTest.png │ │ ├── svgTimer.png │ │ ├── viewModel.png │ │ ├── complexAPI.png │ │ ├── filterSamp.png │ │ ├── formErrors.png │ │ ├── gridThings.png │ │ ├── iconSprite.png │ │ ├── localState-.png │ │ ├── localState.png │ │ ├── outOfOrder.png │ │ ├── resizePanel.png │ │ ├── signalPlay.png │ │ ├── symbolsForm.png │ │ ├── tableHover.png │ │ ├── unsubSample.png │ │ ├── DirectiveSamp.png │ │ ├── acnhorPosition.png │ │ ├── eventedOutputs.png │ │ ├── gridCalender.png │ │ ├── lazyComponents.png │ │ ├── reusableDialog.png │ │ ├── rvt-reactive.png │ │ ├── rvt-template.png │ │ ├── signalDebounce.png │ │ ├── signalsForms.png │ │ ├── testOb-testob.png │ │ ├── viewModel-user.png │ │ ├── customNativeForm.png │ │ ├── observableState-.png │ │ ├── observableState.png │ │ ├── unsubSample-:id.png │ │ ├── viewModel-theBad.png │ │ ├── requiredAttributes.png │ │ ├── signalInputMusings.png │ │ ├── viewModel-theGood.png │ │ └── observableState-hook.png │ └── icons │ │ ├── Ionic-Ionicons-Pause.svg │ │ └── cloud.svg ├── app │ ├── device-list.component.ts │ ├── mqtt │ │ ├── util │ │ │ └── idbstorage.service.ts │ │ ├── mqtt.component copy.css │ │ ├── power-meter │ │ │ ├── power-meter.component.css │ │ │ └── dialog │ │ │ │ └── power-meter-dialog.component.css │ │ ├── routes.ts │ │ ├── mqtt.component.html │ │ ├── mqtt.routes.ts │ │ ├── pair-button │ │ │ └── pair-button.component.css │ │ └── toggle │ │ │ └── toggle.component.ts │ ├── snow │ │ └── snow.component.html │ ├── html-load │ │ ├── htmlload │ │ │ └── htmlload.component.html │ │ └── bogus-load.service.ts │ ├── dialog │ │ ├── dialog.component.css │ │ ├── dialog │ │ │ ├── dialog.component.css │ │ │ └── dialog.component.ts │ │ └── dialog.component.ts │ ├── analog-clock │ │ └── analog-clock.component.html │ ├── form-error │ │ ├── form-error.component.css │ │ ├── show-error │ │ │ └── show-error.component.css │ │ └── form-error.component.ts │ ├── local-state │ │ ├── local-state.component.html │ │ ├── local-state.component.ts │ │ └── local-state.routes.ts │ ├── blogs │ │ ├── blog-item │ │ │ ├── blog-item.component.css │ │ │ └── blog-item.component.ts │ │ ├── article.interface.ts │ │ └── blog-list │ │ │ └── blog-list.component.css │ ├── html-summary │ │ ├── html-summary.component.css │ │ └── html-summary.component.ts │ ├── lazy-component │ │ ├── sample-one │ │ │ ├── sample-one.component.html │ │ │ └── sample-one.component.ts │ │ ├── sample-two │ │ │ ├── sample-two.component.html │ │ │ └── sample-two.component.ts │ │ ├── sample-three │ │ │ ├── sample-three.component.html │ │ │ └── sample-three.component.ts │ │ ├── lazy-component.component.html │ │ └── readme.md │ ├── out-of-order │ │ └── out-of-order.component.css │ ├── signal-error │ │ └── signal-error.component.css │ ├── signal-play │ │ └── signal-play.component.css │ ├── signals-form │ │ └── signals-form.component.css │ ├── unsub-sample │ │ └── unsub-sample.component.css │ ├── in-mem-sample │ │ ├── in-mem-sample.component.css │ │ ├── in-mem-utils.ts │ │ └── in-mem.model.ts │ ├── reusable-dialog │ │ ├── dialog │ │ │ ├── dialog.component.css │ │ │ └── dialog.component.ts │ │ ├── reusable-dialog.component.css │ │ └── dummy-content │ │ │ ├── dummy-content.component.css │ │ │ └── dummy-content.component.ts │ ├── signal-debounce │ │ └── signal-debounce.component.css │ ├── connected-websocket │ │ └── connected-websocket.component.css │ ├── crud-stuff │ │ ├── sort-header │ │ │ └── sort-header.component.css │ │ ├── crud-stuff.component.css │ │ ├── spinner │ │ │ └── spinner.component.css │ │ ├── header │ │ │ └── header.component.css │ │ ├── utils │ │ │ ├── generateRelation.ts │ │ │ ├── is-empty-relation.ts │ │ │ ├── un-flattenRecord.ts │ │ │ └── deep-diff.ts │ │ ├── relation-form │ │ │ └── relation-form.component.css │ │ ├── high-light-body │ │ │ └── high-light-body.component.ts │ │ └── notify-dialog │ │ │ └── notify-dialog.component.css │ ├── indexdb │ │ └── edit-record │ │ │ ├── field-edit │ │ │ └── field-edit.component.css │ │ │ └── edit-record.component.css │ ├── async-computed-sample │ │ ├── async-computed-sample.component.css │ │ └── async-computed-sample.component.ts │ ├── input-host-experiment │ │ ├── input-host │ │ │ └── input-host.component.css │ │ └── input-host-experiment.component.css │ ├── signal-forms-experiment │ │ ├── signal-tree │ │ │ ├── signal-tree.component.css │ │ │ └── signal-tree-node.model.ts │ │ ├── dynamic │ │ │ └── dynamic.component.css │ │ ├── input-random-int │ │ │ └── input-random-int.component.css │ │ ├── tags │ │ │ └── tags.component.css │ │ └── util │ │ │ └── sample-data.model.ts │ ├── test │ │ ├── test │ │ │ ├── test.component.html │ │ │ └── test.component.ts │ │ ├── test.routes.ts │ │ └── obs-click.directive.ts │ ├── metered-view │ │ ├── metered-view.component.css │ │ ├── stacked-per │ │ │ └── stacked-per.component.css │ │ └── gauge │ │ │ └── gauge.component.ts │ ├── stepper │ │ └── steps │ │ │ └── steps.component.css │ ├── rvt │ │ ├── both │ │ │ ├── both.component.css │ │ │ └── both.component.ts │ │ ├── routes.ts │ │ ├── sampledata.service.ts │ │ ├── reactive │ │ │ └── reactive.component.css │ │ └── template │ │ │ └── template.component.css │ ├── routed-popup │ │ ├── back-home │ │ │ ├── back-home.component.html │ │ │ └── back-home.component.ts │ │ ├── back-drop │ │ │ ├── back-drop.component.ts │ │ │ └── back-drop.component.html │ │ └── routed-popup.routes.ts │ ├── grid-calender │ │ ├── readme.md │ │ ├── calenderDay.ts │ │ ├── grid-calender.component.css │ │ ├── day-cell │ │ │ └── day-cell.component.ts │ │ └── grid-calender.component.ts │ ├── signal-input-musings │ │ └── signal-input-musings.component.css │ ├── mixins │ │ └── mixins │ │ │ └── mixins.component.html │ ├── rijks │ │ ├── artists │ │ │ ├── artists.component.css │ │ │ ├── artists.component.html │ │ │ └── artists.component.ts │ │ ├── art-detail │ │ │ ├── art-detail.component.css │ │ │ ├── art-detail.component.ts │ │ │ └── art-detail.component.html │ │ └── rijks │ │ │ └── rijks.module.ts │ ├── dynsignal-form │ │ └── dynsignal-form.component.css │ ├── required-attributes │ │ └── required-attributes │ │ │ ├── required-attributes.component.html │ │ │ └── wait-for-it │ │ │ ├── wait-for-it.component.html │ │ │ └── SomeComponent.ts │ ├── evented-outputs │ │ ├── evented-outputs.component.css │ │ └── ev-child │ │ │ └── ev-child.component.css │ ├── icon-sprite │ │ └── icon-sprite.component.css │ ├── poke-api │ │ └── pokemain │ │ │ └── pokemain.component.html │ ├── resizable-panels │ │ ├── resizable-panels.component.css │ │ └── resizable-panel │ │ │ └── resizable-panel.component.css │ ├── app.component.ts │ ├── directives │ │ ├── directives.routes.ts │ │ ├── directives-sample │ │ │ ├── directives-sample.component.html │ │ │ └── directives-sample.component.ts │ │ └── id.directive.ts │ ├── cells │ │ ├── cell │ │ │ └── cell.component.css │ │ └── cells.component.css │ ├── home │ │ └── home.component.ts │ ├── observable-state │ │ ├── lifeycle-hooks-sample │ │ │ └── lifeycle-hooks-sample.component.html │ │ ├── observable-state.routes.ts │ │ └── observable-sate │ │ │ └── observable-state.component.html │ ├── svg-test │ │ ├── blocks │ │ │ └── blocks.component.svg │ │ ├── svg-test.component.html │ │ └── svg-test.component.ts │ ├── modal-samp │ │ └── modal-demo │ │ │ ├── modal-demo.component.html │ │ │ └── modal-demo.component.ts │ ├── rxjstest │ │ └── rxjstest.component.css │ ├── view-model │ │ ├── painting │ │ │ ├── painting.component.html │ │ │ └── painting.component.ts │ │ ├── play-button │ │ │ └── play-button.component.ts │ │ └── quote │ │ │ └── quote.component.ts │ ├── app.config.server.ts │ ├── custom-native-form │ │ ├── digits │ │ │ └── digits.component.css │ │ ├── digit-input │ │ │ └── digit-input.component.css │ │ └── custom-native-form.component.css │ ├── gridthings │ │ └── gridthings │ │ │ └── gridthings.component.ts │ ├── app.config.ts │ ├── card │ │ ├── card.component.ts │ │ └── card.component.css │ ├── util │ │ └── random-things.ts │ ├── view-transitions │ │ ├── view-transitions.component.css │ │ └── batchgettest.ts │ └── pannel-stuff │ │ └── pannel-stuff.component.html ├── main.ts ├── form-engine │ ├── form-engine.component.css │ ├── form-engine.component.ts │ └── form-entry.ts ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── utils │ ├── signals │ │ ├── debounced-signal.ts │ │ └── deferred.ts │ └── take-until-abort.ts ├── tsconfig.spec.json ├── tsconfig.app.json ├── test.ts ├── index.html ├── .vscode │ └── settings.json └── main.server.ts ├── slides ├── index.md ├── slide-2.md ├── slide-3.md ├── demo2 │ └── subSlide2.md ├── slide-0.md ├── slide-4.md ├── slide-1.md └── slide.md ├── projects ├── api-boundries │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── styles.css │ │ ├── favicon.ico │ │ ├── app │ │ │ ├── b-relation-list │ │ │ │ ├── b-relation-list.css │ │ │ │ └── b-relation-list.routing.ts │ │ │ ├── app.component.ts │ │ │ ├── relation-list │ │ │ │ ├── relation-list.routing.ts │ │ │ │ └── relation-list.component.ts │ │ │ └── app.routing.ts │ │ ├── pluck.ts │ │ ├── index.html │ │ ├── test.ts │ │ └── main.ts │ ├── Angular component boundries.pdf │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── .vscode │ │ └── settings.json ├── slido │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.config.server.ts │ │ │ ├── app.component.ts │ │ │ ├── app.routes.ts │ │ │ ├── app.config.ts │ │ │ └── overview │ │ │ │ └── overview.component.css │ │ ├── main.ts │ │ ├── index.html │ │ └── main.server.ts │ ├── public │ │ └── favicon.ico │ ├── tsconfig.spec.json │ └── tsconfig.app.json ├── slipnslide │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── app │ │ │ ├── show-comp │ │ │ │ └── show-comp.component.ts │ │ │ ├── home │ │ │ │ └── home.component.ts │ │ │ ├── demo │ │ │ │ └── demo.component.ts │ │ │ ├── app.component.ts │ │ │ └── view-slide │ │ │ │ └── vied-slide.component.css │ │ ├── index.html │ │ ├── test.ts │ │ └── main.ts │ ├── e2e │ │ ├── tsconfig.json │ │ └── src │ │ │ ├── app.po.ts │ │ │ └── app.e2e-spec.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── .browserslistrc ├── wire-it-editor │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── favicon.ico │ │ ├── main.ts │ │ ├── app │ │ │ ├── wireits │ │ │ │ ├── wireit │ │ │ │ │ ├── depedencies │ │ │ │ │ │ └── depedencies.component.css │ │ │ │ │ └── show-message │ │ │ │ │ │ └── show-message.component.css │ │ │ │ └── wireits.component.css │ │ │ └── scripts │ │ │ │ └── script │ │ │ │ └── script.component.ts │ │ ├── index.html │ │ └── styles.css │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── .vscode │ │ └── settings.json ├── language-routing │ ├── src │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.css │ │ │ ├── home │ │ │ │ ├── home.component.css │ │ │ │ └── home.component.ts │ │ │ ├── lang │ │ │ │ └── lang.component.css │ │ │ ├── pick-lang │ │ │ │ ├── pick-lang.component.css │ │ │ │ └── pick-lang.component.ts │ │ │ ├── app.config.ts │ │ │ ├── app.routes.ts │ │ │ ├── app.component.ts │ │ │ ├── app.lang.routes.ts │ │ │ └── lang.service.ts │ │ ├── favicon.ico │ │ ├── styles.css │ │ ├── index.html │ │ └── main.ts │ ├── tsconfig.spec.json │ ├── tsconfig.app.json │ └── readme.md ├── extreme-lazy-test │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.routes.ts │ │ │ ├── app.component.ts │ │ │ └── app.config.ts │ │ ├── styles.css │ │ ├── main.ts │ │ └── index.html │ ├── public │ │ └── favicon.ico │ ├── tsconfig.spec.json │ └── tsconfig.app.json ├── simple-injector │ ├── README.md │ ├── src │ │ ├── public-api.ts │ │ └── lib │ │ │ ├── get-unique-id.ts │ │ │ └── flat-injector.ts │ ├── ng-package.json │ ├── package.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ ├── tsconfig.lib.json │ └── eslint.config.mjs ├── se-ng │ ├── let │ │ ├── src │ │ │ ├── public-api.ts │ │ │ └── test.ts │ │ ├── ng-package.json │ │ ├── tslint.json │ │ ├── tsconfig.lib.prod.json │ │ ├── tsconfig.spec.json │ │ ├── package.json │ │ └── tsconfig.lib.json │ ├── signal-utils │ │ ├── src │ │ │ └── lib │ │ │ │ └── util │ │ │ │ ├── deep-partial.type.ts │ │ │ │ ├── is-promise.ts │ │ │ │ ├── is-async-iterable.ts │ │ │ │ ├── is-integer-string.ts │ │ │ │ ├── is-date.ts │ │ │ │ ├── deferred.ts │ │ │ │ └── is-object.ts │ │ ├── ng-package.json │ │ ├── README.md │ │ ├── tsconfig.lib.prod.json │ │ ├── tsconfig.spec.json │ │ ├── package.json │ │ └── tsconfig.lib.json │ ├── observable-hooks │ │ ├── yarn.lock │ │ ├── ng-package.json │ │ ├── tsconfig.lib.prod.json │ │ ├── tslint.json │ │ ├── tsconfig.spec.json │ │ ├── src │ │ │ ├── public_api.ts │ │ │ └── test.ts │ │ ├── package.json │ │ └── tsconfig.lib.json │ ├── headless-ui │ │ ├── src │ │ │ └── public-api.ts │ │ ├── ng-package.json │ │ ├── package.json │ │ ├── tsconfig.lib.prod.json │ │ ├── tsconfig.spec.json │ │ ├── tsconfig.lib.json │ │ └── eslint.config.mjs │ ├── swapi │ │ ├── src │ │ │ ├── lib │ │ │ │ ├── SwapiRoot.interface.ts │ │ │ │ ├── swapi.component.ts │ │ │ │ ├── FilmsRoot.interface.ts │ │ │ │ ├── PlanetsRoot.interface.ts │ │ │ │ ├── VerhiclesRoot.interface.ts │ │ │ │ ├── SpaceShipsRoot.interface.ts │ │ │ │ └── SpeciesRoot.interface.ts │ │ │ ├── public_api.ts │ │ │ └── test.ts │ │ ├── ng-package.json │ │ ├── tsconfig.lib.prod.json │ │ ├── tslint.json │ │ ├── tsconfig.spec.json │ │ ├── yarn.lock │ │ ├── package.json │ │ ├── .vscode │ │ │ └── settings.json │ │ └── tsconfig.lib.json │ └── observable-utils │ │ ├── src │ │ ├── lib │ │ │ ├── observable-utils.service.ts │ │ │ └── observable-utils.component.ts │ │ ├── public-api.ts │ │ └── test.ts │ │ ├── ng-package.json │ │ ├── tsconfig.lib.prod.json │ │ ├── tslint.json │ │ ├── tsconfig.spec.json │ │ ├── package.json │ │ └── tsconfig.lib.json ├── multi-core │ └── package.json └── folderCrud │ ├── tsconfig.json. │ ├── tsconfig.json │ └── utils │ └── walkSync.ts ├── client_id ├── quickTsExperiments ├── .gitignore ├── interatorStuff.ts ├── keyofexp.ts ├── signal-101.ts ├── signals │ ├── index.ts │ ├── BUILD.bazel │ └── src │ │ └── untrack.ts ├── sampleThis.ts ├── objProxy.ts └── metered.ts ├── example.png ├── .vscode └── extensions.json ├── assets ├── overlay.ora ├── overlay.png ├── sander.png └── SignalFomrsSander.png ├── .prettierignore ├── Angular-Signals └── assets │ └── quote.png ├── .npmrc ├── presentations ├── assets │ ├── angular_signals.png │ ├── exclamation.svg │ ├── icon_angular.svg │ └── icon_angular_wht.svg └── signal-watch-the-effect.excerpt.md ├── articles ├── 404.md └── welcome.md ├── bs-config.json ├── e2e ├── tsconfig.e2e.json └── src │ ├── app.po.ts │ └── app.e2e-spec.ts ├── .editorconfig ├── scripts ├── util │ ├── get-npm-version.mjs │ ├── parse-cmd-line.mjs │ └── hash-folder.mjs └── bump-and-publish.mjs ├── .prettierrc ├── docker-compose.yml ├── .browserslistrc ├── bluesky1.svg ├── depedencyHash.cjs ├── .github └── module-cache │ └── action.yaml ├── test-injector.mjs └── .couchdb └── config └── docker.ini /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /slides/index.md: -------------------------------------------------------------------------------- 1 | # empty page? 2 | -------------------------------------------------------------------------------- /src/app/device-list.component.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/api-boundries/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/slido/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/slipnslide/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/mqtt/util/idbstorage.service.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /client_id: -------------------------------------------------------------------------------- 1 | fa17139a-3da5-4a81-9baa-87947c6af8f5 -------------------------------------------------------------------------------- /projects/language-routing/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/snow/snow.component.html: -------------------------------------------------------------------------------- 1 |

snow works!

2 | -------------------------------------------------------------------------------- /quickTsExperiments/.gitignore: -------------------------------------------------------------------------------- 1 | *.js 2 | *.d.ts 3 | *.d.ts.map 4 | -------------------------------------------------------------------------------- /src/app/html-load/htmlload/htmlload.component.html: -------------------------------------------------------------------------------- 1 |

Loading

2 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | (async function () { 2 | import('./bootspa'); 3 | })(); 4 | -------------------------------------------------------------------------------- /example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/example.png -------------------------------------------------------------------------------- /projects/slido/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/dialog/dialog.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["phoenisx.cssvar"] 3 | } 4 | -------------------------------------------------------------------------------- /src/app/analog-clock/analog-clock.component.html: -------------------------------------------------------------------------------- 1 |

analog-clock works!

2 | -------------------------------------------------------------------------------- /src/app/form-error/form-error.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/local-state/local-state.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/form-engine/form-engine.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/blogs/blog-item/blog-item.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/html-summary/html-summary.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/lazy-component/sample-one/sample-one.component.html: -------------------------------------------------------------------------------- 1 |

sample-one works!

2 | -------------------------------------------------------------------------------- /src/app/lazy-component/sample-two/sample-two.component.html: -------------------------------------------------------------------------------- 1 |

sample-two works!

2 | -------------------------------------------------------------------------------- /src/app/out-of-order/out-of-order.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/signal-error/signal-error.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/signal-play/signal-play.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/signals-form/signals-form.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/unsub-sample/unsub-sample.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /assets/overlay.ora: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/assets/overlay.ora -------------------------------------------------------------------------------- /assets/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/assets/overlay.png -------------------------------------------------------------------------------- /assets/sander.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/assets/sander.png -------------------------------------------------------------------------------- /projects/extreme-lazy-test/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/in-mem-sample/in-mem-sample.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/reusable-dialog/dialog/dialog.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: dialog; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/reusable-dialog/reusable-dialog.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/signal-debounce/signal-debounce.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/lang/lang.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /slides/slide-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: slide-2 3 | --- 4 | 5 | # Hello World 6 | 7 | test slide 2 8 | -------------------------------------------------------------------------------- /src/app/lazy-component/sample-three/sample-three.component.html: -------------------------------------------------------------------------------- 1 |

sample-three works!

2 | -------------------------------------------------------------------------------- /slides/slide-3.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 999 3 | title: slide3 4 | --- 5 | 6 | # Slide 3 7 | 8 | Some 9 | -------------------------------------------------------------------------------- /src/app/connected-websocket/connected-websocket.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/crud-stuff/sort-header/sort-header.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: table-cell; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/indexdb/edit-record/field-edit/field-edit.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/mqtt/mqtt.component copy.css: -------------------------------------------------------------------------------- 1 | 2 | img { 3 | width: 75px; 4 | aspect-ratio: 1; 5 | } 6 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/utils/signals/debounced-signal.ts: -------------------------------------------------------------------------------- 1 | 2 | export {debouncedSignal} from '@se-ng/signal-utils'; 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | 3 | /dist 4 | /coverage 5 | -------------------------------------------------------------------------------- /src/app/async-computed-sample/async-computed-sample.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/crud-stuff/crud-stuff.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: 16px; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/input-host-experiment/input-host/input-host.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/reusable-dialog/dummy-content/dummy-content.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /assets/SignalFomrsSander.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/assets/SignalFomrsSander.png -------------------------------------------------------------------------------- /src/app/form-error/show-error/show-error.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: none; 3 | color: red; 4 | } 5 | -------------------------------------------------------------------------------- /src/app/signal-forms-experiment/signal-tree/signal-tree.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/snapshots/blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/blog.png -------------------------------------------------------------------------------- /src/assets/snapshots/card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/card.png -------------------------------------------------------------------------------- /src/assets/snapshots/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/home.png -------------------------------------------------------------------------------- /src/assets/snapshots/rvt-.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/rvt-.png -------------------------------------------------------------------------------- /src/assets/snapshots/rvt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/rvt.png -------------------------------------------------------------------------------- /src/assets/snapshots/snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/snow.png -------------------------------------------------------------------------------- /src/assets/snapshots/svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/svg.png -------------------------------------------------------------------------------- /src/app/test/test/test.component.html: -------------------------------------------------------------------------------- 1 |

test works!

2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/snapshots/cells.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/cells.png -------------------------------------------------------------------------------- /src/assets/snapshots/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/clock.png -------------------------------------------------------------------------------- /src/assets/snapshots/dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/dialog.png -------------------------------------------------------------------------------- /src/assets/snapshots/pannel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/pannel.png -------------------------------------------------------------------------------- /src/assets/snapshots/testOb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/testOb.png -------------------------------------------------------------------------------- /src/assets/snapshots/tumblr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/tumblr.png -------------------------------------------------------------------------------- /Angular-Signals/assets/quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/Angular-Signals/assets/quote.png -------------------------------------------------------------------------------- /projects/api-boundries/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/api-boundries/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/slido/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/projects/slido/public/favicon.ico -------------------------------------------------------------------------------- /projects/slipnslide/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/assets/snapshots/bigData.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/bigData.png -------------------------------------------------------------------------------- /src/assets/snapshots/bintree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/bintree.png -------------------------------------------------------------------------------- /src/assets/snapshots/cellsRaw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/cellsRaw.png -------------------------------------------------------------------------------- /src/assets/snapshots/crudStuff.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/crudStuff.png -------------------------------------------------------------------------------- /src/assets/snapshots/dynForm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/dynForm.png -------------------------------------------------------------------------------- /src/assets/snapshots/dynhtml.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/dynhtml.png -------------------------------------------------------------------------------- /src/assets/snapshots/htmlLoad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/htmlLoad.png -------------------------------------------------------------------------------- /src/assets/snapshots/indexDb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/indexDb.png -------------------------------------------------------------------------------- /src/assets/snapshots/mixinSamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/mixinSamp.png -------------------------------------------------------------------------------- /src/assets/snapshots/modalSamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/modalSamp.png -------------------------------------------------------------------------------- /src/assets/snapshots/pokeAPI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/pokeAPI.png -------------------------------------------------------------------------------- /src/assets/snapshots/routeList.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/routeList.png -------------------------------------------------------------------------------- /src/assets/snapshots/rxjsTest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/rxjsTest.png -------------------------------------------------------------------------------- /src/assets/snapshots/stepper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/stepper.png -------------------------------------------------------------------------------- /src/assets/snapshots/summary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/summary.png -------------------------------------------------------------------------------- /src/assets/snapshots/svgClock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/svgClock.png -------------------------------------------------------------------------------- /src/assets/snapshots/svgTest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/svgTest.png -------------------------------------------------------------------------------- /src/assets/snapshots/svgTimer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/svgTimer.png -------------------------------------------------------------------------------- /src/assets/snapshots/viewModel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/viewModel.png -------------------------------------------------------------------------------- /projects/extreme-lazy-test/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /projects/simple-injector/README.md: -------------------------------------------------------------------------------- 1 | # SimpleInjector 2 | 3 | This is a very simple flat injector for some experimantation. 4 | -------------------------------------------------------------------------------- /projects/slipnslide/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/projects/slipnslide/src/favicon.ico -------------------------------------------------------------------------------- /src/app/metered-view/metered-view.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: var(--size-3); 4 | } 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/app/stepper/steps/steps.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: row; 4 | gap: 1rem; 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/snapshots/complexAPI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/complexAPI.png -------------------------------------------------------------------------------- /src/assets/snapshots/filterSamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/filterSamp.png -------------------------------------------------------------------------------- /src/assets/snapshots/formErrors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/formErrors.png -------------------------------------------------------------------------------- /src/assets/snapshots/gridThings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/gridThings.png -------------------------------------------------------------------------------- /src/assets/snapshots/iconSprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/iconSprite.png -------------------------------------------------------------------------------- /src/assets/snapshots/localState-.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/localState-.png -------------------------------------------------------------------------------- /src/assets/snapshots/localState.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/localState.png -------------------------------------------------------------------------------- /src/assets/snapshots/outOfOrder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/outOfOrder.png -------------------------------------------------------------------------------- /src/assets/snapshots/resizePanel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/resizePanel.png -------------------------------------------------------------------------------- /src/assets/snapshots/signalPlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/signalPlay.png -------------------------------------------------------------------------------- /src/assets/snapshots/symbolsForm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/symbolsForm.png -------------------------------------------------------------------------------- /src/assets/snapshots/tableHover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/tableHover.png -------------------------------------------------------------------------------- /src/assets/snapshots/unsubSample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/unsubSample.png -------------------------------------------------------------------------------- /projects/api-boundries/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/projects/api-boundries/src/favicon.ico -------------------------------------------------------------------------------- /projects/se-ng/let/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of let 3 | */ 4 | 5 | export * from './lib/se-let.directive'; 6 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/projects/wire-it-editor/src/favicon.ico -------------------------------------------------------------------------------- /src/assets/snapshots/DirectiveSamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/DirectiveSamp.png -------------------------------------------------------------------------------- /src/assets/snapshots/acnhorPosition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/acnhorPosition.png -------------------------------------------------------------------------------- /src/assets/snapshots/eventedOutputs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/eventedOutputs.png -------------------------------------------------------------------------------- /src/assets/snapshots/gridCalender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/gridCalender.png -------------------------------------------------------------------------------- /src/assets/snapshots/lazyComponents.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/lazyComponents.png -------------------------------------------------------------------------------- /src/assets/snapshots/reusableDialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/reusableDialog.png -------------------------------------------------------------------------------- /src/assets/snapshots/rvt-reactive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/rvt-reactive.png -------------------------------------------------------------------------------- /src/assets/snapshots/rvt-template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/rvt-template.png -------------------------------------------------------------------------------- /src/assets/snapshots/signalDebounce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/signalDebounce.png -------------------------------------------------------------------------------- /src/assets/snapshots/signalsForms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/signalsForms.png -------------------------------------------------------------------------------- /src/assets/snapshots/testOb-testob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/testOb-testob.png -------------------------------------------------------------------------------- /src/assets/snapshots/viewModel-user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/viewModel-user.png -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | 2 | engine-strict = true 3 | prefer-offline = false 4 | legacy-peer-deps = false 5 | 6 | @jsr:registry=https://npm.jsr.io 7 | -------------------------------------------------------------------------------- /presentations/assets/angular_signals.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/presentations/assets/angular_signals.png -------------------------------------------------------------------------------- /projects/language-routing/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/projects/language-routing/src/favicon.ico -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/src/lib/util/deep-partial.type.ts: -------------------------------------------------------------------------------- 1 | export type DeepPartial = { [P in keyof T]?: DeepPartial }; 2 | -------------------------------------------------------------------------------- /src/assets/snapshots/customNativeForm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/customNativeForm.png -------------------------------------------------------------------------------- /src/assets/snapshots/observableState-.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/observableState-.png -------------------------------------------------------------------------------- /src/assets/snapshots/observableState.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/observableState.png -------------------------------------------------------------------------------- /src/assets/snapshots/unsubSample-:id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/unsubSample-:id.png -------------------------------------------------------------------------------- /src/assets/snapshots/viewModel-theBad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/viewModel-theBad.png -------------------------------------------------------------------------------- /projects/extreme-lazy-test/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import type { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/snapshots/requiredAttributes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/requiredAttributes.png -------------------------------------------------------------------------------- /src/assets/snapshots/signalInputMusings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/signalInputMusings.png -------------------------------------------------------------------------------- /src/assets/snapshots/viewModel-theGood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/viewModel-theGood.png -------------------------------------------------------------------------------- /projects/extreme-lazy-test/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/projects/extreme-lazy-test/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/snapshots/observableState-hook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/src/assets/snapshots/observableState-hook.png -------------------------------------------------------------------------------- /projects/simple-injector/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of simple-injector 3 | */ 4 | 5 | export * from './lib/simple-injector.service'; 6 | -------------------------------------------------------------------------------- /slides/demo2/subSlide2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: demo of sub-slide 2 3 | --- 4 | 5 | # Hello Sub-slide 2 6 | 7 | test slide 2 8 | 9 | did it work? 10 | -------------------------------------------------------------------------------- /projects/api-boundries/Angular component boundries.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SanderElias/Samples/HEAD/projects/api-boundries/Angular component boundries.pdf -------------------------------------------------------------------------------- /projects/multi-core/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "multi-core", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "type": "module", 6 | "main": "index.js" 7 | } 8 | -------------------------------------------------------------------------------- /src/app/rvt/both/both.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | main { 6 | display: flex; 7 | flex-direction: row; 8 | gap: 1rem; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/dialog/dialog/dialog.component.css: -------------------------------------------------------------------------------- 1 | ::backdrop { 2 | background-image: linear-gradient(45deg, magenta, rebeccapurple, dodgerblue, green); 3 | opacity: 0.75; 4 | } 5 | -------------------------------------------------------------------------------- /projects/se-ng/headless-ui/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of headless-ui 3 | */ 4 | 5 | export { ConfirmItComponent } from './confirm-it/confirm-it.component'; 6 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/src/lib/util/is-promise.ts: -------------------------------------------------------------------------------- 1 | export const isPromise = (value: any): value is Promise => { 2 | return typeof value?.then === 'function'; 3 | }; 4 | -------------------------------------------------------------------------------- /src/app/routed-popup/back-home/back-home.component.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | Home 8 | -------------------------------------------------------------------------------- /articles/404.md: -------------------------------------------------------------------------------- 1 | # Article not found. 2 | 3 | Hiya, it seems that I can't find the article you are looking for. 4 | Might be a typo in the URL, or maybe the article has been removed. 5 | -------------------------------------------------------------------------------- /src/app/grid-calender/readme.md: -------------------------------------------------------------------------------- 1 | # Grid-Calendar 2 | 3 | This sample shows how to use css grid to create a calendar. 4 | Also it shows how to use css-only to show a range selection. 5 | -------------------------------------------------------------------------------- /src/app/signal-forms-experiment/signal-tree/signal-tree-node.model.ts: -------------------------------------------------------------------------------- 1 | export interface SignalTreeNode { 2 | id: string; 3 | name: string; 4 | children: SignalTreeNode[]; 5 | } 6 | -------------------------------------------------------------------------------- /bs-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "This config file is used to serve everyting in the project folder", 3 | "port": 8888, 4 | "server": { 5 | "baseDir": "./", 6 | "cors": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/app/signal-input-musings/signal-input-musings.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | pretty-text { 6 | padding: 5px; 7 | border-radius: 5px; 8 | margin: 5px; 9 | } 10 | -------------------------------------------------------------------------------- /src/app/crud-stuff/spinner/spinner.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-block; 3 | width: 32px; 4 | height: 32px; 5 | margin-inline-start: 0.3rem; 6 | } 7 | 8 | svg { 9 | fill: white; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/mixins/mixins/mixins.component.html: -------------------------------------------------------------------------------- 1 |

Mixins rule

2 | 3 |
    4 | @for (item of demo$ | async; track item) { 5 |
  • {{ item }}
    • 6 | } 7 |
8 | 9 | {{ demo$ | async | json }} 10 | -------------------------------------------------------------------------------- /projects/se-ng/let/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../../dist/se-ng/let", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/lib/SwapiRoot.interface.ts: -------------------------------------------------------------------------------- 1 | export interface SwapiRoot { 2 | people: string; 3 | planets: string; 4 | films: string; 5 | species: string; 6 | vehicles: string; 7 | starships: string; 8 | } 9 | -------------------------------------------------------------------------------- /src/app/rijks/artists/artists.component.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | height: auto; 4 | } 5 | 6 | ul { 7 | padding-left: 8px; 8 | padding-right: 8px; 9 | } 10 | 11 | li { 12 | list-style: none; 13 | } 14 | -------------------------------------------------------------------------------- /projects/api-boundries/src/app/b-relation-list/b-relation-list.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 4 | } 5 | 6 | .full-width { 7 | grid-column: 1 / -1; 8 | } 9 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../../dist/se-ng/swapi", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/simple-injector/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/simple-injector", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/app/dynsignal-form/dynsignal-form.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: var(--size-2); 4 | } 5 | 6 | label { 7 | display: flex; 8 | flex-direction: column; 9 | gap: var(--size-2) 10 | } 11 | -------------------------------------------------------------------------------- /src/app/required-attributes/required-attributes/required-attributes.component.html: -------------------------------------------------------------------------------- 1 |

Host for actual components

2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/se-ng/headless-ui/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../../dist/se-ng/headless-ui", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /src/app/grid-calender/calenderDay.ts: -------------------------------------------------------------------------------- 1 | export interface CalenderDay { 2 | date: Date; 3 | day: number; 4 | isCurrentMonth: boolean; 5 | isFirstSelected: boolean; 6 | isLastSelected: boolean; 7 | isSpecial: boolean; 8 | } 9 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/src/lib/observable-utils.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class ObservableUtilsService { 7 | constructor() {} 8 | } 9 | -------------------------------------------------------------------------------- /slides/slide-0.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 999 3 | tilte: slide1 4 | --- 5 | 6 | # Slip'n'Slides 7 | 8 | no moar typo 9 | 10 | Is this not possible to have grammar control? 11 | 12 | let us check this thing. 13 | 14 | ## a simple way! 15 | -------------------------------------------------------------------------------- /src/app/evented-outputs/evented-outputs.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | gap: 0.35rem; 4 | flex-direction: column; 5 | } 6 | 7 | p { 8 | display: flex; 9 | gap: 1rem; 10 | align-items: baseline; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/icon-sprite/icon-sprite.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | svg, 6 | img { 7 | width: 2rem; 8 | aspect-ratio: 1/1; 9 | color: white; 10 | display: inline-block; 11 | fill: white; 12 | } 13 | -------------------------------------------------------------------------------- /projects/se-ng/let/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tslint.json", 3 | "rules": { 4 | "directive-selector": [true, "attribute", "lib", "camelCase"], 5 | "component-selector": [true, "element", "lib", "kebab-case"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../../dist/se-ng/signal-utils", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/simple-injector/src/lib/get-unique-id.ts: -------------------------------------------------------------------------------- 1 | function* createId() { 2 | let id = 0; 3 | while (true) { 4 | yield id++; 5 | } 6 | } 7 | const idGenerator = createId(); 8 | export const getUniqueId = () => idGenerator.next().value; 9 | -------------------------------------------------------------------------------- /projects/se-ng/let/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../../dist/se-ng/observable-hooks", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../../dist/se-ng/observable-utils", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tslint.json", 3 | "rules": { 4 | "directive-selector": [true, "attribute", "lib", "camelCase"], 5 | "component-selector": [true, "element", "lib", "kebab-case"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/app/poke-api/pokemain/pokemain.component.html: -------------------------------------------------------------------------------- 1 |

pokemain works!

2 | 3 | 4 | 5 |

{{ samp }}

6 | 7 | -------------------------------------------------------------------------------- /src/app/resizable-panels/resizable-panels.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | border: 1px solid yellow; 4 | min-height: 100%; 5 | 6 | --panel-width: 300px; 7 | --panel-height: 300px; 8 | --panel-gap: 1.5rem; 9 | } 10 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["test.ts"], 8 | "include": ["**/*.spec.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": ["jasmine", "jasminewd2", "node"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/src/lib/util/is-async-iterable.ts: -------------------------------------------------------------------------------- 1 | export const isAsyncIterable = (x: any): x is AsyncIterable => { 2 | if (x===null || x===undefined) return false; 3 | return x && typeof x[Symbol.asyncIterator] === 'function'; 4 | }; 5 | -------------------------------------------------------------------------------- /slides/slide-4.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 100 3 | title: Four Slide Four 4 | --- 5 | 6 | # Slide 4? 7 | 8 | O **yeah** 9 | 10 | | x | 0 | 0 | 11 | | --- | --- | --- | 12 | | | x | | 13 | | 0 | | x | 14 | 15 | hello 16 | there 17 | -------------------------------------------------------------------------------- /src/app/lazy-component/lazy-component.component.html: -------------------------------------------------------------------------------- 1 |

lazy-component works!

2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tslint.json", 3 | "rules": { 4 | "directive-selector": [true, "attribute", "lib", "camelCase"], 5 | "component-selector": [true, "element", "lib", "kebab-case"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.lib.json", 3 | "compilerOptions": { 4 | "declarationMap": false 5 | }, 6 | "angularCompilerOptions": { 7 | "compilationMode": "partial" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tslint.json", 3 | "rules": { 4 | "directive-selector": [true, "attribute", "lib", "camelCase"], 5 | "component-selector": [true, "element", "lib", "kebab-case"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/language-routing/src/styles.css: -------------------------------------------------------------------------------- 1 | /* the props */ 2 | @import 'open-props/style'; 3 | 4 | /* just light or dark themes */ 5 | @import 'open-props/normalize/dark'; 6 | @import 'open-props/buttons/dark'; 7 | 8 | body { 9 | padding: var(--size-2); 10 | } 11 | -------------------------------------------------------------------------------- /src/app/crud-stuff/header/header.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | align-items: center; 4 | gap: 0.5rem; 5 | margin-block-end: 0.75rem; 6 | } 7 | 8 | label { 9 | display: inline-flex; 10 | align-items: center; 11 | gap: 0.2rem; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/signal-forms-experiment/dynamic/dynamic.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: column; 4 | gap: var(--size-2); 5 | } 6 | 7 | 8 | label { 9 | display: flex; 10 | flex-direction: column; 11 | gap: var(--size-1); 12 | } 13 | -------------------------------------------------------------------------------- /src/app/test/test.routes.ts: -------------------------------------------------------------------------------- 1 | import type { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { path: 'testob', loadComponent: () => import('./test/test.component').then(m => m.TestComponent) }, 5 | { path: '**', redirectTo: 'testob' } 6 | ]; 7 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/pick-lang/pick-lang.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | div { 6 | display: flex; 7 | padding: var(--size-3); 8 | gap: var(--size-3); 9 | flex-direction: column; 10 | width: var(--size-content-1); 11 | } 12 | -------------------------------------------------------------------------------- /projects/slido/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); 6 | -------------------------------------------------------------------------------- /src/app/lazy-component/sample-three/sample-three.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-sample-three', 5 | templateUrl: './sample-three.component.html', 6 | styles: [] 7 | }) 8 | export default class SampleThreeComponent {} 9 | -------------------------------------------------------------------------------- /projects/se-ng/let/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/README.md: -------------------------------------------------------------------------------- 1 | # SignalUtils 2 | 3 | This library provides some utilities to make it easier to work with signals in Angular. 4 | 5 | ## Installation 6 | 7 | To install this library, run: 8 | 9 | ```bash 10 | $ npm install @se-ng/signal-utils --save 11 | ``` 12 | -------------------------------------------------------------------------------- /projects/folderCrud/tsconfig.json.: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "../../dist/folderCrud", 4 | "downlevelIteration": true, 5 | "experimentalDecorators": true, 6 | "strict": true, 7 | "allowSyntheticDefaultImports": true, 8 | "skipLibCheck": true 9 | 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /projects/slipnslide/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../../out-tsc/e2e", 6 | "types": ["jasmine", "jasminewd2", "node"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/app/crud-stuff/utils/generateRelation.ts: -------------------------------------------------------------------------------- 1 | import { userCard } from '../../generic-services/address.service'; 2 | 3 | export async function generateRelation() { 4 | const fakerModule = import('@faker-js/faker'); 5 | const module = await fakerModule; 6 | return userCard(module.faker); 7 | } 8 | -------------------------------------------------------------------------------- /src/app/blogs/article.interface.ts: -------------------------------------------------------------------------------- 1 | import type { Id } from '../in-mem-sample/in-mem.model'; 2 | 3 | export interface Article { 4 | id: Id; 5 | name: string; 6 | title: string; 7 | description: string; 8 | tags: string[]; 9 | published?: boolean; 10 | dateAdded: string; 11 | } 12 | -------------------------------------------------------------------------------- /projects/extreme-lazy-test/src/main.ts: -------------------------------------------------------------------------------- 1 | const { bootstrapApplication } = await import('@angular/platform-browser'); 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err)); 6 | -------------------------------------------------------------------------------- /projects/folderCrud/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "../../dist/folderCrud", 4 | "downlevelIteration": false, 5 | "experimentalDecorators": true, 6 | "strict": true, 7 | "allowSyntheticDefaultImports": true, 8 | "skipLibCheck": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.lang.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [provideRouter(routes)] 8 | }; 9 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/spec", 5 | "types": ["jasmine", "node"] 6 | }, 7 | "files": ["src/test.ts"], 8 | "include": ["**/*.spec.ts", "**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | template: ` `, 7 | imports: [RouterOutlet] 8 | }) 9 | export class AppComponent { 10 | } 11 | -------------------------------------------------------------------------------- /projects/simple-injector/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-injector", 3 | "version": "0.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^19.0.0", 6 | "@angular/core": "^19.0.0" 7 | }, 8 | "dependencies": { 9 | "tslib": "^2.3.0" 10 | }, 11 | "sideEffects": false 12 | } 13 | -------------------------------------------------------------------------------- /projects/se-ng/headless-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@se-ng/headless-ui", 3 | "version": "20.0.1", 4 | "peerDependencies": { 5 | "@angular/common": "^20.1.0", 6 | "@angular/core": "^20.1.0" 7 | }, 8 | "dependencies": { 9 | "tslib": "^2.3.0" 10 | }, 11 | "sideEffects": false 12 | } 13 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of observable-utils 3 | */ 4 | 5 | export { createGetStateMethod } from './lib/getStateMethodCreator'; 6 | export { createSetStateMethod } from './lib/setStateMethodCreator'; 7 | export { modelFromLatest } from './lib/modelFromLatest'; 8 | -------------------------------------------------------------------------------- /src/app/evented-outputs/ev-child/ev-child.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | background-color: #404040; 4 | padding: 0.35rem; 5 | border-radius: 0.35rem; 6 | color: whitesmoke; 7 | } 8 | :host.selected { 9 | display: block; 10 | background-color: #606060; 11 | color: white; 12 | } 13 | -------------------------------------------------------------------------------- /src/app/required-attributes/required-attributes/wait-for-it/wait-for-it.component.html: -------------------------------------------------------------------------------- 1 | @if (goodToGo$ | async; as goodToGo) { 2 |
    3 | @for (item of goodToGo; track item) { 4 |
  • {{ item.propName }} - {{ item.value }}
    • 5 | } 6 |
7 | } @else { 8 |

Loading ...

9 | } 10 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/main.ts: -------------------------------------------------------------------------------- 1 | import { provideZonelessChangeDetection } from '@angular/core'; 2 | import { bootstrapApplication } from '@angular/platform-browser'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, { providers: [provideZonelessChangeDetection()] }); 6 | -------------------------------------------------------------------------------- /src/app/blogs/blog-item/blog-item.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'se-blog-item', 5 | imports: [], 6 | template: `

blog-item works!

`, 7 | encapsulation: ViewEncapsulation.None 8 | }) 9 | export class BlogItemComponent {} 10 | -------------------------------------------------------------------------------- /src/app/directives/directives.routes.ts: -------------------------------------------------------------------------------- 1 | import type { Routes } from '@angular/router'; 2 | 3 | import { DirectivesSampleComponent } from './directives-sample/directives-sample.component'; 4 | 5 | export const routes: Routes = [ 6 | { 7 | path: '', 8 | component: DirectivesSampleComponent 9 | } 10 | ]; 11 | -------------------------------------------------------------------------------- /src/app/html-summary/html-summary.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'se-html-summary', 5 | imports: [], 6 | templateUrl: './html-summary.component.html', 7 | styleUrls: ['./html-summary.component.css'] 8 | }) 9 | export class HtmlSummaryComponent {} 10 | -------------------------------------------------------------------------------- /src/form-engine/form-engine.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'se-form-engine', 5 | imports: [], 6 | template: `

Form engine sample

7 | `, 8 | styleUrl: './form-engine.component.css' 9 | }) 10 | export class FormEngineComponent { 11 | 12 | } 13 | -------------------------------------------------------------------------------- /projects/slipnslide/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/app/cells/cell/cell.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | width: var(--cellSize); 4 | aspect-ratio: 1; 5 | align-items: center; 6 | justify-content: center; 7 | background-color: var(--cellBg); 8 | border-radius: 0.25rem; 9 | padding: 0rem; 10 | overflow: none; 11 | text-overflow: ellipsis; 12 | } 13 | -------------------------------------------------------------------------------- /projects/api-boundries/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | template: ` `, 7 | styles: [], 8 | imports: [RouterOutlet] 9 | }) 10 | export class AppComponent {} 11 | -------------------------------------------------------------------------------- /projects/api-boundries/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: 'home', 6 | loadComponent: () => import('./home/home.component').then(m => m.HomeComponent) 7 | }, 8 | { 9 | path: '**', 10 | redirectTo: 'home' 11 | } 12 | ]; 13 | -------------------------------------------------------------------------------- /projects/language-routing/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": ["jasmine"] 7 | }, 8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /projects/wire-it-editor/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /projects/wire-it-editor/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": ["jasmine"] 7 | }, 8 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | max_line_length = 92 11 | 12 | [*.md] 13 | max_line_length = off 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /projects/language-routing/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": ["src/main.ts"], 9 | "include": ["src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/app/crud-stuff/utils/is-empty-relation.ts: -------------------------------------------------------------------------------- 1 | import type { UserCard } from '../../generic-services/address.service'; 2 | 3 | 4 | 5 | export const isEmptyRelation = (obj: Partial) => { 6 | const { id, ...rest } = obj; // a relation is empty if it has no other properties than id 7 | return Object.keys(rest).length === 0; 8 | }; 9 | -------------------------------------------------------------------------------- /src/app/input-host-experiment/input-host-experiment.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | .error { 6 | color: red; 7 | } 8 | /* :host-context(.dark-theme) { 9 | background-color: #333; 10 | color: white; 11 | } 12 | :host-context(.light-theme) { 13 | background-color: #f9f9f9; 14 | color: black; 15 | } */ 16 | -------------------------------------------------------------------------------- /src/app/mqtt/power-meter/power-meter.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | button { 6 | background-color: var(--surface-4); 7 | margin: .5rem; 8 | } 9 | 10 | h4 button { 11 | margin:0; 12 | border-radius: 50%; 13 | aspect-ratio: 1 / 1; 14 | padding: 0.5rem; 15 | transform: scale(0.75); 16 | } 17 | 18 | -------------------------------------------------------------------------------- /src/app/reusable-dialog/dummy-content/dummy-content.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | selector: 'se-dummy-content', 6 | imports: [], 7 | template: `

dummy-content works!

`, 8 | styleUrl: './dummy-content.component.css' 9 | }) 10 | export class DummyContentComponent {} 11 | -------------------------------------------------------------------------------- /src/assets/icons/Ionic-Ionicons-Pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/local-state/local-state.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-local-state', 6 | templateUrl: './local-state.component.html', 7 | styles: [], 8 | imports: [RouterOutlet] 9 | }) 10 | export class LocalStateComponent {} 11 | -------------------------------------------------------------------------------- /src/app/directives/directives-sample/directives-sample.component.html: -------------------------------------------------------------------------------- 1 |

directives-sample!

2 |
one
3 |
two
4 |
sdf
5 |
sdftr
6 | 7 |

Available ids:

8 |
9 | @for (id of ids$ | async; track id) { 10 |
{{ id }}
11 | } 12 |
13 | -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Component } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-home', 6 | templateUrl: './home.component.html', 7 | styles: [] 8 | }) 9 | export class HomeComponent implements OnInit { 10 | constructor() {} 11 | 12 | ngOnInit() {} 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/icons/cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of observable-hooks 3 | */ 4 | 5 | export { 6 | seAfterContentChecked, 7 | seAfterContentInit, 8 | seAfterViewChecked, 9 | seAfterViewInit, 10 | seDoCheck, 11 | seOnChanges, 12 | seOnDestroy, 13 | seOnInit 14 | } from './lib/seObservableLifeCycleHooksMixins'; 15 | -------------------------------------------------------------------------------- /slides/slide-1.md: -------------------------------------------------------------------------------- 1 | # Signals, watch the effect 2 | 3 | ## a presentation by Sander Elias 4 | 5 | ---NextSlide 6 | 7 | # Hello world 8 | 9 | some _first_ **content** to get things started 10 | 11 | - test 12 | - een 13 | - ding 14 | 15 | ---NextSlide 16 | 17 | # Demo Slide 18 | 19 | ## Subtitle 20 | 21 | Some more content to show off the new slide 22 | -------------------------------------------------------------------------------- /projects/api-boundries/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": ["jasmine"] 7 | }, 8 | "files": ["src/test.ts"], 9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/src/lib/util/is-integer-string.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * checks if a string is an integer 3 | * @param str the string to check 4 | * @returns true if the string is an integer, false otherwise 5 | */ 6 | 7 | export const isIntegerString = (str: string) => { 8 | const n = parseInt(str, 10); 9 | return !isNaN(n) && `${n}` === str; 10 | }; 11 | -------------------------------------------------------------------------------- /projects/slipnslide/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": ["jasmine"] 7 | }, 8 | "files": ["src/test.ts"], 9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/app/mqtt/power-meter/dialog/power-meter-dialog.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | label { 6 | margin-block-start: .5rem;; 7 | display: grid; 8 | grid-template-columns: 5rem 1fr; 9 | align-items: center; 10 | gap: .5rem; 11 | } 12 | 13 | /* Add space between any buttons */ 14 | button + button { 15 | margin-left: 0.5rem; 16 | } 17 | -------------------------------------------------------------------------------- /quickTsExperiments/interatorStuff.ts: -------------------------------------------------------------------------------- 1 | const log = (x: any) => ({ 2 | [Symbol.iterator]: function* () { 3 | for (let element of x) { 4 | yield console.log(element); 5 | } 6 | } 7 | }); 8 | 9 | const log1 = function* (x: any) { 10 | for (let element of x) { 11 | yield console.log(element); 12 | } 13 | }; 14 | 15 | // [...log1(new Set([1, 2]))] ?// 16 | -------------------------------------------------------------------------------- /src/app/grid-calender/grid-calender.component.css: -------------------------------------------------------------------------------- 1 | @layer se_calendar.overview, se_calendar.month, se_calendar.day; 2 | 3 | @layer se_calendar.overview { 4 | :host { 5 | display: block; 6 | } 7 | 8 | div { 9 | display: grid; 10 | grid-template-columns: repeat(auto-fit, 352px); 11 | grid-template-rows: auto 1fr; 12 | gap: 2rem; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/observable-state/lifeycle-hooks-sample/lifeycle-hooks-sample.component.html: -------------------------------------------------------------------------------- 1 | @if (viewModel$ | async; as vm) { 2 | 3 | 4 |
    5 | @for (ship of vm.search === '' ? vm.allShips : vm.result; track ship) { 6 |
  • {{ ship.name }}
    • 7 | } 8 |
9 | } @else { 10 |
Loading...
11 | } 12 | -------------------------------------------------------------------------------- /src/app/svg-test/blocks/blocks.component.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | @for (b of blocks; track b; let i = $index) { 6 | 7 | } 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "angularCompilerOptions": { 8 | "_enabledBlockTypes": ["if", "for", "switch", "defer", "track"] 9 | }, 10 | "files": ["main.ts", "main.server.ts", "../server.ts"], 11 | "include": ["src/**/*.d.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getTitleText()).toEqual('Welcome to samples!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/src/lib/observable-utils.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-observable-utils', 5 | template: `

observable-utils works!

`, 6 | styles: [] 7 | }) 8 | export class ObservableUtilsComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /projects/api-boundries/src/pluck.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs'; 2 | import { filter, map } from 'rxjs/operators'; 3 | 4 | export function pluck(prop: K): (source: Observable) => Observable { 5 | return (source: Observable): Observable => 6 | source.pipe( 7 | map(x => x[prop]), 8 | filter(x => !!x) 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /projects/slipnslide/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/src/lib/util/is-date.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Checks if the given parameter is a Date object. 3 | * also functions as a type guard 4 | * @param date parameter to check 5 | * @returns 6 | */ 7 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 8 | export function isDate(date: any): date is Date { 9 | return typeof date?.getMonth === 'function'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/rijks/art-detail/art-detail.component.css: -------------------------------------------------------------------------------- 1 | img { 2 | width: 100%; 3 | } 4 | li { 5 | list-style: none; 6 | } 7 | 8 | .box { 9 | height: 1.2em; 10 | width: auto; 11 | } 12 | .colorboxes { 13 | padding-left: 1.5em; 14 | padding-right: 1.5em; 15 | display: grid; 16 | grid-gap: 5px; 17 | grid-auto-flow: column; 18 | grid-auto-columns: minmax(2em, 1fr); 19 | } 20 | -------------------------------------------------------------------------------- /projects/api-boundries/src/app/relation-list/relation-list.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { path: ':id', loadComponent: () => import('./relation-detail/relation-detail.component').then(m => m.RelationDetailComponent) }, 5 | { path: '', loadComponent: () => import('./relation-list.component').then(m => m.RelationListComponent) } 6 | ]; 7 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | imports: [RouterOutlet], 8 | templateUrl: './app.component.html', 9 | styleUrls: ['./app.component.css'] 10 | }) 11 | export class AppComponent { 12 | title = 'LanguageRouting'; 13 | } 14 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | idb-keyval@^3.1.0: 6 | version "3.1.0" 7 | resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-3.1.0.tgz#cce9ed320734446784d52ed398c4b075a4273f51" 8 | integrity sha512-iFwFN5n00KNNnVxlOOK280SJJfXWY7pbMUOQXdIXehvvc/mGCV/6T2Ae+Pk2KwAkkATDTwfMavOiDH5lrJKWXQ== 9 | -------------------------------------------------------------------------------- /src/app/crud-stuff/relation-form/relation-form.component.css: -------------------------------------------------------------------------------- 1 | form, 2 | fieldset { 3 | display: flex; 4 | flex-direction: column; 5 | } 6 | 7 | input { 8 | margin-bottom: 1rem; 9 | } 10 | 11 | label:has(+input[required]) { 12 | &:after { 13 | display: inline; 14 | content: '*'; 15 | color: orange 16 | } 17 | } 18 | 19 | input:last-child { 20 | margin-bottom: 0; 21 | } 22 | -------------------------------------------------------------------------------- /projects/slido/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Slido 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /scripts/util/get-npm-version.mjs: -------------------------------------------------------------------------------- 1 | import { execSync } from 'node:child_process'; 2 | 3 | export const getNpmVersion = packageName => { 4 | try { 5 | const version = execSync(`npm show ${packageName} version`, { encoding: 'utf-8' }); 6 | return version.trim(); 7 | } catch { 8 | console.log(`⚠️ error reading the version from NPM, using 0.0.0`); 9 | return '0.0.0'; 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /projects/slido/src/app/app.config.server.ts: -------------------------------------------------------------------------------- 1 | import { provideServerRendering } from '@angular/ssr'; 2 | import { mergeApplicationConfig, ApplicationConfig } from '@angular/core'; 3 | import { appConfig } from './app.config'; 4 | 5 | const serverConfig: ApplicationConfig = { 6 | providers: [provideServerRendering()] 7 | }; 8 | 9 | export const config = mergeApplicationConfig(appConfig, serverConfig); 10 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/app/wireits/wireit/depedencies/depedencies.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-wrap: wrap; 4 | gap: var(--size-1); 5 | } 6 | dialog > main { 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: var(--size-1); 10 | } 11 | :host > button { 12 | background: var(--color-1); 13 | border-radius: 2rem; 14 | height: 1.5rem; 15 | padding: 0 0.7rem; 16 | } 17 | -------------------------------------------------------------------------------- /src/app/crud-stuff/high-light-body/high-light-body.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'tbody[highLight]', 5 | imports: [], 6 | template: ``, 7 | changeDetection: ChangeDetectionStrategy.OnPush 8 | }) 9 | export class HighLightBodyComponent { 10 | highLight = input(); 11 | } 12 | -------------------------------------------------------------------------------- /src/app/lazy-component/sample-one/sample-one.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Component } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-sample-one', 6 | templateUrl: './sample-one.component.html', 7 | styles: [] 8 | }) 9 | export default class SampleOneComponent implements OnInit { 10 | constructor() {} 11 | 12 | ngOnInit(): void {} 13 | } 14 | -------------------------------------------------------------------------------- /src/app/lazy-component/sample-two/sample-two.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Component } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-sample-two', 6 | templateUrl: './sample-two.component.html', 7 | styles: [] 8 | }) 9 | export default class SampleTwoComponent implements OnInit { 10 | constructor() {} 11 | 12 | ngOnInit(): void {} 13 | } 14 | -------------------------------------------------------------------------------- /src/app/mqtt/routes.ts: -------------------------------------------------------------------------------- 1 | import type { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: '', 6 | loadComponent: () => import('./mqtt.component').then(m => m.MqttComponent) 7 | }, 8 | { 9 | path: 'list', 10 | loadComponent: () => import('./device-list.component').then(m => m.DeviceListComponent) 11 | } 12 | ]; 13 | 14 | export default routes; 15 | -------------------------------------------------------------------------------- /projects/api-boundries/src/app/app.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { path: 'relations', loadChildren: () => import('./relation-list/relation-list.routing').then(m => m.routes) }, 5 | { path: 'bRelations', loadChildren: () => import('./b-relation-list/b-relation-list.routing').then(m => m.routes) }, 6 | { path: '**', redirectTo: 'bRelations' } 7 | ]; 8 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/lib/swapi.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-swapi', 5 | template: ` 6 |

Swapi module is in place

7 |

Inject the swapi service where you need it.

8 | `, 9 | styles: [] 10 | }) 11 | export class SwapiComponent implements OnInit { 12 | constructor() {} 13 | 14 | ngOnInit() {} 15 | } 16 | -------------------------------------------------------------------------------- /projects/slipnslide/src/app/show-comp/show-comp.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'show-comp', 5 | template: `

show-comp works! {{ component }}

`, 6 | styles: [] 7 | }) 8 | export class ShowCompComponent implements OnInit { 9 | @Input() component: string; 10 | 11 | constructor() {} 12 | 13 | ngOnInit(): void {} 14 | } 15 | -------------------------------------------------------------------------------- /projects/slipnslide/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Slipnslide 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/api-boundries/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ApiBoundries 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WireIt Editor 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/app/rijks/art-detail/art-detail.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | import type { RakiObject } from '../rakiCollection'; 4 | @Component({ 5 | selector: 'app-art-detail', 6 | templateUrl: './art-detail.component.html', 7 | styleUrls: ['./art-detail.component.css'] 8 | }) 9 | export class ArtDetailComponent { 10 | @Input() artDetail: RakiObject.ArtDetailObject; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/test/obs-click.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input } from '@angular/core'; 2 | 3 | @Directive({ 4 | // tslint:disable-next-line:directive-selector 5 | selector: '[my-click]' 6 | }) 7 | export class ObsClickDirective { 8 | @Input('my-click') set click(x: any) { 9 | console.log('click testup', x); 10 | } 11 | 12 | constructor() { 13 | console.log('{click} constructed'); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/extreme-lazy-test/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ExtremeLazyTest 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /projects/language-routing/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | LanguageRouting 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /quickTsExperiments/keyofexp.ts: -------------------------------------------------------------------------------- 1 | const someSample: SomeSample = { 2 | a: 1, 3 | hello: 'hello', 4 | b: new Date() 5 | }; 6 | 7 | interface SomeSample { 8 | a: 0 | 1 | boolean; 9 | hello: string; 10 | b: Date; 11 | } 12 | 13 | Object.keys(someSample).forEach(key => { 14 | if (key === 'a') { 15 | someSample[key] = someSample[key] === 1 ? true : false; 16 | } 17 | }); 18 | 19 | console.dir(someSample); 20 | -------------------------------------------------------------------------------- /projects/slipnslide/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { RouterLink } from '@angular/router'; 3 | 4 | @Component({ 5 | selector: 'app-home', 6 | template: `

Home

`, 7 | styles: [], 8 | imports: [RouterLink] 9 | }) 10 | export class HomeComponent implements OnInit { 11 | constructor() {} 12 | 13 | ngOnInit(): void {} 14 | } 15 | -------------------------------------------------------------------------------- /projects/extreme-lazy-test/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | const { Component } = await import('@angular/core'); 2 | const { RouterOutlet } = await import('@angular/router'); 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | standalone: true, 7 | imports: [RouterOutlet], 8 | templateUrl: './app.component.html', 9 | styleUrl: './app.component.css' 10 | }) 11 | export class AppComponent { 12 | title = 'extremeLazyTest'; 13 | } 14 | -------------------------------------------------------------------------------- /src/app/blogs/blog-list/blog-list.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | background-color: var(--surface-2); 4 | padding: var(--size-4); 5 | margin: 0; 6 | list-style-type: none; 7 | inline-size: fit-content; 8 | block-size: fit-content; 9 | border-radius: var(--border-size-5); 10 | 11 | li { 12 | margin:0; 13 | } 14 | 15 | li + li { 16 | margin-block-start: var(--size-3); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/rvt/routes.ts: -------------------------------------------------------------------------------- 1 | import type { Route } from '@angular/router'; 2 | 3 | const routes: Route[] = [ 4 | { path: 'template', loadComponent: () => import('./template/template.component') }, 5 | { path: 'reactive', loadComponent: () => import('./reactive/reactive.component') }, 6 | { path: '', loadComponent: () => import('./both/both.component') }, 7 | { path: '**', redirectTo: 'both' } 8 | ]; 9 | 10 | export default routes; 11 | -------------------------------------------------------------------------------- /projects/api-boundries/src/app/b-relation-list/b-relation-list.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: ':id', 6 | loadComponent: () => import('./b-relation-detail/b-relation-detail.component').then(m => m.BRelationDetailComponent) 7 | }, 8 | { path: '', loadComponent: () => import('./b-relation-list.component').then(m => m.BRelationListComponent) } 9 | ]; 10 | -------------------------------------------------------------------------------- /src/app/routed-popup/back-drop/back-drop.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Component } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-back-drop', 6 | templateUrl: './back-drop.component.html', 7 | styles: [] 8 | }) 9 | export class BackDropComponent implements OnInit { 10 | constructor() {} 11 | 12 | ngOnInit() { 13 | console.log('backdrop is activated'); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/language-routing/src/main.ts: -------------------------------------------------------------------------------- 1 | import { provideZonelessChangeDetection } from '@angular/core'; 2 | import { bootstrapApplication } from '@angular/platform-browser'; 3 | import { AppComponent } from './app/app.component'; 4 | import { appConfig } from './app/app.config'; 5 | 6 | bootstrapApplication(AppComponent, { ...appConfig, providers: [provideZonelessChangeDetection(), ...appConfig.providers] }).catch( 7 | err => console.error(err) 8 | ); 9 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/app/wireits/wireits.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | margin-top: 1rem; 3 | display: grid; 4 | grid-template-columns: repeat(auto-fill, var(--size-content-3)); 5 | gap: var(--size-2); 6 | } 7 | header { 8 | grid-column: 1 / -1; 9 | background: var(--color-primary); 10 | display: flex; 11 | align-items: center; 12 | gap: var(--size-3); 13 | } 14 | header > input { 15 | font-size: var(--font-size-5); 16 | } 17 | -------------------------------------------------------------------------------- /src/app/modal-samp/modal-demo/modal-demo.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | @if (shown) { 5 |
6 |
7 |

Whatevever

8 |

Hi {{ 'string from view' }}, your order is being processed

9 | 10 |
11 |
12 | } 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "arrowParens": "avoid", 4 | "bracketSpacing": true, 5 | "embeddedLanguageFormatting": "auto", 6 | "htmlWhitespaceSensitivity": "css", 7 | "printWidth": 132, 8 | "tabWidth": 2, 9 | "proseWrap": "preserve", 10 | "quoteProps": "as-needed", 11 | "requirePragma": false, 12 | "semi": true, 13 | "singleAttributePerLine": false, 14 | "trailingComma": "none", 15 | "useTabs": false 16 | } 17 | -------------------------------------------------------------------------------- /projects/folderCrud/utils/walkSync.ts: -------------------------------------------------------------------------------- 1 | import { readdirSync, statSync } from 'fs'; 2 | export const walkSync = function (dir: string, filelist: string[] = []) { 3 | const files = readdirSync(dir); 4 | files.forEach(function (file) { 5 | if (statSync(dir + file).isDirectory()) { 6 | filelist = walkSync(dir + file + '/', filelist); 7 | } else { 8 | filelist.push(dir + file); 9 | } 10 | }); 11 | return filelist; 12 | }; 13 | -------------------------------------------------------------------------------- /src/app/mqtt/mqtt.component.html: -------------------------------------------------------------------------------- 1 |

MTTQ stuff

2 | 3 | 4 | 5 | @for (device of $state(); track device.ieee_address) { 6 | 7 | 8 | 9 | 10 | 11 | 12 | } 13 |
icon{{device.friendly_name}}{{device.friendly_name}}{{device.definition?.exposes| json}}
14 | 15 | 
{{$state() | json}}
16 | -------------------------------------------------------------------------------- /src/app/resizable-panels/resizable-panel/resizable-panel.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-block; 3 | --_panel-width: var(--panel-width, 300px); 4 | --_panel-height: var(--panel-height, 300px); 5 | margin: calc(var(--panel-gap) / 2); 6 | width: var(--_panel-width); 7 | height: var(--_panel-height); 8 | min-height: 1.5rem; 9 | min-width: 4rem; 10 | resize: both; 11 | overflow: auto; 12 | 13 | border: 1px solid white; 14 | } 15 | -------------------------------------------------------------------------------- /src/app/test/test/test.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Component } from '@angular/core'; 3 | 4 | import { ObsClickDirective } from '../obs-click.directive'; 5 | 6 | @Component({ 7 | selector: 'app-test', 8 | templateUrl: './test.component.html', 9 | styles: [], 10 | imports: [ObsClickDirective] 11 | }) 12 | export class TestComponent implements OnInit { 13 | constructor() {} 14 | 15 | ngOnInit() {} 16 | } 17 | -------------------------------------------------------------------------------- /src/utils/take-until-abort.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs'; 2 | 3 | export const takeUntilAbort = 4 | (signal: AbortSignal) => 5 | (source: Observable) => 6 | new Observable(subscriber => { 7 | const subscription = source.subscribe(subscriber); 8 | signal.addEventListener('abort', () => { 9 | subscription.unsubscribe(); 10 | subscriber.complete(); 11 | }); 12 | return subscription; 13 | }); 14 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.9' 2 | services: 3 | couchdb: 4 | image: 'couchdb:3.4.3' 5 | network_mode: host 6 | ports: 7 | - '5984:5984' 8 | volumes: 9 | - './.couchdb/data:/opt/couchdb/data' 10 | - './.couchdb/config:/opt/couchdb/etc/local.d' 11 | environment: 12 | - COUCHDB_PASSWORD=password 13 | - COUCHDB_USER=admin 14 | container_name: my-couchdb 15 | -------------------------------------------------------------------------------- /projects/extreme-lazy-test/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | const core = await import('@angular/core'); 2 | const { provideZoneChangeDetection } = core; 3 | const { provideRouter } = await import('@angular/router'); 4 | 5 | import { routes } from './app.routes'; 6 | import type { ApplicationConfig } from '@angular/core'; 7 | 8 | export const appConfig: ApplicationConfig = { 9 | providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] 10 | }; 11 | -------------------------------------------------------------------------------- /src/app/local-state/local-state.routes.ts: -------------------------------------------------------------------------------- 1 | import type { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: '', 6 | loadComponent: () => import('./local-state.component').then(m => m.LocalStateComponent), 7 | children: [ 8 | { path: ':id', loadComponent: () => import('./ls-home/ls-home.component').then(m => m.LsHomeComponent) }, 9 | { path: '', redirectTo: './1', pathMatch: 'full' } 10 | ] 11 | } 12 | ]; 13 | -------------------------------------------------------------------------------- /projects/slido/src/main.server.ts: -------------------------------------------------------------------------------- 1 | import { provideZonelessChangeDetection } from "@angular/core"; 2 | import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser'; 3 | import { AppComponent } from './app/app.component'; 4 | import { config } from './app/app.config.server'; 5 | 6 | export const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZonelessChangeDetection(), ...config.providers]}, context); 7 | 8 | -------------------------------------------------------------------------------- /src/app/mqtt/mqtt.routes.ts: -------------------------------------------------------------------------------- 1 | import type { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: 'list', 6 | loadComponent: () => import('./device-list.component').then(m => m.DeviceListComponent), 7 | }, 8 | ]; 9 | import type { Routes } from '@angular/router'; 10 | 11 | export const routes: Routes = [ 12 | { 13 | path: '', 14 | loadComponent: () => import('./mqtt.component').then(m => m.MqttComponent), 15 | }, 16 | ]; 17 | -------------------------------------------------------------------------------- /src/app/rxjstest/rxjstest.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | max-height: 90vh; 4 | overflow: auto; 5 | } 6 | 7 | button { 8 | display: inline-block; 9 | width: 2rem; 10 | background-color: inherit; 11 | border: none; 12 | padding: 0; 13 | margin: 0; 14 | } 15 | 16 | ul { 17 | display: grid; 18 | gap: 0.2rem; 19 | list-style: none; 20 | padding: 0; 21 | margin: 0; 22 | grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); 23 | } 24 | -------------------------------------------------------------------------------- /projects/slido/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/spec", 7 | "types": ["jasmine"] 8 | }, 9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/app/crud-stuff/notify-dialog/notify-dialog.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | dialog { 6 | padding: 0; 7 | } 8 | 9 | dialog { 10 | & > div { 11 | padding-inline: 2rem; 12 | padding-block: 1rem; 13 | 14 | & > section { 15 | margin-block: 0.75rem; 16 | } 17 | } 18 | 19 | footer, 20 | header { 21 | display: flex; 22 | inline-size: 100%; 23 | align-content: center; 24 | justify-content: center; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /projects/se-ng/headless-ui/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.lib.json", 5 | "compilerOptions": { 6 | "declarationMap": false 7 | }, 8 | "angularCompilerOptions": { 9 | "compilationMode": "partial" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.lib.json", 5 | "compilerOptions": { 6 | "declarationMap": false 7 | }, 8 | "angularCompilerOptions": { 9 | "compilationMode": "partial" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/simple-injector/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.lib.json", 5 | "compilerOptions": { 6 | "declarationMap": false 7 | }, 8 | "angularCompilerOptions": { 9 | "compilationMode": "partial" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/simple-injector/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/spec", 7 | "types": ["jasmine"] 8 | }, 9 | "include": ["**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/app/rijks/artists/artists.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
    4 | @for (piece of list$ | async; track piece) { 5 |
  • 6 | 7 | @if (piece.hasImage) { 8 | 9 | } 10 |
    • 11 | } 12 |
13 |
14 | -------------------------------------------------------------------------------- /projects/se-ng/let/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@se-ng/let", 3 | "version": "20.0.2", 4 | "private": false, 5 | "type": "module", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/SanderElias/Samples/tree/master/projects/se-ng/let" 9 | }, 10 | "dependencies": { 11 | "tslib": "^2.0.0" 12 | }, 13 | "peerDependencies": { 14 | "rxjs": "^6.4.0", 15 | "@angular/common": "^8.2.0-next.2", 16 | "@angular/core": "^8.2.0-next.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@se-ng/observable-hooks", 3 | "version": "20.0.2", 4 | "license": "MIT", 5 | "private": false, 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/SanderElias/Samples" 9 | }, 10 | "type": "module", 11 | "publisher": "Sander Elias", 12 | "dependencies": { 13 | "tslib": "^2.0.0" 14 | }, 15 | "peerDependencies": { 16 | "rxjs": ">5.5", 17 | "@angular/core": ">5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../../out-tsc/spec", 7 | "types": ["jasmine"] 8 | }, 9 | "include": ["**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/app/observable-state/observable-state.routes.ts: -------------------------------------------------------------------------------- 1 | import type { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { path: '', loadComponent: () => import('./observable-sate/observable-state.component').then(m => m.ObservableStateComponent) }, 5 | { 6 | path: 'hook', 7 | loadComponent: () => import('./lifeycle-hooks-sample/lifeycle-hooks-sample.component').then(m => m.LifeycleHooksSampleComponent) 8 | }, 9 | { path: '**', redirectTo: '' } 10 | ]; 11 | -------------------------------------------------------------------------------- /projects/extreme-lazy-test/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/spec", 7 | "types": ["jasmine"] 8 | }, 9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@se-ng/observable-utils", 3 | "version": "20.0.2", 4 | "license": "MIT", 5 | "private": false, 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/SanderElias/Samples/tree/master/projects/se-ng/observable-utils" 9 | }, 10 | "publisher": "Sander Elias", 11 | "dependencies": { 12 | "tslib": "^2.0.0" 13 | }, 14 | "type": "module", 15 | "peerDependencies": { 16 | "rxjs": ">5.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/simple-injector/src/lib/flat-injector.ts: -------------------------------------------------------------------------------- 1 | interface InjectAble { 2 | identifier: new () => T; 3 | instance?: T; 4 | } 5 | 6 | const injectableMap = () => new Map T, InjectAble>(); 7 | const myMap = injectableMap(); 8 | 9 | const inject = (target: new () => T): T => { 10 | if (!myMap.has(target)) { 11 | myMap.set(target, { 12 | identifier: target, 13 | instance: new target() 14 | }); 15 | } 16 | return myMap.get(target)!.instance! as T; 17 | }; 18 | -------------------------------------------------------------------------------- /src/app/rijks/rijks/rijks.module.ts: -------------------------------------------------------------------------------- 1 | import { AsyncPipe } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | import { ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { ArtDetailComponent } from '../art-detail/art-detail.component'; 6 | import { ArtistsComponent } from '../artists/artists.component'; 7 | 8 | @NgModule({ 9 | declarations: [ArtDetailComponent, ArtistsComponent], 10 | imports: [AsyncPipe, ReactiveFormsModule] 11 | }) 12 | export class RijksModule {} 13 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | # last 2 versions 8 | > 3% 9 | last 2 chrome version 10 | last 2 firefox version 11 | last 2 safari version 12 | not dead 13 | not IE 1-11 14 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/app.lang.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: ':langId', 6 | loadComponent: () => import('./lang/lang.component').then(m => m.LangComponent), 7 | loadChildren: () => import('./app.routes').then(m => m.routes) 8 | }, 9 | { 10 | path: '', 11 | pathMatch: 'full', 12 | loadComponent: () => import('./pick-lang/pick-lang.component').then(m => m.PickLangComponent) 13 | } 14 | ]; 15 | -------------------------------------------------------------------------------- /projects/slipnslide/src/app/demo/demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'demo', 5 | template: `

demo works!

`, 6 | styles: [ 7 | ` 8 | :host { 9 | display: block; 10 | background-color: #bada55; 11 | width: 200px; 12 | height: 200px; 13 | } 14 | ` 15 | ] 16 | }) 17 | export class DemoComponent implements OnInit { 18 | constructor() {} 19 | 20 | ngOnInit(): void {} 21 | } 22 | -------------------------------------------------------------------------------- /slides/slide.md: -------------------------------------------------------------------------------- 1 | --- 2 | position: 1 3 | title: Four Slide Four 4 | --- 5 | 6 | # Slide 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 28 | -------------------------------------------------------------------------------- /src/app/routed-popup/routed-popup.routes.ts: -------------------------------------------------------------------------------- 1 | import type { Routes } from '@angular/router'; 2 | 3 | import { BackDropComponent } from './back-drop/back-drop.component'; 4 | 5 | /** routes */ 6 | export const routes: Routes = [ 7 | { 8 | path: 'up', 9 | component: BackDropComponent, 10 | outlet: 'popup' 11 | // children: [ 12 | // { path: '', component: BackHomeComponent, outlet: 'popup' }, 13 | // { path: '**', redirectTo: '', outlet: 'popup' } 14 | // ] 15 | } 16 | ]; 17 | -------------------------------------------------------------------------------- /src/app/mqtt/pair-button/pair-button.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: column; 4 | cursor: pointer; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | dialog>div { 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | gap: 1rem; 15 | 16 | & > select { 17 | background: var(--surface-3); 18 | border-radius: 1rem; 19 | padding: .5rem; 20 | overflow: auto; 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, inject } from '@angular/core'; 2 | 3 | import { LangService } from '../lang.service'; 4 | 5 | @Component({ 6 | selector: 'se-home', 7 | imports: [], 8 | template: ` 9 |

10 | Welcome 11 |

12 |

to the {{ lang }} home page

13 | 14 | 15 | `, 16 | styleUrls: ['./home.component.css'] 17 | }) 18 | export class HomeComponent { 19 | lang = inject(LangService).current; 20 | } 21 | -------------------------------------------------------------------------------- /projects/se-ng/headless-ui/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../../out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@se-ng/swapi", 3 | "version": "20.0.2", 4 | "private": false, 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/SanderElias/Samples/tree/main/projects/se-ng/swapi" 8 | }, 9 | "dependencies": { 10 | "tslib": "^2.4.0" 11 | }, 12 | "type": "module", 13 | "peerDependencies": { 14 | "@angular/common": ">=18.0.0", 15 | "@angular/core": ">=18.0.0", 16 | "rxjs": ">=7.5.0", 17 | "idb-keyval": "^6.2.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/routed-popup/back-home/back-home.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Component, inject } from '@angular/core'; 3 | import { Router } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-back-home', 7 | templateUrl: './back-home.component.html', 8 | styles: [] 9 | }) 10 | export class BackHomeComponent implements OnInit { 11 | private router = inject(Router); 12 | 13 | ngOnInit() {} 14 | 15 | handle() { 16 | this.router.navigate([]); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/app/view-model/painting/painting.component.html: -------------------------------------------------------------------------------- 1 | 19 |
20 | -------------------------------------------------------------------------------- /projects/slido/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | 4 | // declare global { 5 | // interface Window { 6 | // showOpenFilePicker: any; 7 | // } 8 | // } 9 | 10 | @Component({ 11 | selector: 'app-root', 12 | imports: [RouterOutlet], 13 | templateUrl: './app.component.html', 14 | styleUrl: './app.component.css', 15 | changeDetection: ChangeDetectionStrategy.OnPush 16 | }) 17 | export class AppComponent {} 18 | -------------------------------------------------------------------------------- /projects/slido/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/app", 7 | "lib": ["es2023", "dom"] 8 | }, 9 | "files": ["src/main.ts", "src/main.server.ts", "server.ts"], 10 | "include": ["src/**/*.d.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /src/app/app.config.server.ts: -------------------------------------------------------------------------------- 1 | import type { ApplicationConfig } from '@angular/core'; 2 | import { mergeApplicationConfig } from '@angular/core'; 3 | import { provideServerRendering } from '@angular/ssr'; 4 | 5 | import { appConfig } from './app.config'; 6 | import { withIncrementalHydration } from '@angular/platform-browser'; 7 | 8 | const serverConfig: ApplicationConfig = { 9 | // providers: [provideServerRendering()] 10 | providers: [] 11 | }; 12 | 13 | export const config = mergeApplicationConfig(appConfig, serverConfig); 14 | -------------------------------------------------------------------------------- /src/app/custom-native-form/digits/digits.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: row; 4 | gap: 0.5rem; 5 | } 6 | input { 7 | width: 2.7rem; 8 | aspect-ratio: 3/4; 9 | text-align: center; 10 | font-size: 1.5rem; 11 | border-radius: 0.5rem; 12 | border: 1px solid #ccc; 13 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 14 | transition: all 0.3s ease; 15 | 16 | &:focus { 17 | outline: none; 18 | border-color: #007bff; 19 | box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import { getTestBed } from '@angular/core/testing'; 4 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 5 | 6 | import 'zone.js/testing'; 7 | 8 | // First, initialize the Angular testing environment. 9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 10 | teardown: { destroyAfterEach: false } 11 | }); 12 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@se-ng/signal-utils", 3 | "version": "20.0.2", 4 | "private": false, 5 | "author": "Sander Elias", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/SanderElias/Samples/tree/main/projects/se-ng/signal-utils" 10 | }, 11 | "peerDependencies": { 12 | "@angular/core": ">=19", 13 | "rxjs": ">=7" 14 | }, 15 | "dependencies": { 16 | "tslib": "^2.3.0" 17 | }, 18 | "sideEffects": false, 19 | "type": "module" 20 | } 21 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/public_api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of swapi 3 | */ 4 | 5 | export * from './lib/cache'; 6 | export * from './lib/FilmsRoot.interface'; 7 | export * from './lib/PeopleRoot.interface'; 8 | export * from './lib/PlanetsRoot.interface'; 9 | export * from './lib/SpaceShipsRoot.interface'; 10 | export * from './lib/SpeciesRoot.interface'; 11 | export * from './lib/swapi.component'; 12 | export * from './lib/swapi.service'; 13 | export * from './lib/SwapiRoot.interface'; 14 | export * from './lib/VerhiclesRoot.interface'; 15 | -------------------------------------------------------------------------------- /src/utils/signals/deferred.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A Deferred object represents a promise that can be resolved or rejected externally. 3 | * It provides `resolve` and `reject` methods to control the state of the promise. 4 | * 5 | * @template T - The type of the value that the promise will resolve with. 6 | */ 7 | export class Deferred { 8 | resolve!: (value: T) => void; 9 | reject!: (reason: any) => void; 10 | readonly promise = new Promise((resolve, reject) => { 11 | this.resolve = resolve; 12 | this.reject = reject; 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /projects/api-boundries/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 6 | 7 | // First, initialize the Angular testing environment. 8 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 9 | teardown: { destroyAfterEach: true } 10 | }); 11 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/lib/FilmsRoot.interface.ts: -------------------------------------------------------------------------------- 1 | export interface FilmsRoot { 2 | count: number; 3 | next: null; 4 | previous: null; 5 | results: Film[]; 6 | } 7 | export interface Film { 8 | title: string; 9 | episode_id: number; 10 | opening_crawl: string; 11 | director: string; 12 | producer: string; 13 | release_date: string; 14 | characters: string[]; 15 | planets: string[]; 16 | starships: string[]; 17 | vehicles: string[]; 18 | species: string[]; 19 | created: string; 20 | edited: string; 21 | url: string; 22 | } 23 | -------------------------------------------------------------------------------- /projects/simple-injector/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/lib", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [] 11 | }, 12 | "exclude": ["**/*.spec.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /projects/slipnslide/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 6 | 7 | // First, initialize the Angular testing environment. 8 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 9 | teardown: { destroyAfterEach: false } 10 | }); 11 | -------------------------------------------------------------------------------- /quickTsExperiments/signal-101.ts: -------------------------------------------------------------------------------- 1 | import { signal, effect, computed, Signal } from './signals/index.js'; 2 | 3 | const tick = () => new Promise(resolve => setTimeout(resolve, 100)); 4 | const simple = signal(0); 5 | const simple2 = signal({ a: 1 }); 6 | 7 | const sum = computed(() => simple() + simple2().a); 8 | 9 | effect(() => { 10 | console.log(sum()); 11 | }); 12 | 13 | simple.set(1); 14 | await tick(); 15 | simple.set(2); 16 | await tick(); 17 | simple.set(3); 18 | simple2.mutate(m => (m.a = 6)); 19 | 20 | // await tick() 21 | // simple.set(4) 22 | -------------------------------------------------------------------------------- /src/app/gridthings/gridthings/gridthings.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Component } from '@angular/core'; 3 | 4 | import { CellComponent } from '../cell/cell.component'; 5 | 6 | @Component({ 7 | selector: 'app-gridthings', 8 | templateUrl: './gridthings.component.html', 9 | styles: [], 10 | imports: [CellComponent] 11 | }) 12 | export class GridthingsComponent implements OnInit { 13 | labels = Array.from({ length: 10 }, (_, i) => i + 1); 14 | 15 | constructor() {} 16 | 17 | ngOnInit(): void {} 18 | } 19 | -------------------------------------------------------------------------------- /src/app/in-mem-sample/in-mem-utils.ts: -------------------------------------------------------------------------------- 1 | import { createUniqueId } from '../util/random-things'; 2 | 3 | import type { DbRecord,Id } from './in-mem.model'; 4 | 5 | 6 | export const createId = () => createUniqueId() as Id 7 | 8 | export const isDbRecord = (obj: any): obj is DbRecord => { 9 | return obj && typeof obj === 'object' && 'id' in obj && Array.isArray(obj.table); 10 | } 11 | 12 | export const assertRecord = (obj: any): DbRecord => { 13 | if (isDbRecord(obj)) { 14 | return obj; 15 | } 16 | throw new Error('Object is not a DbRecord'); 17 | } 18 | -------------------------------------------------------------------------------- /projects/slipnslide/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | > 3% 12 | not dead 13 | not IE 1-11 14 | -------------------------------------------------------------------------------- /src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | // import "zone.js" 2 | import { provideHttpClient, withFetch } from '@angular/common/http'; 3 | import { provideRouter, withComponentInputBinding } from '@angular/router'; 4 | 5 | import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser'; 6 | import { routes } from './routes'; 7 | 8 | export const appConfig = { 9 | providers: [ 10 | provideRouter(routes, withComponentInputBinding()), 11 | provideHttpClient(withFetch()), 12 | provideClientHydration(withIncrementalHydration()) 13 | ] 14 | }; 15 | -------------------------------------------------------------------------------- /src/app/modal-samp/modal-demo/modal-demo.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit} from '@angular/core'; 2 | import { Component, ViewChild } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-modal-demo', 6 | templateUrl: './modal-demo.component.html', 7 | styles: [], 8 | imports: [] 9 | }) 10 | export class ModalDemoComponent implements OnInit { 11 | @ViewChild('modal', { static: true }) modal: any; 12 | shown = false; 13 | 14 | ngOnInit() { 15 | // console.log(this.modal); 16 | setTimeout(() => (this.shown = true), 1500); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Samples 6 | 7 | 8 | 9 | 10 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/src/lib/util/deferred.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A Deferred object represents a promise that can be resolved or rejected externally. 3 | * It provides `resolve` and `reject` methods to control the state of the promise. 4 | * 5 | * @template T - The type of the value that the promise will resolve with. 6 | */ 7 | export class Deferred { 8 | resolve!: (value: T) => void; 9 | reject!: (reason: any) => void; 10 | readonly promise = new Promise((resolve, reject) => { 11 | this.resolve = resolve; 12 | this.reject = reject; 13 | }); 14 | } 15 | -------------------------------------------------------------------------------- /src/app/card/card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'se-card', 5 | imports: [], 6 | template: ` 7 | @for (i of arr; track i) { 8 |
9 |

{{ i }}

10 |
11 |
12 |

{{ i }}

13 |
14 |
15 |

{{ i }}

16 |
17 | } 18 | `, 19 | styleUrls: ['./card.component.css'] 20 | }) 21 | export class CardComponent { 22 | arr = [1, 2, 3, 4]; 23 | } 24 | -------------------------------------------------------------------------------- /src/app/cells/cells.component.css: -------------------------------------------------------------------------------- 1 | @property --cellBg { 2 | syntax: ''; 3 | inherits: true; 4 | initial-value: black; 5 | } 6 | 7 | @property --cellSize { 8 | syntax: ' | '; 9 | inherits: true; 10 | initial-value: 1.25rem; 11 | } 12 | 13 | :host { 14 | --cellBg: oklch(0.5 0.5 150); 15 | --cellSize: 15px; 16 | display: grid; 17 | height: 95vh; 18 | aspect-ratio: 1; 19 | grid-template-columns: repeat(auto-fit, var(--cellSize)); 20 | grid-template-rows: repeat(auto-fit, var(--cellSize)); 21 | 22 | gap: 0.15rem; 23 | } 24 | -------------------------------------------------------------------------------- /src/app/form-error/form-error.component.ts: -------------------------------------------------------------------------------- 1 | import { JsonPipe } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { ShowErrorComponent } from './show-error/show-error.component'; 6 | 7 | @Component({ 8 | selector: 'se-form-error', 9 | imports: [FormsModule, ShowErrorComponent, JsonPipe], 10 | templateUrl: './form-error.component.html', 11 | styleUrls: ['./form-error.component.css'] 12 | }) 13 | export default class FormErrorComponent { 14 | name = ''; 15 | age = 0; 16 | } 17 | -------------------------------------------------------------------------------- /projects/se-ng/let/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 7 | 8 | // First, initialize the Angular testing environment. 9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 10 | teardown: { destroyAfterEach: false } 11 | }); 12 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 7 | 8 | // First, initialize the Angular testing environment. 9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 10 | teardown: { destroyAfterEach: false } 11 | }); 12 | -------------------------------------------------------------------------------- /projects/slipnslide/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Injector } from '@angular/core'; 2 | import { createCustomElement } from '@angular/elements'; 3 | import { CodeSampleComponent } from './code-sample/code-sample.component'; 4 | import { ShowCompComponent } from './show-comp/show-comp.component'; 5 | import { RouterOutlet } from '@angular/router'; 6 | 7 | @Component({ 8 | selector: 'app-root', 9 | template: ``, 10 | styles: [], 11 | imports: [RouterOutlet] 12 | }) 13 | export class AppComponent { 14 | title = 'slipnslide'; 15 | } 16 | -------------------------------------------------------------------------------- /src/app/signal-forms-experiment/input-random-int/input-random-int.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: row; 4 | align-items: center; 5 | gap: var(--size-2); 6 | } 7 | 8 | :host.min-max { 9 | flex-direction: column; 10 | align-items: flex-start; 11 | gap: var(--size-1); 12 | 13 | :not(:first-child) { 14 | margin-inline-start: var(--size-4); 15 | } 16 | 17 | label { 18 | display: flex; 19 | flex-direction: row; 20 | align-items: center; 21 | gap: var(--size-2); 22 | } 23 | } 24 | 25 | label { 26 | display: none; 27 | } 28 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 7 | 8 | // First, initialize the Angular testing environment. 9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 10 | teardown: { destroyAfterEach: false } 11 | }); 12 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js'; 4 | import 'zone.js/testing'; 5 | import { getTestBed } from '@angular/core/testing'; 6 | import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 7 | 8 | // First, initialize the Angular testing environment. 9 | getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { 10 | teardown: { destroyAfterEach: false } 11 | }); 12 | -------------------------------------------------------------------------------- /src/app/rijks/art-detail/art-detail.component.html: -------------------------------------------------------------------------------- 1 | 2 |

{{ artDetail.title }}

3 | Maker{{ artDetail.principalMakers.length > 1 ? 's' : '' }} 4 |
    5 | @for (maker of artDetail.principalMakers; track maker) { 6 |
  • {{ maker.name }}
    • 7 | } 8 |
9 | @if (artDetail.colors.length > 0) { 10 |
11 | @for (c of artDetail.colors; track c) { 12 |
13 | } 14 |
15 | } 16 | 17 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/lang.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable, inject } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class LangService { 8 | router = inject(Router); 9 | 10 | known = ['nl', 'fr'] as const; 11 | 12 | current = ''; 13 | 14 | pick = (lang: any) => { 15 | if (!this.known.includes(lang)) { 16 | // go select a language 17 | this.router.navigateByUrl('/'); 18 | } 19 | this.current = lang; 20 | this.router.navigateByUrl(`/${lang}/home`); 21 | }; 22 | } 23 | -------------------------------------------------------------------------------- /src/app/indexdb/edit-record/edit-record.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | width: 30rem; 4 | border: 1px solid gray; 5 | background-color: rgb(38, 38, 38); 6 | padding: 1rem; 7 | gap: 1ch; 8 | flex-direction: column; 9 | } 10 | 11 | label { 12 | display: grid; 13 | gap: 1ch; 14 | grid-template-columns: 5rem 1fr; 15 | align-items: center; 16 | 17 | span { 18 | text-align: right; 19 | } 20 | } 21 | 22 | label.addProp { 23 | display: flex; 24 | gap: 1ch; 25 | align-items: flex-start; 26 | } 27 | 28 | div { 29 | display: flex; 30 | gap: 1ch; 31 | } 32 | -------------------------------------------------------------------------------- /src/app/reusable-dialog/dialog/dialog.component.ts: -------------------------------------------------------------------------------- 1 | import { afterRenderEffect, Component, ElementRef, inject, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'dialog', 5 | imports: [], 6 | template: ``, 7 | styleUrl: './dialog.component.css' 8 | }) 9 | export class DialogComponent { 10 | elm = inject(ElementRef).nativeElement as HTMLDialogElement; 11 | show = input(false); 12 | 13 | #dummy = afterRenderEffect(() => { 14 | if (this.show()) { 15 | this.elm.showModal(); 16 | } else { 17 | this.elm.close(); 18 | } 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /presentations/assets/exclamation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | exclamation 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/app/required-attributes/required-attributes/wait-for-it/SomeComponent.ts: -------------------------------------------------------------------------------- 1 | import { Input } from '@angular/core'; 2 | import { isArray } from 'util'; 3 | class SomeComponent { 4 | myCustomProperty: string[]; 5 | @Input('myCustomProperty') 6 | private set _myCustomProperty(newVal) { 7 | if (newVal && isArray(newVal) && newVal.every(item => typeof item === 'string')) { 8 | this._myCustomProperty = newVal; 9 | return; 10 | } 11 | if (newVal !== undefined) { 12 | throw new Error('myCustomProperty of SomeComponent can only be a string assay'); 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/app/signal-forms-experiment/tags/tags.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | /* margin-block-start: var(--size-2 ); */ 4 | 5 | } 6 | 7 | label.tags { 8 | display: grid; 9 | grid-template-columns: 48px auto; 10 | gap: var(--size-3); 11 | grid-row-gap: var(--size-1);; 12 | align-items: baseline; 13 | 14 | } 15 | 16 | .error { 17 | color: var(--red-5); 18 | font-variant: small-caps; 19 | font-size: .9rem; 20 | margin-inline-start: var(--size-2); 21 | } 22 | 23 | label.tags > button.action { 24 | position: inherit; 25 | margin-inline-start: 0; 26 | } 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/app/rvt/both/both.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import ReactiveComponent from '../reactive/reactive.component'; 4 | import TemplateComponent from '../template/template.component'; 5 | 6 | @Component({ 7 | selector: 'se-both', 8 | imports: [TemplateComponent, ReactiveComponent], 9 | template: ` 10 |

Reactive vs Template

11 |
12 | 13 | 14 |
15 | `, 16 | styleUrls: ['./both.component.css'] 17 | }) 18 | export default class BothComponent {} 19 | -------------------------------------------------------------------------------- /src/app/crud-stuff/utils/un-flattenRecord.ts: -------------------------------------------------------------------------------- 1 | import { isIntegerString } from '@se-ng/signal-utils'; 2 | 3 | export function unFlattenRecord(r: Record): Record { 4 | return Object.entries(r).reduce((acc, [k, v]) => { 5 | const path = k.split('.'); 6 | const slot = path.pop()!; 7 | let obj = acc; 8 | for (let idx = 0; idx < path.length; idx++) { 9 | const key = path[idx]; 10 | const nextKey = path[idx + 1] ?? slot; 11 | obj = obj[key] ??= isIntegerString(nextKey) ? [] : {}; 12 | } 13 | obj[slot] = v; 14 | return acc; 15 | }, {}); 16 | } 17 | -------------------------------------------------------------------------------- /src/app/svg-test/svg-test.component.html: -------------------------------------------------------------------------------- 1 |

Quick test with svg

2 | this image contains over {{ cellCount | number }} elements 3 | 4 | 5 |
6 | 7 | 8 | 24 | -------------------------------------------------------------------------------- /src/app/util/random-things.ts: -------------------------------------------------------------------------------- 1 | const seed = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; 2 | export const randomInt = (max = 2000) => Math.floor(Math.random() * max); 3 | const randChar = () => seed[randomInt(seed.length)]; 4 | const randChars = (n = 3) => Array.from({ length: n }, () => randChar()).join(''); 5 | 6 | export const getId = () => randChars(4) + '-' + Math.round(performance.now() * 10000000000).toString(36); 7 | export const createUniqueId = () => 8 | Date.now() 9 | .toString(36) 10 | .split('') 11 | .reverse() 12 | .map(c => c + randChar()) 13 | .join(''); 14 | -------------------------------------------------------------------------------- /src/app/view-transitions/view-transitions.component.css: -------------------------------------------------------------------------------- 1 | 2 | :host { 3 | display: block; 4 | } 5 | 6 | div.grid { 7 | display: grid; 8 | grid-template-columns: repeat(auto-fill, minmax(15vw, 1fr)); 9 | gap: 10px; 10 | padding: 10px; 11 | } 12 | 13 | div.button-bar { 14 | display: flex; 15 | gap: 20px; 16 | padding-inline: 20px; 17 | } 18 | 19 | 20 | div.box { 21 | aspect-ratio: 1 / 1; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | font-size: 2rem; 26 | color: white; 27 | border-radius: 8px; 28 | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); 29 | } 30 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/lib/PlanetsRoot.interface.ts: -------------------------------------------------------------------------------- 1 | // Generated by https://quicktype.io 2 | 3 | export interface PlanetsRoot { 4 | count: number; 5 | next: string; 6 | previous: null; 7 | results: Planet[]; 8 | } 9 | 10 | export interface Planet { 11 | name: string; 12 | rotation_period: string; 13 | orbital_period: string; 14 | diameter: string; 15 | climate: string; 16 | gravity: string; 17 | terrain: string; 18 | surface_water: string; 19 | population: string; 20 | residents: string[]; 21 | films: string[]; 22 | created: string; 23 | edited: string; 24 | url: string; 25 | } 26 | -------------------------------------------------------------------------------- /src/app/pannel-stuff/pannel-stuff.component.html: -------------------------------------------------------------------------------- 1 |

Pannel composition

2 | 3 | 4 |

Basic no frills pannel

5 |

You might want to add some styling to the base pannel.

6 | 7 | 8 | 9 |

Closable pannel

10 |

the directive adds a close emitter, so you can react on close.

11 | 12 | 13 | 14 |

Closable pannel with footer

15 |

the directive adds a close emitter, so you can react on close.

16 | 17 | -------------------------------------------------------------------------------- /scripts/bump-and-publish.mjs: -------------------------------------------------------------------------------- 1 | import { readBases } from './util/bases.mjs'; 2 | import { buildAndPublish } from './util/build-and-publish.mjs'; 3 | import { action, project } from './util/parse-cmd-line.mjs'; 4 | 5 | 6 | 7 | // buildAndPublish(project, action) 8 | if (project === undefined) { 9 | console.log(`⚠️ No project specified, publishing all projects`); 10 | const bases = await readBases(); 11 | for (const p of Object.values(bases)) { 12 | await buildAndPublish(p, action); 13 | console.log(`🛈 Project: ${p.name}, action: ${action}`); 14 | } 15 | } else { 16 | buildAndPublish(project, action); 17 | } 18 | -------------------------------------------------------------------------------- /src/app/grid-calender/day-cell/day-cell.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input } from '@angular/core'; 2 | 3 | import type { CalenderDay } from '../calenderDay'; 4 | @Component({ 5 | selector: 'se-day-cell', 6 | imports: [], 7 | template: ` {{ day().day }} `, 8 | styleUrls: ['./day-cell.component.css'], 9 | host: { 10 | '[class.mute]': '!day().isCurrentMonth', 11 | '[class.special]': 'day().isSpecial', 12 | '[class.first]': 'day().isFirstSelected', 13 | '[class.last]': 'day().isLastSelected' 14 | } 15 | }) 16 | export class DayCellComponent { 17 | readonly day = input.required(); 18 | } 19 | -------------------------------------------------------------------------------- /src/app/view-model/play-button/play-button.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, input } from '@angular/core'; 2 | 3 | @Component({ 4 | // tslint:disable-next-line:component-selector 5 | selector: 'play-button', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | template: ` 8 | 12 | `, 13 | standalone: true 14 | }) 15 | export class PlayButtonComponent { 16 | isPaused = input(); 17 | } 18 | -------------------------------------------------------------------------------- /projects/se-ng/headless-ui/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../../out-tsc/lib", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [] 11 | }, 12 | "include": [ 13 | "src/**/*.ts" 14 | ], 15 | "exclude": [ 16 | "**/*.spec.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /projects/slido/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = [ 4 | { 5 | path: 'present', 6 | loadComponent: () => import('./present/present.component').then(m => m.PresentComponent), 7 | children: [ 8 | { 9 | path: ':index', 10 | loadComponent: () => import('./slide/slide.component').then(m => m.SlideComponent) 11 | } 12 | ] 13 | }, 14 | { path: 'overview', loadComponent: () => import('./overview/overview.component').then(m => m.OverviewComponent) }, 15 | { 16 | path: '**', 17 | redirectTo: 'overview' 18 | } 19 | ]; 20 | -------------------------------------------------------------------------------- /src/app/directives/id.directive.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Directive, ElementRef, inject, Input } from '@angular/core'; 3 | 4 | @Directive({ 5 | selector: '[id]' 6 | }) 7 | export class IdDirective { 8 | @Input({ required: true }) id!: string; 9 | } 10 | 11 | @Directive({ 12 | selector: 'img[src]' 13 | }) 14 | export class lazyImagesLoadDirective implements OnInit { 15 | private elmRef = inject>(ElementRef); 16 | 17 | #elm = this.elmRef.nativeElement; 18 | 19 | ngOnInit() { 20 | this.#elm.setAttribute('loading', 'lazy'); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /articles/welcome.md: -------------------------------------------------------------------------------- 1 | # welcome 2 | 3 | Welcome to my blog! Here, I share my thoughts, experiences, and insights on various topics related to software development, programming languages, frameworks, and best practices. Whether you're a seasoned developer or just starting your coding journey, I hope you'll find something valuable here. 4 | 5 | Feel free to explore the articles, leave commentssee note below, and share your own experiences. Happy coding! 6 | 7 | > In due time I will add a comment system. For now, you can reach out to me via [bSky](https://bsky.app/profile/sanderelias.nl) or [Mastodon](https://mastodon.social/@sanderelias). 8 | -------------------------------------------------------------------------------- /projects/api-boundries/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode, provideZonelessChangeDetection } from '@angular/core'; 2 | 3 | import { bootstrapApplication } from '@angular/platform-browser'; 4 | import { provideRouter } from '@angular/router'; 5 | import { AppComponent } from './app/app.component'; 6 | import { routes } from './app/app.routing'; 7 | import { environment } from './environments/environment'; 8 | 9 | if (environment.production) { 10 | enableProdMode(); 11 | } 12 | 13 | bootstrapApplication(AppComponent, { 14 | providers: [provideZonelessChangeDetection(), provideRouter(routes)] 15 | }).catch(err => console.error(err)); 16 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/app/wireits/wireit/show-message/show-message.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: none; 3 | } 4 | 5 | dialog { 6 | display: flex; 7 | padding: var(--size-2); 8 | flex-direction: column; 9 | gap: var(--size-2); 10 | padding: 0; 11 | } 12 | 13 | dialog > main { 14 | margin: 0 var(--size-2); 15 | } 16 | 17 | header { 18 | margin: 0; 19 | height: 2.5rem; 20 | background-color: var(--surface-3); 21 | } 22 | 23 | header > * { 24 | scale: 0.6; 25 | } 26 | 27 | dialog > footer { 28 | display: flex; 29 | justify-content: flex-end; 30 | gap: var(--size-2); 31 | padding: var(--size-2); 32 | } 33 | -------------------------------------------------------------------------------- /quickTsExperiments/signals/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | export { isSignal, Signal, ValueEqualityFn } from './src/api.js'; 10 | export { computed } from './src/computed.js'; 11 | export { setActiveConsumer } from './src/internal.js'; 12 | export { SettableSignal, signal } from './src/signal.js'; 13 | export { untrack } from './src/untrack.js'; 14 | export { Watch } from './src/watch.js'; 15 | export { effect } from './src/effect.js'; 16 | -------------------------------------------------------------------------------- /src/app/view-transitions/batchgettest.ts: -------------------------------------------------------------------------------- 1 | const ids = [ 2 | {id: 'n8fgba1MaU8Hacmi'}, 3 | {id: 'jplzfyyB9b8ga7mO'}, 4 | {id: 'jd4G6I3Tan89aTmS'}, 5 | {id: '4Mcq6k9Jam8vaymZ'}, 6 | {id: 'stn47rvV9Y8UaTmi'}, 7 | {id: '3la6m6ya9L8Balmc'}, 8 | {id: 'vij7eJ01av8Ha6mt'}, 9 | {id: '72yb97vk998Nasmu'}, 10 | {id: 'hz4Oqi2aaK8Qa3m3'}, 11 | {id: '9Zuiwn9xaw8qavmb'}, 12 | {id: '6F16jFbYaZ8Va5m2'}, 13 | {id: 'clxZ1M89ad8ka1mY'}, 14 | {id: 'zzn08Szj9T8raBms'}, 15 | {id: 'kivCln5Tam85avma'}, 16 | {id: 'r57G8Z6Dah8ta8mm'}, 17 | ]; 18 | 19 | 20 | 21 | class batchGetter { 22 | cue = new Map>(); 23 | 24 | } 25 | -------------------------------------------------------------------------------- /bluesky1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sanderelias.nl 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/app/custom-native-form/digit-input/digit-input.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | 4 | form { 5 | display: flex; 6 | flex-direction: row; 7 | gap: 0.5rem; 8 | 9 | input { 10 | width: 2.7rem; 11 | aspect-ratio: 3/4; 12 | text-align: center; 13 | font-size: 1.5rem; 14 | border-radius: 0.5rem; 15 | border: 1px solid #ccc; 16 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 17 | transition: all 0.3s ease; 18 | 19 | &:focus { 20 | outline: none; 21 | border-color: #007bff; 22 | box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /projects/slipnslide/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode, importProvidersFrom, provideZonelessChangeDetection } from '@angular/core'; 2 | 3 | import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; 4 | import { AppRoutingModule } from './app/app-routing.module'; 5 | import { AppComponent } from './app/app.component'; 6 | import { environment } from './environments/environment'; 7 | 8 | if (environment.production) { 9 | enableProdMode(); 10 | } 11 | 12 | bootstrapApplication(AppComponent, { 13 | providers: [provideZonelessChangeDetection(),importProvidersFrom(BrowserModule, AppRoutingModule)] 14 | }).catch(err => console.error(err)); 15 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../../out-tsc/lib", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [], 11 | "paths": {} 12 | }, 13 | "angularCompilerOptions": { 14 | "compilationMode": "partial" 15 | }, 16 | "exclude": ["**/*.spec.ts"] 17 | } 18 | -------------------------------------------------------------------------------- /src/app/in-mem-sample/in-mem.model.ts: -------------------------------------------------------------------------------- 1 | import { createId } from './in-mem-utils'; 2 | 3 | type Brand = K & { __brand: T } 4 | 5 | 6 | export type Id = Brand; 7 | 8 | export interface DbRecord { 9 | id: Id; 10 | table: [string, ...string[]] 11 | [key: string]: unknown; 12 | } 13 | 14 | export interface NewDbRecord { 15 | id?: Id; 16 | table: [string, ...string[]] 17 | [key: string]: unknown; 18 | } 19 | 20 | 21 | function demo() { 22 | const person: DbRecord = { 23 | id: createId(), 24 | table: ['users', 'admins', 'employees'], 25 | name: 'Alice', 26 | age: 30, 27 | email: ["alice@example.com"] 28 | }; 29 | } 30 | -------------------------------------------------------------------------------- /src/app/metered-view/stacked-per/stacked-per.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | margin-block-start: 1rem; 4 | 5 | --metered-color-0: #5f7331; 6 | --metered-color-1: #5f4690; 7 | --metered-color-2: #1d6996; 8 | --metered-color-3: #38a6a5; 9 | --metered-color-4: #0f8554; 10 | --metered-color-5: #73af48; 11 | --metered-color-6: #edad08; 12 | --metered-color-7: #e17c05; 13 | --metered-color-8: #cc503e; 14 | --metered-color-9: #94346e; 15 | --metered-color-10: #6f2c91; 16 | 17 | div { 18 | padding: var(--size-2); 19 | writing-mode: vertical-lr; 20 | overflow: hidden; 21 | } 22 | 23 | border: #79c1c9 solid 1px; 24 | } 25 | -------------------------------------------------------------------------------- /presentations/signal-watch-the-effect.excerpt.md: -------------------------------------------------------------------------------- 1 | # Signals, watch the effect. 2 | 3 | **YOU SHOULD AVOID EFFECTS**. which is something you hear a lot. 4 | Yeah, easy said, but _why_? And aside of the why, _how_? 5 | 6 | In your code you need to react to things coming from (input)signals, and you need to react to them. 7 | An effect seems to be 'the way', and is very alluring. 8 | But it is not the way, it is a way, and it is a way that is very hard to get right. 9 | In this talks I will explain why you should avoid effects, and teach you some ideas on how to avoid them. 10 | And I'll show you some code that is not using effects, and is still very readable and maintainable. 11 | -------------------------------------------------------------------------------- /projects/language-routing/src/app/pick-lang/pick-lang.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, inject } from '@angular/core'; 2 | 3 | import { LangService } from '../lang.service'; 4 | 5 | @Component({ 6 | selector: 'se-pick-lang', 7 | imports: [], 8 | template: ` 9 |

Pick a language

10 |
11 | @for (lang of availableLanguages; track lang) { 12 | 13 | } 14 |
15 | `, 16 | styleUrls: ['./pick-lang.component.css'] 17 | }) 18 | export class PickLangComponent { 19 | ls = inject(LangService); 20 | availableLanguages = this.ls.known; 21 | 22 | pick = this.ls.pick; 23 | } 24 | -------------------------------------------------------------------------------- /src/app/grid-calender/grid-calender.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { MonthComponent } from './month/month.component'; 4 | 5 | @Component({ 6 | selector: 'se-grid-calender', 7 | imports: [MonthComponent], 8 | template: `

Grid Calender

9 |
10 | @for (m of months; track m) { 11 | 12 | } 13 |
`, 14 | styleUrls: ['./grid-calender.component.css'] 15 | }) 16 | export class GridCalenderComponent { 17 | date = new Date('2025-05-01'); 18 | months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(month => new Date(this.date.getFullYear(), month, 1)); 19 | } 20 | -------------------------------------------------------------------------------- /src/app/lazy-component/readme.md: -------------------------------------------------------------------------------- 1 | # Lazy loaded component sample 2 | 3 | In this sample I use ESnext modules with a default export to get the **component** which is exported as _default_ 4 | 5 | [this](./sample-one/sample-one.component.ts) is one of the sample components, which actually does nothing, is an SCAM module. 6 | 7 | Then you can [look here](./lazy-component.component.ts) 8 | 9 | By using it in the template like this: 10 | 11 | ```html 12 | 13 | ``` 14 | 15 | This enables you to dynamicly lazy load a component and put it in the view, even without injecting anything into the component holding them. 16 | -------------------------------------------------------------------------------- /src/app/view-model/quote/quote.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core'; 2 | 3 | import type { Quote } from './quote.service'; 4 | 5 | @Component({ 6 | // tslint:disable-next-line:component-selector 7 | selector: 'quote', 8 | templateUrl: './quote.component.html', 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | standalone: true 11 | }) 12 | export class QuoteComponent { 13 | /** use a hostbinding to add a class tot he host element */ 14 | @HostBinding('class.z2') shadow = true; 15 | 16 | /** simple element, only respons to on incoming quote */ 17 | quote = input(); 18 | } 19 | -------------------------------------------------------------------------------- /projects/extreme-lazy-test/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "../../tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "../../out-tsc/app", 7 | "types": [] 8 | }, 9 | "files": ["src/main.ts"], 10 | "include": ["src/**/*.d.ts"], 11 | "angularCompilerOptions": { 12 | "strict": true, 13 | "angularCompilerOptions": false, 14 | "_enabledBlockTypes": ["if", "for", "switch", "defer", "track"] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/app/dialog/dialog.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, signal } from '@angular/core'; 2 | 3 | import { SeDialogComponent } from './dialog/dialog.component'; 4 | 5 | @Component({ 6 | imports: [SeDialogComponent], 7 | template: `

Dialog doesn't need a service

8 | 9 | 10 |

This modal dialog has a groovy backdrop!

11 | 12 | `, 13 | styleUrls: ['./dialog.component.css'] 14 | }) 15 | export default class DialogComponent { 16 | shown = signal(false); 17 | } 18 | -------------------------------------------------------------------------------- /projects/language-routing/readme.md: -------------------------------------------------------------------------------- 1 | # A Sample on how one could do language selection using the router. 2 | 3 | in this sample The router is being used to pick a language out of a known list. 4 | there is the [language service](./src/app/lang.service.ts) that holds a list of known languages, and has a "pick" method to route to the a selected language. Whe it doesn't exists, it routes to an empty root, which will show the [selectLanguage component](./src/app/pick-lang/pick-lang.component.ts) 5 | 6 | this is driven by an extra layer in the routes, as you can see in [app.lang.routes](./src/app/app.lang.routes.ts). This file adds a "top" layer, and imports the normal routes as lazy-loaded children 7 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/lib/VerhiclesRoot.interface.ts: -------------------------------------------------------------------------------- 1 | // Generated by https://quicktype.io 2 | 3 | export interface VerhiclesRoot { 4 | count: number; 5 | next: string; 6 | previous: null; 7 | results: Verhicle[]; 8 | } 9 | 10 | export interface Verhicle { 11 | name: string; 12 | model: string; 13 | manufacturer: string; 14 | cost_in_credits: string; 15 | length: string; 16 | max_atmosphering_speed: string; 17 | crew: string; 18 | passengers: string; 19 | cargo_capacity: string; 20 | consumables: string; 21 | vehicle_class: string; 22 | pilots: string[]; 23 | films: string[]; 24 | created: string; 25 | edited: string; 26 | url: string; 27 | } 28 | -------------------------------------------------------------------------------- /src/app/custom-native-form/custom-native-form.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: var(--size-2); 4 | } 5 | 6 | h1 { 7 | max-inline-size: unset; 8 | } 9 | 10 | input, 11 | label { 12 | margin: 0; 13 | } 14 | 15 | form { 16 | max-inline-size: 25rem; 17 | display: flex; 18 | flex-direction: column; 19 | gap: 1rem; 20 | } 21 | 22 | label { 23 | display: flex; 24 | flex-direction: column; 25 | gap: 0.5rem; 26 | } 27 | 28 | label:has(:user-invalid), 29 | label:has(:invalid):has(:state(interacted)) { 30 | border: 2px solid red; 31 | & > span:after { 32 | display: inline-block; 33 | content: '*'; 34 | color: red; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/app/mqtt/toggle/toggle.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, input, output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'se-toggle', 5 | imports: [], 6 | template: ` 7 | 12 | 13 | `, 14 | styleUrl: './toggle.component.css' 15 | }) 16 | export class ToggleComponent { 17 | toggleOnText = input('Aan') 18 | toggleOffText = input('Uit'); 19 | value = input.required(); 20 | valueChange = output(); 21 | } 22 | -------------------------------------------------------------------------------- /depedencyHash.cjs: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const { createHash } = require('crypto'); 4 | const { appendFileSync } = require('fs'); 5 | const pkg = require('./package.json'); 6 | const { dependencies, devDependencies } = pkg; 7 | 8 | const hash = createHash('sha256'); 9 | /** create a hash that is depending on _what_ depedencies are used, not on version or complete package.json */ 10 | hash.update(JSON.stringify({ dependencies, devDependencies })); 11 | const digest = hash.digest('hex'); 12 | 13 | /** display it */ 14 | console.log(`dependencyHash: ${digest}`); 15 | /** append it to the GITHUB_OUTPUT file */ 16 | appendFileSync(process.env.GITHUB_OUTPUT, `dependencyHash=${digest}\n`); 17 | -------------------------------------------------------------------------------- /src/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#56e66a", 4 | "activityBar.background": "#56e66a", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#8574ea", 8 | "activityBarBadge.foreground": "#15202b", 9 | "sash.hoverBorder": "#56e66a", 10 | "statusBar.background": "#29e043", 11 | "statusBar.foreground": "#15202b", 12 | "statusBarItem.hoverBackground": "#1bbb32", 13 | "statusBarItem.remoteBackground": "#29e043", 14 | "statusBarItem.remoteForeground": "#15202b" 15 | }, 16 | "peacock.color": "#29e043" 17 | } -------------------------------------------------------------------------------- /.github/module-cache/action.yaml: -------------------------------------------------------------------------------- 1 | name: moduleCache 2 | description: setup node modules using pnpm caching 3 | inputs: 4 | node-version: 5 | description: The node version to use for the module. 6 | default: '24.x' 7 | runs: 8 | using: 'composite' 9 | steps: 10 | - name: Install pnpm 11 | uses: pnpm/action-setup@v4 12 | with: 13 | version: 10 14 | - name: Setup node 15 | uses: actions/setup-node@v5 16 | with: 17 | node-version: ${{ matrix.node }} 18 | cache: 'pnpm' 19 | - name: Install dependencies 20 | run: | 21 | pnpm config set auto-install-peers false 22 | pnpm install 23 | shell: bash 24 | 25 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/lib/SpaceShipsRoot.interface.ts: -------------------------------------------------------------------------------- 1 | export interface SpaceShipsRoot { 2 | count: number; 3 | next: string; 4 | previous: null; 5 | results: SpaceShip[]; 6 | } 7 | 8 | export interface SpaceShip { 9 | name: string; 10 | model: string; 11 | manufacturer: string; 12 | cost_in_credits: string; 13 | length: string; 14 | max_atmosphering_speed: string; 15 | crew: string; 16 | passengers: string; 17 | cargo_capacity: string; 18 | consumables: string; 19 | hyperdrive_rating: string; 20 | MGLT: string; 21 | starship_class: string; 22 | pilots: string[]; 23 | films: string[]; 24 | created: string; 25 | edited: string; 26 | url: string; 27 | } 28 | -------------------------------------------------------------------------------- /src/app/dialog/dialog/dialog.component.ts: -------------------------------------------------------------------------------- 1 | import { afterRenderEffect, Component, ElementRef, inject, model } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'se-dialog', 5 | imports: [], 6 | template: ` `, 7 | styleUrls: ['./dialog.component.css'] 8 | }) 9 | export class SeDialogComponent { 10 | readonly shown = model.required(); 11 | elm = inject(ElementRef).nativeElement as HTMLElement; 12 | 13 | _ = afterRenderEffect(() => { 14 | const dlg = this.elm.firstElementChild as HTMLDialogElement; 15 | if (this.shown()) { 16 | dlg.showModal(); 17 | } else { 18 | dlg.close(); 19 | } 20 | }); 21 | } 22 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#a96e1f", 4 | "activityBar.background": "#a96e1f", 5 | "activityBar.foreground": "#e7e7e7", 6 | "activityBar.inactiveForeground": "#e7e7e799", 7 | "activityBarBadge.background": "#0f5135", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "sash.hoverBorder": "#a96e1f", 10 | "statusBar.background": "#7e5217", 11 | "statusBar.foreground": "#e7e7e7", 12 | "statusBarItem.hoverBackground": "#a96e1f", 13 | "statusBarItem.remoteBackground": "#7e5217", 14 | "statusBarItem.remoteForeground": "#e7e7e7" 15 | }, 16 | "peacock.color": "#7e5217" 17 | } 18 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | @import 'open-props/style'; 4 | @import 'open-props/normalize/dark'; 5 | @import 'open-props/buttons/dark'; 6 | 7 | @layer design.system, app.support; 8 | 9 | app-root { 10 | padding: 0 var(--size-2); 11 | } 12 | 13 | button.action { 14 | background-color: var(--surface-3); 15 | color: var(--on-surface-3); 16 | border: 1px solid var(--on-surface-3); 17 | border-radius: var(--radius-1); 18 | padding: var(--size-1) var(--size-2); 19 | font-size: var(--size-1); 20 | font-weight: var(--weight-1); 21 | cursor: pointer; 22 | transition: all 0.2s ease-in-out; 23 | } 24 | -------------------------------------------------------------------------------- /src/app/crud-stuff/utils/deep-diff.ts: -------------------------------------------------------------------------------- 1 | import { flattenRecord } from './flatten-record'; 2 | import { unFlattenRecord } from './un-flattenRecord'; 3 | 4 | export const deepDiff = (a: T, b: T) => { 5 | const aFlat = flattenRecord(a); 6 | const bFlat = flattenRecord(b); 7 | const diff: Record = {}; 8 | for (const key in aFlat) { 9 | if (aFlat[key] !== bFlat[key]) 10 | // note: think about this some more. Perhaps accepting the undefined is better? 11 | diff[key] = bFlat[key] ?? aFlat[key]; 12 | } 13 | for (const key in bFlat) { 14 | if (!(key in aFlat)) { 15 | diff[key] = bFlat[key]; 16 | } 17 | } 18 | return unFlattenRecord(diff); 19 | }; 20 | -------------------------------------------------------------------------------- /src/app/signal-forms-experiment/util/sample-data.model.ts: -------------------------------------------------------------------------------- 1 | export interface SampleData { 2 | id: string; 3 | name: string; 4 | dob: Date; 5 | password: string; 6 | confirm: string; 7 | tags: string[]; 8 | favoriteRandomInt: number; 9 | address: { 10 | street: string; 11 | city: string; 12 | state: string; 13 | zip: string; 14 | }; 15 | contacts: SampleDataContactDetail[]; 16 | } 17 | 18 | export enum SampleDataContactDetailType { 19 | Email = 'E-Mail', 20 | Fax = 'Fax', 21 | Mobile = 'Mobile', 22 | Phone = 'Phone' 23 | } 24 | 25 | export interface SampleDataContactDetail { 26 | type: SampleDataContactDetailType; 27 | info: string; 28 | priority: number; 29 | } 30 | -------------------------------------------------------------------------------- /projects/api-boundries/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#f9cce4", 4 | "activityBar.background": "#f9cce4", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#65ab14", 8 | "activityBarBadge.foreground": "#15202b", 9 | "sash.hoverBorder": "#f9cce4", 10 | "statusBar.background": "#f39fcc", 11 | "statusBar.foreground": "#15202b", 12 | "statusBarItem.hoverBackground": "#ed72b4", 13 | "statusBarItem.remoteBackground": "#f39fcc", 14 | "statusBarItem.remoteForeground": "#15202b" 15 | }, 16 | "peacock.color": "#f39fcc" 17 | } 18 | -------------------------------------------------------------------------------- /projects/wire-it-editor/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.activeBackground": "#42c163", 4 | "activityBar.background": "#42c163", 5 | "activityBar.foreground": "#15202b", 6 | "activityBar.inactiveForeground": "#15202b99", 7 | "activityBarBadge.background": "#7457c8", 8 | "activityBarBadge.foreground": "#e7e7e7", 9 | "sash.hoverBorder": "#42c163", 10 | "statusBar.background": "#339d4f", 11 | "statusBar.foreground": "#e7e7e7", 12 | "statusBarItem.hoverBackground": "#42c163", 13 | "statusBarItem.remoteBackground": "#339d4f", 14 | "statusBarItem.remoteForeground": "#e7e7e7" 15 | }, 16 | "peacock.color": "#339d4f" 17 | } 18 | -------------------------------------------------------------------------------- /quickTsExperiments/sampleThis.ts: -------------------------------------------------------------------------------- 1 | import { map, Subject } from 'rxjs'; 2 | 3 | class Demo { 4 | someProp = 'hello'; 5 | blah1 = new Subject(); 6 | showBound = x => { 7 | console.log('it is me', this.constructor.name, x); 8 | }; 9 | showOther = this.showMe.bind(this); 10 | blah = this.blah1.pipe(map(this.showMe.bind(this))).subscribe(); 11 | 12 | showMe(x) { 13 | console.log('it is me', this.constructor.name, x); 14 | } 15 | 16 | constructor() { 17 | this.blah1.next('hello'); 18 | } 19 | } 20 | class demo1 { 21 | d = new Demo(); 22 | showThat = this.d.showBound.bind(this); 23 | } 24 | 25 | const d = new Demo(); 26 | const sayHi = d.showOther; 27 | 28 | sayHi('hello'); 29 | -------------------------------------------------------------------------------- /src/app/async-computed-sample/async-computed-sample.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'se-async-computed-sample', 5 | standalone: true, 6 | imports: [], 7 | template: `

async-computed-sample works!

`, 8 | styleUrl: './async-computed-sample.component.css' 9 | }) 10 | export class AsyncComputedSampleComponent { 11 | someId = input.required(); 12 | 13 | $data = asyncComputed(async () => { 14 | const id = this.someId(); 15 | const response = await fetch(`/assets/routes.json`); 16 | const data = await response.json(); 17 | const result = data.find(row => row.id === id) ?? {}; 18 | return result; 19 | }); 20 | } 21 | -------------------------------------------------------------------------------- /src/app/metered-view/gauge/gauge.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, computed, input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'se-gauge', 5 | imports: [], 6 | template: ` 7 |
8 |
9 |
{{ (per()*100).toFixed(1) }}%
{{ value() }}
10 | `, 11 | styleUrl: './gauge.component.css', 12 | host: { 13 | '[style.--percentage]': 'per()' 14 | } 15 | }) 16 | export class GaugeComponent { 17 | readonly value = input(15); 18 | readonly maxVal = input(100); 19 | 20 | readonly per = computed(() => { 21 | return Math.floor((this.value() / (this.maxVal() || 1)) * 1000) / 1000; 22 | }); 23 | } 24 | -------------------------------------------------------------------------------- /presentations/assets/icon_angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/slido/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core'; 2 | import { provideRouter, withComponentInputBinding, withRouterConfig } from '@angular/router'; 3 | 4 | import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; 5 | import { routes } from './app.routes'; 6 | 7 | export const appConfig: ApplicationConfig = { 8 | providers: [ 9 | provideRouter( 10 | routes, 11 | withComponentInputBinding(), 12 | withRouterConfig({ 13 | paramsInheritanceStrategy: 'always' 14 | }) 15 | ), 16 | provideZonelessChangeDetection(), 17 | provideClientHydration(withEventReplay()) 18 | ] 19 | }; 20 | -------------------------------------------------------------------------------- /quickTsExperiments/signals/BUILD.bazel: -------------------------------------------------------------------------------- 1 | load("//tools:defaults.bzl", "ts_library", "tsec_test") 2 | 3 | package(default_visibility = [ 4 | "//packages:__pkg__", 5 | "//packages/core:__subpackages__", 6 | "//tools/public_api_guard:__pkg__", 7 | ]) 8 | 9 | ts_library( 10 | name = "signals", 11 | srcs = glob( 12 | [ 13 | "**/*.ts", 14 | ], 15 | ), 16 | deps = [ 17 | "//packages/core/src/util", 18 | ], 19 | ) 20 | 21 | tsec_test( 22 | name = "tsec_test", 23 | target = "signals", 24 | tsconfig = "//packages:tsec_config", 25 | ) 26 | 27 | filegroup( 28 | name = "files_for_docgen", 29 | srcs = glob([ 30 | "*.ts", 31 | ]), 32 | ) 33 | -------------------------------------------------------------------------------- /projects/se-ng/let/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/lib", 5 | "declarationMap": true, 6 | "declaration": true, 7 | "sourceMap": true, 8 | "inlineSources": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": true, 11 | "allowJs": false, 12 | "types": [] 13 | }, 14 | "angularCompilerOptions": { 15 | "skipTemplateCodegen": true, 16 | "strictMetadataEmit": true, 17 | "fullTemplateTypeCheck": true, 18 | "strictInjectionParameters": true, 19 | "enableResourceInlining": true, 20 | "compilationMode": "partial" 21 | }, 22 | "exclude": ["src/test.ts", "**/*.spec.ts"] 23 | } 24 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/src/lib/SpeciesRoot.interface.ts: -------------------------------------------------------------------------------- 1 | // Generated by https://quicktype.io 2 | 3 | export interface SpeciesRoot { 4 | count: number; 5 | next: string; 6 | previous: null; 7 | results: Specie[]; 8 | } 9 | 10 | export interface Specie { 11 | name: string; 12 | classification: string; 13 | designation: Designation; 14 | average_height: string; 15 | skin_colors: string; 16 | hair_colors: string; 17 | eye_colors: string; 18 | average_lifespan: string; 19 | homeworld: string; 20 | language: string; 21 | people: string[]; 22 | films: string[]; 23 | created: string; 24 | edited: string; 25 | url: string; 26 | } 27 | 28 | export enum Designation { 29 | Sentient = 'sentient' 30 | } 31 | -------------------------------------------------------------------------------- /src/app/card/card.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: grid; 3 | gap: 1cm; 4 | grid-template-columns: repeat(3, 1fr); 5 | height: 100vh; 6 | background-color: white; 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | padding: 1cm; 11 | width: 100vw; 12 | } 13 | 14 | section { 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | width: 8cm; 19 | height: 12cm; 20 | border: 1px solid black; 21 | background-color: #e5e5f7; 22 | opacity: 0.8; 23 | color: black; 24 | } 25 | 26 | .green { 27 | background: green; 28 | color: white; 29 | } 30 | 31 | .red { 32 | background: red; 33 | color: white; 34 | } 35 | 36 | section > h2 { 37 | font-size: 132px; 38 | } 39 | -------------------------------------------------------------------------------- /projects/se-ng/swapi/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/lib", 5 | "declarationMap": true, 6 | "declaration": true, 7 | "sourceMap": true, 8 | "inlineSources": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": true, 11 | "allowJs": false, 12 | "types": [] 13 | }, 14 | "angularCompilerOptions": { 15 | "skipTemplateCodegen": true, 16 | "strictMetadataEmit": true, 17 | "fullTemplateTypeCheck": true, 18 | "strictInjectionParameters": true, 19 | "enableResourceInlining": true, 20 | "compilationMode": "partial" 21 | }, 22 | "exclude": ["src/test.ts", "**/*.spec.ts"] 23 | } 24 | -------------------------------------------------------------------------------- /projects/se-ng/observable-hooks/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/lib", 5 | "declarationMap": true, 6 | "declaration": true, 7 | "sourceMap": true, 8 | "inlineSources": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": true, 11 | "allowJs": false, 12 | "types": [] 13 | }, 14 | "angularCompilerOptions": { 15 | "skipTemplateCodegen": true, 16 | "strictMetadataEmit": true, 17 | "fullTemplateTypeCheck": true, 18 | "strictInjectionParameters": true, 19 | "enableResourceInlining": true, 20 | "compilationMode": "partial" 21 | }, 22 | "exclude": ["src/test.ts", "**/*.spec.ts"] 23 | } 24 | -------------------------------------------------------------------------------- /projects/se-ng/observable-utils/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../../out-tsc/lib", 5 | "declarationMap": true, 6 | "declaration": true, 7 | "sourceMap": true, 8 | "inlineSources": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": true, 11 | "allowJs": false, 12 | "types": [] 13 | }, 14 | "angularCompilerOptions": { 15 | "skipTemplateCodegen": true, 16 | "strictMetadataEmit": true, 17 | "fullTemplateTypeCheck": true, 18 | "strictInjectionParameters": true, 19 | "enableResourceInlining": true, 20 | "compilationMode": "partial" 21 | }, 22 | "exclude": ["src/test.ts", "**/*.spec.ts"] 23 | } 24 | -------------------------------------------------------------------------------- /src/app/routed-popup/back-drop/back-drop.component.html: -------------------------------------------------------------------------------- 1 | 26 |
27 |

popup

28 | 29 |
30 | -------------------------------------------------------------------------------- /src/app/view-model/painting/painting.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, computed, HostBinding, inject, input } from '@angular/core'; 2 | import { DomSanitizer } from '@angular/platform-browser'; 3 | 4 | @Component({ 5 | // tslint:disable-next-line:component-selector 6 | selector: 'painting', 7 | templateUrl: './painting.component.html', 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: true 10 | }) 11 | export class PaintingComponent { 12 | #san = inject(DomSanitizer); 13 | /** Add an class to the host */ 14 | @HostBinding('class.z2') shadow = true; 15 | 16 | art = input(); 17 | 18 | url = computed(() => this.#san.bypassSecurityTrustStyle(this.art() ?? '')); 19 | } 20 | -------------------------------------------------------------------------------- /src/form-engine/form-entry.ts: -------------------------------------------------------------------------------- 1 | import type { Signal } from '@angular/core'; 2 | 3 | interface BaseEntry { 4 | type: string; 5 | label?: string; 6 | name?: string; 7 | description?: string; 8 | id: string; 9 | value?: T; 10 | required?: boolean; 11 | disabled?: boolean; 12 | readonly?: boolean; 13 | options?: Array<{ label: string; value: T }>; 14 | placeholder?: string; 15 | errors?: string[]; 16 | helpText?: string; 17 | htmlValidations: { 18 | required?: boolean; 19 | pattern?: string; 20 | minLength?: number; 21 | maxLength?: number; 22 | min?: number; 23 | max?: number; 24 | step?: number; 25 | } 26 | } 27 | 28 | export type FormEntry = Signal> 29 | -------------------------------------------------------------------------------- /test-injector.mjs: -------------------------------------------------------------------------------- 1 | import {simpleInject, provide, dumpTree} from './dist/simple-injector/fesm2022/simple-injector.mjs' 2 | 3 | class Test { 4 | constructor() { 5 | console.log('Test') 6 | } 7 | prop = 'testprop' 8 | } 9 | 10 | class Test2 { 11 | prop2 = simpleInject(Test).prop 12 | constructor() { 13 | console.log('Test2') 14 | } 15 | prop = 'test2' 16 | } 17 | 18 | class ServiceTest { 19 | provider = provide(Test) 20 | test = simpleInject(Test2, this.provider) 21 | constructor() { 22 | console.log('ServiceTest', this.test.prop2) 23 | } 24 | 25 | [Symbol.dispose]() { 26 | console.log('dispose ServiceTest') 27 | } 28 | } 29 | 30 | const service = new ServiceTest() 31 | 32 | 33 | dumpTree() 34 | 35 | -------------------------------------------------------------------------------- /src/app/svg-test/svg-test.component.ts: -------------------------------------------------------------------------------- 1 | import { DecimalPipe } from '@angular/common'; 2 | import { Component } from '@angular/core'; 3 | 4 | import { BlocksComponent } from './blocks/blocks.component'; 5 | 6 | @Component({ 7 | selector: 'app-svg-test', 8 | templateUrl: './svg-test.component.html', 9 | styles: [], 10 | imports: [BlocksComponent, DecimalPipe] 11 | }) 12 | export class SvgTestComponent { 13 | /** simple counter, for no good reason ;) */ 14 | count = 0; 15 | cellCount = 0; 16 | 17 | /** up the counter */ 18 | reColor() { 19 | this.count += 1; 20 | } 21 | 22 | /** log out to console when a block is clicked. */ 23 | bit(n: number) { 24 | console.log(`rectangle number ${n} is clicked`); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /projects/api-boundries/src/app/relation-list/relation-list.component.ts: -------------------------------------------------------------------------------- 1 | import { AsyncPipe } from '@angular/common'; 2 | import { Component, inject } from '@angular/core'; 3 | import { RelationsService } from '../relations.service'; 4 | import { RelationComponent } from './relation/relation.component'; 5 | 6 | @Component({ 7 | selector: 'app-relation-list', 8 | template: ` 9 | @for (rel of relations$ | async; track rel) { 10 | 11 | } 12 | `, 13 | styles: [], 14 | imports: [RelationComponent, AsyncPipe] 15 | }) 16 | export class RelationListComponent { 17 | rel = inject(RelationsService); 18 | relations$ = this.rel.relationList$ 19 | .pipe 20 | // tap(list => console.table(list)) 21 | (); 22 | } 23 | -------------------------------------------------------------------------------- /projects/api-boundries/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /quickTsExperiments/signals/src/untrack.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright Google LLC All Rights Reserved. 4 | * 5 | * Use of this source code is governed by an MIT-style license that can be 6 | * found in the LICENSE file at https://angular.io/license 7 | */ 8 | 9 | import { setActiveConsumer } from './internal.js'; 10 | 11 | /** 12 | * Execute an arbitrary function in a non-reactive (non-tracking) context. The executed function 13 | * can, optionally, return a value. 14 | * 15 | * @developerPreview 16 | */ 17 | export function untrack(nonReactiveReadsFn: () => T): T { 18 | const prevConsumer = setActiveConsumer(null); 19 | try { 20 | return nonReactiveReadsFn(); 21 | } finally { 22 | setActiveConsumer(prevConsumer); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/slipnslide/src/app/view-slide/vied-slide.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: grid; 3 | color: #fafafa; 4 | background-color: #050505; 5 | padding: 2rem; 6 | margin: 0; 7 | width: 100vw; 8 | height: 100vh; 9 | justify-items: center; 10 | font-size: +2rem; 11 | grid-auto-rows: minmax(min-content, max-content); 12 | } 13 | 14 | table { 15 | border-collapse: separate; 16 | border-spacing: 6px; 17 | background-color: white; 18 | } 19 | 20 | table tr:nth-child(odd) { 21 | background-color: black; 22 | } 23 | 24 | table tr:nth-child(even), 25 | table th { 26 | background-color: #afafaf; 27 | color: black; 28 | padding: 15px; 29 | } 30 | 31 | table td, 32 | table th { 33 | /* background-color: #a0a0aa; */ 34 | padding: 15px; 35 | } 36 | -------------------------------------------------------------------------------- /projects/slipnslide/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /projects/wire-it-editor/src/app/scripts/script/script.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core'; 2 | 3 | import { PackageJsonService } from '../../package.json.service'; 4 | 5 | @Component({ 6 | selector: 'app-script', 7 | imports: [], 8 | template: ` `, 9 | styles: [ 10 | ` 11 | :host { 12 | display: button; 13 | border: 1px solid black; 14 | width: max(auto, 4rem); 15 | } 16 | ` 17 | ], 18 | changeDetection: ChangeDetectionStrategy.OnPush 19 | }) 20 | export class ScriptComponent { 21 | pjs = inject(PackageJsonService); 22 | @Input() script: [string, string] = ['', '']; 23 | } 24 | -------------------------------------------------------------------------------- /scripts/util/parse-cmd-line.mjs: -------------------------------------------------------------------------------- 1 | import { exit } from 'node:process'; 2 | import { readBases } from './bases.mjs'; 3 | 4 | const [nodePath, scriptName, rawAction, projectName] = process.argv; 5 | 6 | const bases = await readBases(); 7 | const project = bases[projectName]; 8 | if (projectName && !project) { 9 | console.log(`❌ Project not found! 10 | Available projects: 11 | ${Object.keys(bases).join('\n ')}`); 12 | 13 | exit(1); 14 | } 15 | 16 | if (!rawAction) { 17 | console.log('⚠️ No action specified, using `patch`'); 18 | } 19 | const action = rawAction?.toLowerCase() || 'patch'; 20 | 21 | if (!['info', 'minor', 'patch'].includes(action)) { 22 | console.log('❌ invalid action specified'); 23 | exit(1); 24 | } 25 | 26 | export { project, action }; 27 | -------------------------------------------------------------------------------- /src/app/html-load/bogus-load.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { of } from 'rxjs'; 3 | import { delay } from 'rxjs/operators'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class BogusLoadService { 9 | constructor() {} 10 | 11 | /** 12 | * Normally you use some async loaded, 13 | * here I just mimic that by returning an 14 | * delayed observable 15 | */ 16 | load(url: string) { 17 | const html = ` 18 |

loaded from ${url}

19 |
20 | 24 | 25 | `; 26 | 27 | return of(html).pipe(delay(1000)); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.couchdb/config/docker.ini: -------------------------------------------------------------------------------- 1 | 2 | [admins] 3 | admin = -pbkdf2:sha256-c52b5b1c4ca4ea478cacfcaf13dba580a4b0f4e1cf5ba02659282040ffa51c11,06c6910ecbdb1fd8ae36d26be2ac7f8a,600000 4 | 5 | [couchdb] 6 | uuid = 95b461d666eb5315537180ec112e18c6 7 | 8 | [chttpd_auth] 9 | secret = d2463fd5c1b2855381ff79696baa7094 10 | 11 | [chttpd] 12 | bind_address = 0.0.0.0 13 | port = 5984 14 | enable_cors = true 15 | 16 | [cluster] 17 | n = 1 18 | 19 | [httpd] 20 | enable_cors = true 21 | 22 | [cors] 23 | origins = localhost:4204, http://localhost:4204,http://localhost:4204/,http://127.0.0.1:5984/, https://samples.selias.dev, samples.selias.dev,https://ng.localhost 24 | methods = GET, PUT, POST, HEAD, DELETE 25 | headers = accept, authorization, content-type, origin, referer 26 | credentials = true 27 | -------------------------------------------------------------------------------- /quickTsExperiments/objProxy.ts: -------------------------------------------------------------------------------- 1 | const sample = { a: { b: { c: [{ a: 1, name: 'sander' }] } } }; 2 | 3 | const objProxy = new Proxy(sample, { 4 | get(target, prop, receiver) { 5 | console.log('get', prop); 6 | if (prop in target) { 7 | return Reflect.get(target, prop, receiver); 8 | } 9 | 10 | const path = (prop as string) 11 | .split(/\./g) 12 | .flatMap(p => p.split(/\[|\]/g)) 13 | .filter(p => p); 14 | let value = target; 15 | for (const key of path) { 16 | console.log('key', key); 17 | if (key in value) { 18 | value = value[key]; 19 | } else { 20 | return undefined; 21 | } 22 | } 23 | 24 | return value; 25 | } 26 | }); 27 | 28 | console.log(objProxy['a.b.c[0].name']); // sander 29 | -------------------------------------------------------------------------------- /projects/se-ng/signal-utils/src/lib/util/is-object.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/naming-convention */ 2 | import { isDate } from './is-date'; 3 | 4 | /** 5 | * Check if an value is an Object, and not a primitive, null, array or date 6 | * @param x any 7 | * @returns boolean 8 | */ 9 | export const isObject = (x: T): x is { [K in keyof T]: T[K] } => { 10 | if (typeof x !== 'object') { 11 | // rules out all primitives,symbols, and functions 12 | return false; 13 | } 14 | if (x === null) { 15 | return false; 16 | } 17 | if (Array.isArray(x)) { 18 | return false; 19 | } 20 | if (isDate(x)) { 21 | // a date is an object, but for most purposes, it should be threated as a primitive 22 | return false; 23 | } 24 | 25 | return true; 26 | }; 27 | -------------------------------------------------------------------------------- /projects/simple-injector/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import tseslint from "typescript-eslint"; 3 | import rootConfig from "../../eslint.config.mjs"; 4 | 5 | export default tseslint.config( 6 | ...rootConfig, 7 | { 8 | files: ["**/*.ts"], 9 | rules: { 10 | "@angular-eslint/directive-selector": [ 11 | "error", 12 | { 13 | type: "attribute", 14 | prefix: "lib", 15 | style: "camelCase", 16 | }, 17 | ], 18 | "@angular-eslint/component-selector": [ 19 | "warn", 20 | { 21 | type: "element", 22 | prefix: "lib", 23 | style: "kebab-case", 24 | }, 25 | ], 26 | }, 27 | }, 28 | { 29 | files: ["**/*.html"], 30 | rules: {}, 31 | } 32 | ); 33 | -------------------------------------------------------------------------------- /projects/se-ng/headless-ui/eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import tseslint from "typescript-eslint"; 3 | import rootConfig from "../../../eslint.config.mjs"; 4 | 5 | export default tseslint.config( 6 | ...rootConfig, 7 | { 8 | files: ["**/*.ts"], 9 | rules: { 10 | "@angular-eslint/directive-selector": [ 11 | "error", 12 | { 13 | type: "attribute", 14 | prefix: "lib", 15 | style: "camelCase", 16 | }, 17 | ], 18 | "@angular-eslint/component-selector": [ 19 | "warn", 20 | { 21 | type: "element", 22 | prefix: "lib", 23 | style: "kebab-case", 24 | }, 25 | ], 26 | }, 27 | }, 28 | { 29 | files: ["**/*.html"], 30 | rules: {}, 31 | } 32 | ); 33 | -------------------------------------------------------------------------------- /src/app/observable-state/observable-sate/observable-state.component.html: -------------------------------------------------------------------------------- 1 |

Observable state

2 | 3 | 19 | 20 | 30 | -------------------------------------------------------------------------------- /projects/slipnslide/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('slipnslide app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain( 20 | jasmine.objectContaining({ 21 | level: logging.Level.SEVERE 22 | } as logging.Entry) 23 | ); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/directives/directives-sample/directives-sample.component.ts: -------------------------------------------------------------------------------- 1 | import { AsyncPipe } from '@angular/common'; 2 | import type { QueryList} from '@angular/core'; 3 | import { Component, ViewChildren } from '@angular/core'; 4 | import { seAfterContentInit } from '@se-ng/observable-hooks'; 5 | import { map } from 'rxjs/operators'; 6 | 7 | import { IdDirective } from '../id.directive'; 8 | 9 | @Component({ 10 | selector: 'app-directives-sample', 11 | templateUrl: './directives-sample.component.html', 12 | styles: [], 13 | imports: [IdDirective, AsyncPipe] 14 | }) 15 | export class DirectivesSampleComponent extends seAfterContentInit() { 16 | @ViewChildren(IdDirective) ids!: QueryList; 17 | 18 | ids$ = this.seAfterContentInit$.pipe(map(() => this.ids.map(idD => idD.id))); 19 | } 20 | -------------------------------------------------------------------------------- /src/main.server.ts: -------------------------------------------------------------------------------- 1 | import type { BootstrapContext } from '@angular/platform-browser'; 2 | import { bootstrapApplication } from '@angular/platform-browser'; 3 | import { provideServerRendering, withRoutes } from '@angular/ssr'; 4 | 5 | import { AppComponent } from './app/app.component'; 6 | import { config } from './app/app.config.server'; 7 | import { serverRoutes } from './app/server.routes'; 8 | import { withComponentInputBinding } from '@angular/router'; 9 | 10 | globalThis.serverSide = true; 11 | 12 | const bootstrap = (context: BootstrapContext) => 13 | bootstrapApplication( 14 | AppComponent, 15 | { 16 | ...config, 17 | providers: [...config.providers, provideServerRendering(withRoutes(serverRoutes), )] 18 | }, 19 | context 20 | ); 21 | 22 | export default bootstrap; 23 | -------------------------------------------------------------------------------- /src/app/rvt/sampledata.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { BehaviorSubject, map } from 'rxjs'; 3 | 4 | export interface Model { 5 | name: string; 6 | favNumber: number; 7 | dob: Date; 8 | email: string; 9 | admin: boolean; 10 | level: 1 | 2 | 3 | 4 | 5; 11 | } 12 | 13 | @Injectable({ 14 | providedIn: 'root' 15 | }) 16 | export class SampledataService { 17 | #data$ = new BehaviorSubject({ 18 | name: 'Sander', 19 | favNumber: 30, 20 | dob: new Date('1990-01-01'), 21 | email: 'sander@noyb.eu', 22 | admin: true, 23 | level: 4 24 | }); 25 | 26 | /** get a fresh clone on each use */ 27 | data$ = this.#data$.pipe(map(data => structuredClone(data))); 28 | 29 | save(data: Model) { 30 | this.#data$.next(data); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /projects/slido/src/app/overview/overview.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | padding: var(--size-2); 4 | } 5 | 6 | td { 7 | max-inline-size: none; 8 | height: auto; 9 | } 10 | 11 | td:nth-child(2) { 12 | overflow: hidden; 13 | container-type: inline-size; 14 | container-name: table-cell-holder; 15 | 16 | & > main { 17 | aspect-ratio: 16 / 9; 18 | width: 1024px; 19 | overflow: hidden; 20 | } 21 | } 22 | 23 | .buttonGroup { 24 | display: flex; 25 | gap: var(--size-2); 26 | padding: var(--size-2); 27 | } 28 | 29 | .actionGroup { 30 | display: flex; 31 | gap: var(--size-2); 32 | padding: var(--size-2); 33 | 34 | button { 35 | width: 2rem; 36 | aspect-ratio: 1; 37 | border-radius: 50%; 38 | } 39 | } 40 | 41 | td { 42 | overflow: hidden; 43 | } 44 | -------------------------------------------------------------------------------- /quickTsExperiments/metered.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * this ws something going on twitter, need to get it out of my system. 3 | */ 4 | 5 | const results = [ 6 | `⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️`, 7 | `🔵⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️`, 8 | `🔵🔵⚪️⚪️⚪️⚪️⚪️⚪️⚪️⚪️`, 9 | `🔵🔵🔵⚪️⚪️⚪️⚪️⚪️⚪️⚪️`, 10 | `🔵🔵🔵🔵⚪️⚪️⚪️⚪️⚪️⚪️`, 11 | `🔵🔵🔵🔵🔵⚪️⚪️⚪️⚪️⚪️`, 12 | `🔵🔵🔵🔵🔵🔵⚪️⚪️⚪️⚪️`, 13 | `🔵🔵🔵🔵🔵🔵🔵⚪️⚪️⚪️`, 14 | `🔵🔵🔵🔵🔵🔵🔵🔵⚪️⚪️`, 15 | `🔵🔵🔵🔵🔵🔵🔵🔵🔵⚪️`, 16 | `🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵` 17 | ]; 18 | 19 | const metered = (percentage: number) => { 20 | const index = Math.min(10, Math.max(0, Math.floor(percentage * 10))); 21 | return results[index]; 22 | }; 23 | 24 | console.log(metered(0.1)); 25 | 26 | console.log(metered(0.5)); 27 | 28 | console.log(metered(0.95)); 29 | 30 | console.log(metered(1)); 31 | 32 | console.log(metered(-3)); 33 | -------------------------------------------------------------------------------- /presentations/assets/icon_angular_wht.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /scripts/util/hash-folder.mjs: -------------------------------------------------------------------------------- 1 | import { createHash } from 'crypto'; 2 | import { readdir,readFile, stat } from 'fs/promises'; 3 | 4 | export const hashFolder = async folder => { 5 | try { 6 | const files = await readdir(folder); 7 | const hashes = await Promise.all( 8 | files.map(async file => { 9 | const filePath = `${folder}/${file}`; 10 | const stats = await stat(filePath); 11 | if (stats.isDirectory()) { 12 | return hashFolder(filePath); 13 | } else { 14 | const content = await readFile(filePath); 15 | return createHash('sha256').update(content).digest('hex'); 16 | } 17 | }) 18 | ); 19 | return createHash('sha256').update(hashes.join('')).digest('hex'); 20 | } catch (error) { 21 | console.log('`❌ error hashing the folder', error); 22 | } 23 | return ''; 24 | }; 25 | -------------------------------------------------------------------------------- /src/app/rvt/reactive/reactive.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | form { 6 | border: 2px solid #d7b52b; 7 | padding: 1.5rem; 8 | border-radius: 1rem; 9 | accent-color: #2bd75d; 10 | width: 30rem; 11 | display: flex; 12 | flex-direction: column; 13 | gap: 0.5rem; 14 | margin: auto; 15 | } 16 | label { 17 | display: flex; 18 | flex-direction: column; 19 | gap: 5px; 20 | } 21 | label > *:nth-child(2) { 22 | margin-left: 0.25rem; 23 | } 24 | 25 | .ng-invalid.ng-dirty:not(form) { 26 | background-color: rgb(143, 70, 70); 27 | } 28 | 29 | button[type='submit'] { 30 | background-color: #2bd75d; 31 | color: white; 32 | border: none; 33 | border-radius: 5px; 34 | padding: 0.5rem; 35 | } 36 | 37 | button:disabled { 38 | background-color: #d7b52b; 39 | cursor: not-allowed; 40 | } 41 | -------------------------------------------------------------------------------- /src/app/rvt/template/template.component.css: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | 5 | form { 6 | border: 2px solid #2bd75d; 7 | padding: 1.5rem; 8 | border-radius: 1rem; 9 | accent-color: #2bd75d; 10 | width: 30rem; 11 | display: flex; 12 | flex-direction: column; 13 | gap: 0.5rem; 14 | margin: auto; 15 | } 16 | label { 17 | display: flex; 18 | flex-direction: column; 19 | gap: 5px; 20 | } 21 | label > *:nth-child(2) { 22 | margin-left: 0.25rem; 23 | } 24 | 25 | .ng-invalid.ng-dirty:not(form) { 26 | background-color: rgb(143, 70, 70); 27 | } 28 | 29 | button[type='submit'] { 30 | background-color: #2bd75d; 31 | color: white; 32 | border: none; 33 | border-radius: 5px; 34 | padding: 0.5rem; 35 | } 36 | 37 | button:disabled { 38 | background-color: #d7b52b; 39 | cursor: not-allowed; 40 | } 41 | -------------------------------------------------------------------------------- /src/app/rijks/artists/artists.component.ts: -------------------------------------------------------------------------------- 1 | import type { OnInit } from '@angular/core'; 2 | import { Component, inject } from '@angular/core'; 3 | import { FormControl } from '@angular/forms'; 4 | import { debounceTime, distinctUntilChanged, switchMap, take } from 'rxjs/operators'; 5 | 6 | import { RakiService } from '../raki.service'; 7 | 8 | @Component({ 9 | selector: 'app-artists', 10 | templateUrl: './artists.component.html', 11 | styleUrls: ['./artists.component.css'] 12 | }) 13 | export class ArtistsComponent implements OnInit { 14 | raki = inject(RakiService); 15 | 16 | search = new FormControl(); 17 | 18 | list$ = this.search.valueChanges.pipe( 19 | debounceTime(500), 20 | distinctUntilChanged(), 21 | switchMap(artist => this.raki.artist(artist)), 22 | take(5) 23 | ); 24 | 25 | ngOnInit() {} 26 | } 27 | --------------------------------------------------------------------------------