CODEWITHSUNDEEP
ember.js
mmy227
mmy227

Reputation: 27

Ember remove parent class from child component

I have an addon component that is wrapping a component from a different addon:

// parent-addon/addon/components/parent-component.js
import Component from '@ember/component';
import layout from '../templates/components/parent-component';

export default Component.extend({
  layout,
  classNames: ['parent']
});

// child-addon/addon/components/child-component.js
import Parent from 'parent-addon/components/parent-component';
import layout from '../templates/components/child-component';

export default Parent.extend({
  layout,
});

// child-addon/addon/templates/components/child-component.hbs
{{#parent-component}}
  Hello
{{/parent-component}}

Because classNames are concatenated, the wrapper div for the child component contains the "parent" class, e.g.

<div class="parent">
  <div class="parent">
    Hello
  </div>
</div>

Is there a way to remove the "parent" class from the classNames of the child component? I don't have access to the parent addon so I can't change any of its code.

Upvotes: 0

Views: 293

Answers (1)

mmy227
mmy227

Reputation: 27

Figured it out with this post, had to do

// child-addon/addon/components/child-component.js
import Parent from 'parent-addon/components/parent-component';
import layout from '../templates/components/child-component';

export default Parent.extend({
  layout,
  init() {
    this._super(...arguments);
    this.set('classNames', []);
  }
});

Upvotes: 1

Related Questions