Component extending

Hi. Is there any way to make a component that extends another component? Here’s the code:

// my-base-component.js
export default Ember.Component.extend({
   classNames: "my-base-component"
});

// my-base-component.hbs
{{yield}}

// my-other-component.js
export default Ember.Component.extend({
   classNames: "my-other-component"
});

// my-other-component.hbs
{{#my-base-component}}
  whatever
{{/my-base-component}}

What I want to achieve, when rendering my-other-component:

<div class="my-base-component my-other-component">
    whatever
</div>

What I get:

<div class="my-other-component">
    <div class="my-base-component">
          whatever
    </div>
</div>

Now, I get that this is how ember works :slight_smile: But is there any way to make ember work my way?

In your example, you are not extending the base component… you are just nesting it inside your other component’s template.

Instead you need to import your base component, and extend it.

// my-base-component.js
export default Ember.Component.extend({
   classNames: "my-base-component"
});
// my-base-component.hbs
{{yield}}

Now use import MyBaseComponent and MyBaseComponent.extend

import MyBaseComponent from 'app/components/my-base-component'; // <- import base component

// my-other-component.js
export default MyBaseComponent.extend({ // <- extend your base component
   classNames: "my-other-component"
});
// my-other-component.hbs
{{yield}}

that should do it

1 Like

Ah, got it, thank you :slight_smile:

You should consider whether a mixin would to the trick.

It seems that when one component extends another, classNames are concatenated… Is there any documentation on which Ember.Component properties behave line that?

PS. @bjerh, yeah, mixin sounds about right here.