Specifying a different template path for an ember component

Question

Suppose I have this structure:

modals/
├─ index.hbs
├─ base.ts
├─ new/
│  ├─ index.ts (extends base.ts)
├─ rename/
│  ├─ index.ts (extends base.ts)

(Basically I have two components which have exactly the same template, but different logic within the .ts/.js files)

Is it possible to specify the template path in both of those index.ts files to point to the index.hbs which is located one level above?

Or something similar, the idea is to not have to duplicate the template between those two components.

I've tried the structure above but it does not seem to work. I imagine I must specify a template path somewhere but I just can't find something like that in the documentation.

Answer 1

It is not recommended to do this.

It's possible with very low-level APIs (due to the nature of them being compiled into JS(ON)), but something to understand about templates, is that they are the component -- not something a component has.

This is made more clearly with Ember's upcoming-as-default syntax, gjs/gts, Demonstrated here:

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';

export default class HelloWorld extends Component {
  @tracked count = 0;

  increment = () => this.count += 1;

  <template>
    <p>You have clicked the button {{this.count}} times.</p>

    <button {{on "click" this.increment}}>Click</button>
  </template>
}

You can try this today with this addon: https://github.com/ember-template-imports/ember-template-imports/