CODEWITHSUNDEEP
angularngx-translate
Tom
Tom

Reputation: 8681

hperlink not getting embedded or correctly read in angular UI

Currently I am reading text from json and displaying it in angular UI. I need to add hyperlink though but it seems like the its not understanding anchor tag.

This is how the rendered page looks

1.3 If you do not agree to any of the provisions of these Terms, you should immediately stop using the Portal. If you have any questions regarding these Terms, you can contact us as set out in paragraph 12 below. 
1.4 Please also read our Privacy Policy <a href='https://www.test.com/site-services/privacy-policy'</a>  and how we use cookies in providing the Portal.

Html page

 <section>
  <article class="info-panel">
        <!-- <object data="assets/terms_of_use.pdf" type="application/pdf"></object> -->
        <p class="terms" *ngIf="readOnline">
          {{ 'portal.onboarding.welcome.stage1.terms_full' | translate }}
        </p>
      </article>
    </section>

json

  "terms_full": "\r\n If you do not agree to any of the provisions of these Terms, you should immediately stop using the Portal. If you have any questions regarding these Terms, you can contact us as set out in paragraph 12 below. \r\n1.4\tPlease also read our Privacy Policy <a href='https://www.test.com/site-services/privacy-policy'</a> and how we use cookies in providing the Portal.\r\n"

Upvotes: 1

Views: 46

Answers (1)

NeNaD
NeNaD

Reputation: 20354

Use [innerHTML] attribute.

<section>
  <article class="info-panel">
    <p class="terms" *ngIf="readOnline"  [innerHTML]="'portal.onboarding.welcome.stage1.terms_full' | translate"></p>
  </article>
</section>

NOTE: You also didn't close <a> tag in your JSON file, so you should also do that.

"terms_full": "\r\n If you do not agree to any of the provisions of these Terms, you should immediately stop using the Portal. If you have any questions regarding these Terms, you can contact us as set out in paragraph 12 below. \r\n1.4\tPlease also read our Privacy Policy <a href='https://www.test.com/site-services/privacy-policy'></a> and how we use cookies in providing the Portal.\r\n"

Upvotes: 1

Related Questions