Args example

components.args-component\.js

import Component from '@glimmer/component';

export default class extends Component {
  
  get aValueInfo() {
    return `The value value is ${this.args.aValue}`;
  }
  
  get anObjectInfo() {
    return this.args.anEngineer.handle;
  }

  get anArrayInfo() {
  	return this.args.anArray.length;
  }

  get anArrayOfObjectInfo() {
    return `The second object name is ${this.args.anArrayOfEngineers[1].handle}`;
  }
}

controllers.application\.js

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

class Engineer {
  @tracked handle;

  constructor(handle) {
    this.handle = handle;
  }
}

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

	@tracked aValue = 1;
	@tracked anEngineer = new Engineer("a");
  @tracked anArray = [1,2,3]
  @tracked anArrayOfEngineers = [new Engineer("esbanarango"), new Engineer("kamal")];

  @action
  updateValue() {
    this.aValue += 1;
  }

  @action
  updateEngineer() {
    this.anEngineer.handle = String.fromCharCode(this.anEngineer.handle.charCodeAt() + 1);
    console.log("Object updated:", this.anEngineer.handle);
  }

  @action
  updateArray() {
    this.anArray.push(this.anArray.slice(-1) + 1);
    console.log("Array updated:", this.anArray.length);
  }

  @action
	updateArrayOfEngineers() {
    const sample = ["warmwaffles", "lordbyron", "petestreet", "diegoeche", "lg", "aasimsayani"];
	  this.anArrayOfEngineers[1].handle = sample[Math.floor(Math.random() * sample.length)];
    console.log("Array of objects updated:", this.anArrayOfEngineers[1].handle);
  }
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<button type="button" {{on "click" this.updateValue}}>Update value</button> {{this.aValue}}
<br>
<button type="button" {{on "click" this.updateEngineer}}>Update engineer</button> {{this.anEngineer.handle}}
<br>
<button type="button" {{on "click" this.updateArray}}>Update array</button> {{this.anArray.length}}
<br>
<button type="button" {{on "click" this.updateArrayOfEngineers}}>Update second engineer of array of objects</button> {{get (get this.anArrayOfEngineers 1) "handle"}}
<br>
<br>
<hr>
<ArgsComponent 
	@aValue={{this.aValue}}
	@anEngineer={{this.anEngineer}}
  @anArray={{this.anArray}}
	@anArrayOfEngineers={{this.anArrayOfEngineers}}
 />
<br>
<br>

templates.components.args-component\.hbs

<h4>This is the ArgsComponent</h4>

Value info: {{this.aValueInfo}}
<br>
Object info: {{this.anObjectInfo}}
<br>
Array info: {{this.anArrayInfo}}
<br>
Arry of objects info: {{this.anArrayOfObjectInfo}}
<br>

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"
  }
}