How to hide a view in ember.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// app/components/my-component.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyComponentComponent extends Component {
  isVisible = true;

  @action
  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }
}

// app/templates/components/my-component.hbs
<button {{on "click" this.toggleVisibility}}>Toggle Visibility</button>

{{#if this.isVisible}}
  <div>This is a visible view</div>
{{/if}}