question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to style inner html passed into the json string

See original GitHub issue

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting [x ] support request => check the FAQ and search github for a similar issue before submitting [ ] feature request

I have added html tags to one of my translation strings as follows:

HTML

<span class="ex-login" [innerHTML]="'SIGN.EXLOGIN' | translate:clever"></span>

JSON

"EXLOGIN": "Iniciar con <span class='ex-text-lg'>{{value}}</span>"

CSS

 @media (max-width: 420px ) {
    .ex-text-lg {
      display: none!important;
    }

I need the login/iniciar con to fall away in a specific media query, and I had tested this with the plain text and it was working fine, but since I’ve added it as a translation, the style is not being picked up.

  • ng2-translate version: 4.2.0

  • Angular version: cli 1.0.0-beta.21

  • Browser: Chrome 55.0.2883.87 m

Please let me know if there is a known fix for this issue.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6

github_iconTop GitHub Comments

4reactions
j-meiringcommented, Dec 21, 2016

I had originally tried :host >>>, which didn’t work, but /deep/ seems to have done the trick.

Incidentally, I think this may help with a colleague’s issue.

Thanks for the swift response, even though it turned to not be an issue with translate.

0reactions
vasnakoscommented, Jun 14, 2021

For me it is solved with ::ng-deep

Read more comments on GitHub >

github_iconTop Results From Across the Web

Write HTML string in JSON - Stack Overflow
It is possible to write an HTML string in JSON. You just need to escape your double-quotes. [ { "id": "services.html", "img": "img/SolutionInnerbananer.jpg" ......
Read more >
4 Things You Must Do When Putting HTML in JSON
There are 4 things you must do when putting HTML in JSON data structures. These items were originally included in a recent post...
Read more >
JavaScript JSON parse() Method - W3Schools
The JSON. parse() method parses a string and returns a JavaScript object. The string has to be written in JSON format. The JSON....
Read more >
JSON.stringify() - JavaScript - MDN Web Docs
The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified or ...
Read more >
How To Use the innerHTML Property Binding in Angular
The HTML entities and HTML elements are not rendered. Now, let's consider a template that uses [innerHTML] property binding on this string: <div ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found