Angular: CSS class usage within innerHtml of a cell

up vote
2
down vote

favorite

I am fighting with this CSS issue, or angular, ...
The problem is that the CSS class used in a DIV element of my table cell is ignored.

I copied the basic example of https://material.angular.io/components/table/examples as this is what I want to use.

within the css file I added:

.test-css {
color: orange;
}

then I modified the html template in order for one cell to call a method from my component class to get the innerHTML code:

<td mat-cell *matCellDef="let element" [innerHtml]="getInnerHtml(element)"</td>

The method looks like that:

public getInnerHtml(element) {

    return `<div class="test-css">${element.name}</div>`;

}

The name is not displayed in orange.

If I apply the the test-css to the cell itself in the component template:

<td mat-cell *matCellDef="let element" class="test-css [innerHtml]="getInnerHtml(element)"</td>

then the column correctly appear in orange.

If I change on the component encapsulation to None, it works but the overall table layout is completely disturbed.
So I expect some issue in the way the innerHtml is interpreted.

Any idea if there is a way to solve it and to have the innerHtml correctly interpreted?

Thanks

asked Nov 9 at 15:26

Ovomaltin

111

If you apply ::ng-deep to your css, does that help? Details here
– dmcgrandle
Nov 9 at 18:54

Thanks so much, it works! The documentation seems to mention that it is deprecated, so I hope it will survive.
– Ovomaltin
Nov 9 at 20:17

Yes, it is deprecated which is why I didn't suggest it as an answer (just as a comment). However there isn't a good replacement that I know of, other than to change the encapsulation which as you found out has other effects.
– dmcgrandle
Nov 9 at 20:23

Thanks again. If anyone reading this has an option to replace the deprecated ::ng-deep I would be glad to try it.
– Ovomaltin
Nov 9 at 21:13

add a comment |

up vote
2
down vote

favorite

I am fighting with this CSS issue, or angular, ...
The problem is that the CSS class used in a DIV element of my table cell is ignored.

I copied the basic example of https://material.angular.io/components/table/examples as this is what I want to use.

within the css file I added:

.test-css {
color: orange;
}

then I modified the html template in order for one cell to call a method from my component class to get the innerHTML code:

<td mat-cell *matCellDef="let element" [innerHtml]="getInnerHtml(element)"</td>

The method looks like that:

public getInnerHtml(element) {

    return `<div class="test-css">${element.name}</div>`;

}

The name is not displayed in orange.

If I apply the the test-css to the cell itself in the component template:

<td mat-cell *matCellDef="let element" class="test-css [innerHtml]="getInnerHtml(element)"</td>

then the column correctly appear in orange.

If I change on the component encapsulation to None, it works but the overall table layout is completely disturbed.
So I expect some issue in the way the innerHtml is interpreted.

Any idea if there is a way to solve it and to have the innerHtml correctly interpreted?

Thanks

asked Nov 9 at 15:26

Ovomaltin

111

If you apply ::ng-deep to your css, does that help? Details here
– dmcgrandle
Nov 9 at 18:54

Thanks so much, it works! The documentation seems to mention that it is deprecated, so I hope it will survive.
– Ovomaltin
Nov 9 at 20:17

Yes, it is deprecated which is why I didn't suggest it as an answer (just as a comment). However there isn't a good replacement that I know of, other than to change the encapsulation which as you found out has other effects.
– dmcgrandle
Nov 9 at 20:23

Thanks again. If anyone reading this has an option to replace the deprecated ::ng-deep I would be glad to try it.
– Ovomaltin
Nov 9 at 21:13

add a comment |

up vote
2
down vote

favorite

I am fighting with this CSS issue, or angular, ...
The problem is that the CSS class used in a DIV element of my table cell is ignored.

I copied the basic example of https://material.angular.io/components/table/examples as this is what I want to use.

within the css file I added:

.test-css {
color: orange;
}

then I modified the html template in order for one cell to call a method from my component class to get the innerHTML code:

<td mat-cell *matCellDef="let element" [innerHtml]="getInnerHtml(element)"</td>

The method looks like that:

public getInnerHtml(element) {

    return `<div class="test-css">${element.name}</div>`;

}

The name is not displayed in orange.

If I apply the the test-css to the cell itself in the component template:

<td mat-cell *matCellDef="let element" class="test-css [innerHtml]="getInnerHtml(element)"</td>

then the column correctly appear in orange.

If I change on the component encapsulation to None, it works but the overall table layout is completely disturbed.
So I expect some issue in the way the innerHtml is interpreted.

Any idea if there is a way to solve it and to have the innerHtml correctly interpreted?

Thanks

asked Nov 9 at 15:26

Ovomaltin

111

I am fighting with this CSS issue, or angular, ...
The problem is that the CSS class used in a DIV element of my table cell is ignored.

I copied the basic example of https://material.angular.io/components/table/examples as this is what I want to use.

within the css file I added:

.test-css {
color: orange;
}

then I modified the html template in order for one cell to call a method from my component class to get the innerHTML code:

<td mat-cell *matCellDef="let element" [innerHtml]="getInnerHtml(element)"</td>

The method looks like that:

public getInnerHtml(element) {

    return `<div class="test-css">${element.name}</div>`;

}

The name is not displayed in orange.

If I apply the the test-css to the cell itself in the component template:

<td mat-cell *matCellDef="let element" class="test-css [innerHtml]="getInnerHtml(element)"</td>

then the column correctly appear in orange.

If I change on the component encapsulation to None, it works but the overall table layout is completely disturbed.
So I expect some issue in the way the innerHtml is interpreted.

Any idea if there is a way to solve it and to have the innerHtml correctly interpreted?

Thanks

css angular innerhtml

asked Nov 9 at 15:26

Ovomaltin

111

asked Nov 9 at 15:26

Ovomaltin

111

asked Nov 9 at 15:26

Ovomaltin

111

asked Nov 9 at 15:26

Ovomaltin

111

asked Nov 9 at 15:26

Ovomaltin

111

If you apply ::ng-deep to your css, does that help? Details here
– dmcgrandle
Nov 9 at 18:54

Thanks so much, it works! The documentation seems to mention that it is deprecated, so I hope it will survive.
– Ovomaltin
Nov 9 at 20:17

Yes, it is deprecated which is why I didn't suggest it as an answer (just as a comment). However there isn't a good replacement that I know of, other than to change the encapsulation which as you found out has other effects.
– dmcgrandle
Nov 9 at 20:23

Thanks again. If anyone reading this has an option to replace the deprecated ::ng-deep I would be glad to try it.
– Ovomaltin
Nov 9 at 21:13

add a comment |

If you apply ::ng-deep to your css, does that help? Details here
– dmcgrandle
Nov 9 at 18:54

Thanks so much, it works! The documentation seems to mention that it is deprecated, so I hope it will survive.
– Ovomaltin
Nov 9 at 20:17

Yes, it is deprecated which is why I didn't suggest it as an answer (just as a comment). However there isn't a good replacement that I know of, other than to change the encapsulation which as you found out has other effects.
– dmcgrandle
Nov 9 at 20:23

Thanks again. If anyone reading this has an option to replace the deprecated ::ng-deep I would be glad to try it.
– Ovomaltin
Nov 9 at 21:13

If you apply ::ng-deep to your css, does that help? Details here
– dmcgrandle
Nov 9 at 18:54

Thanks so much, it works! The documentation seems to mention that it is deprecated, so I hope it will survive.
– Ovomaltin
Nov 9 at 20:17

Yes, it is deprecated which is why I didn't suggest it as an answer (just as a comment). However there isn't a good replacement that I know of, other than to change the encapsulation which as you found out has other effects.
– dmcgrandle
Nov 9 at 20:23

Thanks again. If anyone reading this has an option to replace the deprecated ::ng-deep I would be glad to try it.
– Ovomaltin
Nov 9 at 21:13

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53228613%2fangular-css-class-usage-within-innerhtml-of-a-cell%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl