{{ mut attr }}

npm install ember-cli

ember new <project-name> --lang en

ember serve

ember generate route mut1

import Component from '@glimmer/component';
import { action, set } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import Ember from 'ember';
 
export default class ListComponent extends Component {
    @tracked
    value = 'GeeksforGeeks';
}

<h2>{{unbound this.value}} is not changeable.</h2>
<h2>{{this.value}} is changeable.</h2>
<input
    type="button"
      id="set-code"
      value="Change value"
      {{action (mut this.value) "GFG"}}
/>

{{page-title "List2"}}
<List2 @value={{ this.val }}></List2>

ember generate route mut2

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action, addObjects } from '@ember/object';
export default class CompactComponent extends Component {
    items = [
        'Oxygen',
        'Source Code',
        'Infine',
        'Tenet',
        'SpiderHead',
        'The Thing',
        'A Quiet Place',
        'The Invisible Man',
        'Looper',
        'Ad Astra',
    ];
 
    @action
    remove(data) {
        return this.items.without(data);
    }
}

{{#if @show}}
    <ul>
        <h3>{{yield}} : </h3>
        {{#each this.items as |party|}}
              <li>{{unbound party}}</li>
        {{/each}}
      </ul>
      <br />
      {{textarea value=this.value}}
      <br />
      <input
        type="button"
        id="check-atIndex"
        value="Remove"
        {{action (mut this.items) (this.remove this.value)}}
      />
      <br /><br />
{{else}}
    This component Don't Have block!!<br />
{{/if}}

<Arr @show={{true}}>
    List of items
</Arr>
{{outlet}}