Angular text as html

SodhanaLibrary

You can display Angular variable in double curly braces — >. Whatever variable in these double curly braces, will be displayed as text. Angular 2 provides innerHTML directive, which set HTML to the element.

Markup

div [innerHTML]="myHtml">div> div><myHtml>>div> 

Script — app.component.ts

Observe below code, setText(), setHtml() functions set Html and Text data. You can view the result through the template.

import < Component >from '@angular/core'; @Component(< selector: 'my-app', template: ` 
Set Text or HTML to div
 div> "setText()">Set Text "setHtml()">Set HTML div>
 
div [innerHTML]="myHtml">div> div>>div> ` >) export class AppComponent  myHtml: string = '
basic initial HTML
'; text: string = 'this is sample text'; html: string = '
this is sample html
'; setText(): void setHtml(): void < this.myHtml = this.html; >> 

Источник

Html angular display text as html code example

For example: is equivalent to is equivalent to is equivalent to However solution using angular would be: Component: HTML: OR Use InnerText instead of InnerHTML https://stackblitz.com/edit/angular-5cpmcr Solution: You should pass button to the function and set it as Solution 1: i don’t know about quill.. so may be there will be another good solution i think you can solve this problem with pipe something like this if you don’t wanna use in template just return that value and use it i hope it helps Solution 2: I think you can use like this I used it before also with Quill So you could change your to this: Solution 3: In HTML, you need to use entities to show the reserved characters.

Displaying text with html tags as html

You need to use DomSanitizer to bypass html which you provided(bypassSecurityTrustHtml).

constructor(public navCtrl: NavController, public navParams: NavParams, private sanitizer: DomSanitizer)

Read more here: https://angular.io/guide/security#bypass-security-apis

Convert text to html format in angular, Angular encodes the values returned by the api for security purposes. You have to use the DomSanitizer service in your service to bypass it. First inject …

Display raw html

You can use the ViewContainerRef to get the nativeElement, and get its innerHTML.

Just a warning : this won’t be your HTML code, but the compiled code.

Here is an example : stackblitz

export class AppComponent < htmlContent: string; constructor(private view: ViewContainerRef) < setTimeout(() =>this.htmlContent = (view.element.nativeElement as HTMLElement).innerHTML); > > 

EDIT If you want the uncompiled code, you should use this notation : stackblitz

import < Component, ViewContainerRef >from '@angular/core'; import * as template from "./app.component.html"; @Component(< selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] >) export class AppComponent < htmlContent: string = template.default; constructor(private view: ViewContainerRef) < >> 

But I suggest you use the latest versions of typescript & Angular, since I’m not sure when it has been introduced.

Get a reference pointing to that component using ViewChild, like

export class AppComponent < @ViewChild(ExampleComponent, < read: ElementRef >) exampleComponent; > 

Then you can access its HTML with nativeElement.innerHTML .

So you could change your app.component.html to this:

In HTML, you need to use entities to show the reserved characters.

example works!
 <p>example works!</p> 

For example:

However solution using angular would be:

export class SomeComponent < code :string = `
example
` > 

OR Use InnerText instead of InnerHTML

Html — Display text on a button click Angular, onTitleClick() < this.text = this.textprediction; >But when I ask my function to go and get it in my array it doesnt work. html angular typescript …

Display text on a button click Angular

You should pass button to the function

Javascript — Render text as HTML on AngularJS, I’m trying to display text fields (like a form) inside a table. I got a button, when I click it one new line is added to the table and all the cells are form …

Show HTML string as plain text in Angular

so may be there will be another good solution

i think you can solve this problem with pipe something like this

@Pipe(< name: 'truncateHtml' >) export class TruncateHtmlPipe implements PipeTransform < constructor() < >transform(text: string ) < if (!text) < return text; >let without_html = text.replace(/<(. |\n)*?>/gm, ' '); return without_html; > >

if you don’t wanna use in template

just return that value and use it

I think you can use innerHTML like this

I used it before also with Quill

Show HTML string as plain text in Angular, There I want to show HTML string retrieved from the database as plain text (for listing each blog post’s preview). The HTML rich-text was …

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rendering string as HTML element #21010

Rendering string as HTML element #21010

Comments

I’m submitting a.

 [ ] Regression (a behavior that used to work and stopped working in a new release) [ ] Bug report [X] Feature request [ ] Documentation issue or request [ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question 

Current behavior

Not rendering variable value (string) as HTML Element using «>»

Expected behavior

Why there is not an option to render text as HTML element for example using «>>» (3 brackets or something). Using [innerHTML] is not handy for every situation I think

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

 Angular version: X.Y.Z Browser: - [ ] Chrome (desktop) version XX - [ ] Chrome (Android) version XX - [ ] Chrome (iOS) version XX - [ ] Firefox version XX - [ ] Safari (desktop) version XX - [ ] Safari (iOS) version XX - [ ] IE version XX - [ ] Edge version XX For Tooling issues: - Node version: XX - Platform: Others: 

The text was updated successfully, but these errors were encountered:

Источник

angularjs для вывода обычного текста вместо HTML

Вы отметили это в AngularJS, поэтому я предполагаю, что вы хотите отображать текст с помощью AngularJS. Если так, этот текст в модели? Какой HTML-тег вы используете для отображения содержимого модели?

Я вижу, что и его решение использует jQuery — вы отметили это в AngularJS, и у меня есть ощущение, что вы можете делать это в AngularJS без использования jQuery, если только вы можете дать больше информации в своем вопросе — особенно там, где вы хотите отобразить текст на ваш взгляд .

8 ответов

function htmlToPlaintext(text) < return text ? String(text).replace(/<[^>]+>/gm, '') : ''; > 

var plain_text = htmlToPlaintext( your_html ); 

С angular.js:

angular.module('myApp.filters', []). filter('htmlToPlaintext', function() < return function(text) < return text ? String(text).replace(/<[^>]+>/gm, '') : ''; >; > ); 

Я на самом деле предпочитаю String (text) .replace (/ <[^>] +> / gm, »). Я использую его годами без проблем.

jQuery работает в 40 раз медленнее, но вы все равно получаете 8000 операций в секунду, поэтому использование jQuery по этой причине является преждевременной оптимизацией.

@Blaise Слава, что вы правы, достаточно 8 тыс. Операций в секунду. Но подумай обо всей картине. Ваше приложение делает только это? А как насчет мобильных телефонов? Как насчет тяжелых приложений? Есть ли проблема совместимости браузера? Каковы преимущества jQuery? Является ли jQuery более читабельным? Легко ли написать jQuery? Иногда jQuery достаточно хорош. Но jQuery не должен использоваться везде. Особенно не здесь.

Я бы никогда не добавил зависимость jQuery только для преобразования html в текст, но если бы мой проект уже использовал jQuery, я бы выбрал решение jQuery, потому что считаю написанное пользователем регулярное выражение менее читабельным, менее проверенным и менее надежным. Защищает ли ваше регулярное выражение все возможные формы XSS ?

@Blaise Blaise, если вы добавляете текст в DOM с помощью jQuery, вам не нужно защищать от XSS эту функцию. JQuery делает это при добавлении в DOM. Кстати, я действительно не уверен, какой из них является более читабельным.

использование механизма DOM охватывает гораздо больше случаев, когда этот простой пример заменяет не пример: некоторые коды здесь & # 146; & # 147; & # 148;

Вам, вероятно, следует добавить туда проверку нуля, или она выдаст «null»: return text ? String(text).replace(/<[^>]+>/gm, ») : «»;

Я настороженно отношусь к этому решению. Существует ряд обстоятельств, при которых он потерпит неудачу: 1. В тексте появляется знак « <», который не является тегом, то есть

One . Строка «

Вы можете сократить регулярное выражение с помощью несложного поиска /<.+?>/gm, который выглядит немного более интуитивно понятным, читаемым и также экономит несколько символов.

Источник