yjaaidi/ngx-light.html

## ngx-light.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>👨🏻‍🍳🅰️ Ngx Light by Younes @ Marmicode.io</title>
    <meta name="description" content="👨🏻‍🍳🅰️ Ngx Light" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script type="importmap">
      {
        "imports": {
          "@angular/common": "https://unpkg.com/@angular/common@14.0.1/fesm2020/common.mjs",
          "@angular/compiler": "https://unpkg.com/@angular/compiler@14.0.1/fesm2020/compiler.mjs",
          "@angular/core": "https://unpkg.com/@angular/core@14.0.1/fesm2020/core.mjs",
          "@angular/platform-browser": "https://unpkg.com/@angular/platform-browser@14.0.1/fesm2020/platform-browser.mjs",
          "rxjs": "https://unpkg.com/@esm-bundle/rxjs@7.5.5/esm/es2015/rxjs.min.js",
          "rxjs/operators": "https://unpkg.com/@esm-bundle/rxjs@7.5.5/esm/es2015/rxjs-operators.min.js",
          "zone.js": "https://unpkg.com/zone.js@0.11.5/fesm2015/zone.min.js"
        }
      }
    </script>
  </head>
  <body>
    <mc-app></mc-app>
    <script type="module">
      import 'zone.js';
      import '@angular/compiler';
    </script>
    <script type="module">
      import { inject } from '@angular/core';
      import { CommonModule } from '@angular/common';
      import { bootstrapApplication } from '@angular/platform-browser';
      import { timer, map } from 'rxjs';
      import { Component, Injectable } from '@angular/core';

      // @todo switch to decorators the days ES decorators land
      // https://github.com/tc39/proposal-decorators

      export function defineComponent(componentDef) {
        const { component = class {}, ...rest } = componentDef;
        return Component({
          standalone: true,
          ...rest,
        })(component);
      }

      export function defineInjectable(injectable, options) {
        return Injectable(options)(injectable);
      }
      const NowService = defineInjectable(
        class {
          now$ = timer(0, 100).pipe(map(() => new Date()));
        },
        { providedIn: 'root' }
      );

      const Counter = defineComponent({
        selector: 'mc-counter',
        template: `
    <div>{{count}}</div>
    <button [disabled]="count === 0" (click)="count = count - 1">-</button>
    <button (click)="count = count + 1">+</button>
  `,
        component: class {
          count = 0;
        },
      });

      const Demo = defineComponent({
        selector: 'mc-demo',
        imports: [CommonModule],
        template: `
    <img [src]="pictureUrl">
    <div>{{ now$ | async | date:'HH:mm:ss' }}</div>
  `,
        component: class {
          pictureUrl =
            'https://marmicode.io/f3683922cdecc8b0642e4ab8f8f1d35e.gif';
          now$ = inject(NowService).now$;
        },
      });

      const App = defineComponent({
        selector: 'mc-app',
        imports: [Counter, Demo],
        template: `
        <mc-demo></mc-demo>
        <mc-counter></mc-counter>
        <a href="https://twitter.com/yjaaidi" target="_blank">🐦 @yjaaidi</a>
        `,
        styles: [
          `:host {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
          }`,
        ],
      });

      bootstrapApplication(App);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>👨🏻‍🍳🅰️ Ngx Light by Younes @ Marmicode.io</title>
	<meta name="description" content="👨🏻‍🍳🅰️ Ngx Light" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<script type="importmap">
	{
	"imports": {
	"@angular/common": "https://unpkg.com/@angular/common@14.0.1/fesm2020/common.mjs",
	"@angular/compiler": "https://unpkg.com/@angular/compiler@14.0.1/fesm2020/compiler.mjs",
	"@angular/core": "https://unpkg.com/@angular/core@14.0.1/fesm2020/core.mjs",
	"@angular/platform-browser": "https://unpkg.com/@angular/platform-browser@14.0.1/fesm2020/platform-browser.mjs",
	"rxjs": "https://unpkg.com/@esm-bundle/rxjs@7.5.5/esm/es2015/rxjs.min.js",
	"rxjs/operators": "https://unpkg.com/@esm-bundle/rxjs@7.5.5/esm/es2015/rxjs-operators.min.js",
	"zone.js": "https://unpkg.com/zone.js@0.11.5/fesm2015/zone.min.js"
	}
	}
	</script>
	</head>
	<body>
	<mc-app></mc-app>
	<script type="module">
	import 'zone.js';
	import '@angular/compiler';
	</script>
	<script type="module">
	import { inject } from '@angular/core';
	import { CommonModule } from '@angular/common';
	import { bootstrapApplication } from '@angular/platform-browser';
	import { timer, map } from 'rxjs';
	import { Component, Injectable } from '@angular/core';

	// @todo switch to decorators the days ES decorators land
	// https://github.com/tc39/proposal-decorators

	export function defineComponent(componentDef) {
	const { component = class {}, ...rest } = componentDef;
	return Component({
	standalone: true,
	...rest,
	})(component);
	}

	export function defineInjectable(injectable, options) {
	return Injectable(options)(injectable);
	}
	const NowService = defineInjectable(
	class {
	now$ = timer(0, 100).pipe(map(() => new Date()));
	},
	{ providedIn: 'root' }
	);

	const Counter = defineComponent({
	selector: 'mc-counter',
	template: `
	<div>{{count}}</div>
	<button [disabled]="count === 0" (click)="count = count - 1">-</button>
	<button (click)="count = count + 1">+</button>
	`,
	component: class {
	count = 0;
	},
	});

	const Demo = defineComponent({
	selector: 'mc-demo',
	imports: [CommonModule],
	template: `
	<img [src]="pictureUrl">
	<div>{{ now$ \| async \| date:'HH:mm:ss' }}</div>
	`,
	component: class {
	pictureUrl =
	'https://marmicode.io/f3683922cdecc8b0642e4ab8f8f1d35e.gif';
	now$ = inject(NowService).now$;
	},
	});

	const App = defineComponent({
	selector: 'mc-app',
	imports: [Counter, Demo],
	template: `
	<mc-demo></mc-demo>
	<mc-counter></mc-counter>
	<a href="https://twitter.com/yjaaidi" target="_blank">🐦 @yjaaidi</a>
	`,
	styles: [
	`:host {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	}`,
	],
	});

	bootstrapApplication(App);
	</script>
	</body>
	</html>