My Ideal Angular Component Syntax

test.component.ts

import { Component, State, Computed, html, css } from '@angular/core'
import FooDirective from './foo.directive.ts'
import FooComponent from './foo.component.ts'

// The `selector` is derived from the class's name and a globally configured selector prefix
// In this case, the selector for this class would be `app-test`, using the default prefix
export class TestComponent implements Component {
  @State() foo = ""

  @Computed() get bar(): number {
    return this.foo.length
  }
  
  // `style?` is a requirement of the `Component` interface
  public get style() {
    return css`
      #foo {
        background-color: red;
      }
      
      #bar {
        color: blue;
      }
    `
  }

  // `template` is a requirement of the `Component` interface
  public get template() {
    return html`
      <!-- Interpolate components, directives, and class members directly in the template string, using ES syntax -->
      <${FooComponent}.text-right#foo ${new FooDirective({ foo: this.foo })} />
      <!-- Template syntax allowing class/id literals -->
      <div.text-center#bar>${this.bar}</div>
    `
  }
}