CODEWITHSUNDEEP
javascriptember.jsframeworks
user7480665
user7480665

Reputation:

How do I call nested ember components in Ember 3.8

I'm trying to call a component called icon-plus-button defined in a parent component called expandable-items using the new angle based syntax The old way would be something like

{{#expandable-items/icon-plus-button
    expandedText=
    text=(t 'sideBarNav.dashboard')
    expanded=expanded linkTo='dashboard'
    toggleExpanded={{action "toggleExpanded"}}
}}
    {{fa-icon "line-chart"}}
{{/expandable-items/icon-plus-button}}

whereas the new way is something like

<ExpandableItemsIconPlusButton
  @expanded={{this.expanded}}
  @expandedImage={{fa-icon "angle-double-left"}}
  @expandedText={{t "sideBarNav.collapseMenu"}}
  @toggleExpanded={{action "toggleExpanded"}}
/>

and I'm getting this error message

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)

Upvotes: 0

Views: 75

Answers (1)

Gaurav
Gaurav

Reputation: 12796

You can not do this with Ember 3.8 out of the box. Either use https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill or upgrade to Ember 3.10

The syntax is:

<ExpandableItems::IconPlusButton ...

Upvotes: 5

Related Questions