Component extending

#1

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?

#2

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
#3

Ah, got it, thank you :slight_smile:

#4

You should consider whether a mixin would to the trick.

#5

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.