lstrrs

import Component from '@glimmer/component';

export default class extends Component {
  context = {
   	a: 1,
    b:2 
  };
}

lstrrs

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class extends Component {
  @action
  click() {
   	console.log('Clicked: ', this.args.text);
  }
}

lstrrs

import Component from '@glimmer/component';

// Need to support auto and 0 as params

function getClassName(type, edge, unit) {
  if (unit === '0') {
  	return '';
  }
  
  return `${type}${edge}-${unit}`;

lstrrs

import Component from '@glimmer/component';
import STEPS from '../steps';

export default class extends Component {
  get destinationElement() {
    return document.getElementById('badge-outlet');
  }
  
  get styles() {
    const newDestinationElement = document.getElementById(`${STEPS[this.args.step]}-2`);

lstrrs

import Controller from '@ember/controller';
import { set, action } from '@ember/object';

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

  @action
  onClickParent() {
    console.log('Clicked Parent');
  }

lstrrs

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class extends Component {
  @tracked pos1 = 0;
  @tracked pos2 = 0;
	@tracked pos3 = 0;
	@tracked pos4 = 0;

lstrrs

import Ember from 'ember';

export default Ember.Component.extend({
  attributeBindings: [
    'ariaLabelledBy:aria-labelled-by',
  ],
  
  ariaLabelledBy: 'hello-world',
});

lstrrs

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['my-component', 'display-flex'],
  classNameBindings: ['showComponent::hidden'],
  isVisible: true,
  showComponent: true,
  actions: {
   	onClick() {
      console.log('Hi');

lstrrs

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'button',
  classNames: ['button']
});

lstrrs

import Ember from 'ember';
import { computed } from '@ember/object';

export default Ember.Component.extend({
  classNameBindings: [
  	'_isEdited',
  ],
  
  _isEdited: computed('isEdited', function() {
    return this.isEdited ? 'a b c' : '';