CODEWITHSUNDEEP
javascripthtmlangularjs
Richard
Richard

Reputation: 8955

HTML - inline tags not refelecting

I have a page where it loads some values from a spreadsheet, and displays the values on the page. (i.e. so it can handle multiple languages).

Problem

When I put html tags in the spreadsheet, they are not applied.

Example

If I put the following text in an html file and view it, the browser applies the html tags as expected.

<div><a href='http://...'>some <br> value</a></div>

enter image description here

However, when it is applied loaded from the spreadsheet, the <br> tag is not applied and it stays on one line.

<div class="col-xs-12 col-sm-6 pull-right">
    <a ui-sref="open.registration.login.resetPassword"
        class="bmw-command-link bmw-mt-2 bmw-mb-2">{{ 'gcdm-login.forgotten_password' |
        translate }}</a>
</div>

enter image description here

enter image description here

Also, if I update the value in Chromes Developer tools, the value changes in the browser, but html tags are not applied. It is as if the browsers display does not refresh to apply html tags.

Question

Is there a way I can get the html tags read in from the spreadsheet applied?

Is this a timing issue, meaning that the DOM is rendered already and cannot be changed on the fly?

Thanks

Upvotes: 2

Views: 78

Answers (2)

Ionut Necula
Ionut Necula

Reputation: 11480

It really depends on what version of Angular you use, but for all it resumes to one thing: you have to bind your text as HTML by using either ng-bind-html directive or [innerHTML] property.

AngularJS:

<div class="col-xs-12 col-sm-6 pull-right">
    <a ui-sref="open.registration.login.resetPassword"
        class="bmw-command-link bmw-mt-2 bmw-mb-2" ng-bind-html="'gcdm-login.forgotten_password' | translate"></a>
</div>

Angular 2-6:

<div class="col-xs-12 col-sm-6 pull-right">
    <a ui-sref="open.registration.login.resetPassword"
        class="bmw-command-link bmw-mt-2 bmw-mb-2" [innerHTML]="'gcdm-login.forgotten_password' | translate"></a>
</div>

I've also made you an working example here.

Upvotes: 2

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7171

its work fine

try this

<div class="col-xs-12 col-sm-6 pull-right">
  <a ui-sref="open.registration.login.resetPassword" class="bmw-command-link bmw-mt-2 bmw-mb-2">forgotten<br>password</a>
</div>

Upvotes: 0

Related Questions