input component

components.my-component\.js

import Component from '@glimmer/component';

export default class extends Component {
}

components.shared-input-field\.js

import Component from '@glimmer/component';

export default class extends Component {
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
  @tracked controllerVariable = "bazinga";
}

routes.application\.js

import Route from '@ember/routing/route';
import { tracked } from "@glimmer/tracking";
import { Changeset } from 'ember-changeset';

export default class ApplicationRoute extends Route { 
  model(params) {
    const myChangeset = new Changeset({foo: "bar"});
    const myResponse = {foo: "baz"}

    return { myChangeset, myResponse }
  }
};

templates.application\.hbs

parent raw hash: {{this.model.myResponse.foo}}
<br />
parent changeset: {{this.model.myChangeset.foo}}
<br />
parent controller var: {{this.controllerVariable}}
<br />
<br />
<MyComponent @changeset={{this.model.myChangeset}} @response={{this.model.myResponse}} @controllerVar={{this.controllerVariable}}/>

templates.components.my-component\.hbs

component raw hash: {{@response.foo}}
<br />
component changeset: {{@changeset.foo}}
<br />
component controller var: {{@controllerVar}}
<br />

"Input" ember component with changeset:
<Input @value={{@changeset.foo}} />
<br />
"Input" ember component with raw response:
<Input @value={{@response.foo}} />
<br />
"Input" ember component with controller var:
<Input @value={{@controllerVar}} />
<br />
<br />
"input" html element with changeset:
<input value={{@changeset.foo}} />
<br />
"input" html element with raw response:
<input value={{@changeset.foo}} />
<br />
"input" html element with controller var:
<input value={{@controllerVar}} />

<br /><br />
shared input component:
<SharedInputField @changesetFoo={{@changeset.foo}} @responseFoo={{@response.foo}} />

templates.components.shared-input-field\.hbs

<br />
<br />
<b> shared form </b>
<br />
shared component raw hash: {{@responseFoo}}
<br />
shared changeset: {{@changesetFoo}}
<br />

"Input" ember component with changeset:
<Input @value={{@changesetFoo}} />
<br />
"Input" ember component with raw response:
<Input @value={{@responseFoo}} />
<br />
<br />
"input" html element with changeset:
<input value={{@changesetFoo}} />
<br />
"input" html element with raw response:
<input value={{@changesetFoo}} />

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-changeset": "3.0.0"
  }
}