Writing nested Components with new angle syntax

Questions
1

How would I convert this to angle syntax {{#expandable-items/icon-plus-button text=(t ‘sideBarNav.dashboard’) expanded=expanded linkTo=‘dashboard’ }} {{fa-icon “line-chart”}} {{/expandable-items/icon-plus-button}}

I currently have it as <ExpandableItemsIconPlusButton @expanded={{this.expanded}} @expandedImage={{fa-icon “angle-double-left”}} @text={{t “sideBarNav.collapseMenu”}} />

My guess is it’s not supported It throws this error for me opcode-compiler.js:140 Uncaught Error: Compile Error: Cannot find component expandable-items-icon-plus-button at opcode-compiler.js:140 at Compilers.compile (opcode-compiler.js:42) at compile (opcode-compiler.js:718) at LazyCompiler.add (opcode-compiler.js:912) at CompilableBlock.compile (opcode-compiler.js:707) at Object.evaluate (runtime.js:717) at AppendOpcodes.evaluate (runtime.js:69) at LowLevelVM.evaluateSyscall (runtime.js:3270) at LowLevelVM.evaluateInner (runtime.js:3216) at LowLevelVM.evaluateOuter (runtime.js:3208)

2

The separator for angle bracket components is ::. You need to be on at least Ember 3.10—see the release blog post for details—but you can invoke like this:

<ExpandableItems::IconPlusButton
  @expanded={{this.expanded}}
  @expandedImage={{fa-icon "angle-double-left"}}
  @text={{t "sideBarNav.collapseMenu"}}
/>
1 Like