How to remove styles of an Angular2 component?

Question

I am currently using ng2-smart-table. This component is actually have its own style :

[...]
selector: 'ng2-smart-table',
styles: [":host /deep/ *{box-sizing:border-box;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif}:host /deep/ button,:host /deep/ input,:host /deep/ optgroup,:host /deep/ select,:host /deep/ textarea{color:inherit;font:inherit;margin:0}:host /deep/ table{font-size:16px;line-height:1.5;color:#606c71;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;overflow:auto;word-break:normal;word-break:keep-all}:host /deep/ table tr th{font-weight:700}:host /deep/ table tr section{font-size:.75rem;font-weight:700}:host /deep/ table tr td,:host /deep/ table tr th{font-size:.875rem;margin:0;padding:.5rem 1rem;border:1px solid #e9ebec}:host /deep/ a{color:#1e6bb8;text-decoration:none}:host /deep/ a:hover{text-decoration:underline} /*# sourceMappingURL=ng2-smart-table.component.css.map */ "],
        template: "<table [id]=\"grid.getSetting('attr.id')\" [ngClass]=\"grid.getSetting('attr.class')\"><thead ng2-st-thead *ngIf=\"!grid.getSetting('hideHeader') || !grid.getSetting('hideSubHeader')\" [grid]=\"grid\" [isAllSelected]=\"isAllSelected\" [source]=\"source\" [createConfirm]=\"createConfirm\" (create)=\"create.emit($event)\" (selectAllRows)=\"onSelectAllRows($event)\" (sort)=\"sort($event)\" (filter)=\"filter($event)\"></thead><tbody ng2-st-tbody [grid]=\"grid\" [source]=\"source\" [deleteConfirm]=\"deleteConfirm\" [editConfirm]=\"editConfirm\" (edit)=\"edit.emit($event)\" (delete)=\"delete.emit($event)\" (userSelectRow)=\"onUserSelectRow($event)\" (editRowSelect)=\"editRowSelect($event)\" (multipleSelectRow)=\"multipleSelectRow($event)\" (rowHover)=\"onRowHover($event)\"></tbody></table><ng2-smart-table-pager *ngIf=\"grid.getSetting('pager.display')\" [source]=\"source\" (changePage)=\"changePage($event)\"></ng2-smart-table-pager>",
[...]

I would like to know if it is possible to specify in a template that I want to use this component with no style.

For instance something like that :

<ng2-smart-table [settings]="settings" [source]="source" (edit)="emitEdit($event)" noStyles></ng2-smart-table>

score 1 · Accepted Answer · answered May 19 '17 at 09:00

I encountered something like this, but the opposite, I needed my own styles.

The thing is that g2-smart-table is a library, is not your code per say.

So a solution would be to fork the repository in github, and in packages.json reference your forked repository instead of the original one.

And, obviusly, in the forked repository you remove the styles or do whatever you want.

Here you can find how to use a forked repository in your package.json:

https://coderwall.com/p/q_gh-w/fork-and-patch-npm-moduels-hosted-on-github

Option 2:

This would be nice for the community.

Still fork the original repository, create a directive [noStyles] that removes styles from the library's template and make a pull request.

This way, if it gets accepted, everyone who uses this library will be able to use your [noStyles] directive and benefit from it.

I did the option 2. Thanks for your anwer. – Thomas Betous Jun 05 '17 at 22:12 — Thomas Betous, Jun 05 '17 at 22:12

score 0 · Answer 2 · edited May 23 '17 at 11:47

You can try to clear all class that are applied. Check the approved answer this should do the trick. Edited code from pasted answer

var ancestor = document.getElementById('id'),
//put an id to ng2-smart-table or something to catch this element
descendents = ancestor.getElementsByTagName('*');
// gets all descendent of ancestor
var i, e, d;
for (i = 0; i < descendents.length; ++i) {
   e = descendents[i];
   e.removeAttribute('style');
   e.removeAttribute('class');
}

How to remove styles of an Angular2 component?

2 Answers2