I am working on project with Angular 12 and I have an HTML response I want to display. I want to bind innerHtml of div to variable value
I use this syntax {{value}}
You should use [innerHTML] property binding to your element , like this :
<div [innerHTML]="response"></div>
Related
I have a reference to a textarea
<*wrapper-component (submit)="tx1.value ? submit(tx1.value) : tx1.setClass('required')??">
<textarea #tx1> <textarea>
</*wrapper-component>
which I pass the value of into my submit function, is it possible to set classes for my tx1 element from the HTML itself instead of creating a ViewChild property and accessing elRef.nativeElement.setClass with typeScript?
I'd normally suggest using [ngClass] binding for setting CSS selectors dynamically. However, if you insist on using a template ref variable, you could use the setAttribute() method to set attributes, in your case 'class'.
<*wrapper-component (submit)="tx1.value ? submit(tx1.value) : tx1.setAttribute('class', 'required')">
<textarea #tx1> <textarea>
</*wrapper-component>
for some reason, I cannot change the text of a span
This is the span in html
<span id="sortingText"></span>
This is the span being called within typescript
sortingText : any = document.getElementById("sortingText");
And this is the method where I am changing the value
this.sortingText.textContent = "Sorting by Descending";
However when I try this, I get "ERROR TypeError: Cannot set property 'textContent' of null"
What am I doing wrong?
As you're using Angular, why don't you use interpolation?
Add a property which contains the sort order:
sortingText = 'Sorting by Descending';
In your component's template:
<span>{{ sortingText }}</span>
To display the sort order, you have to put your property between two double braces, this way Angular will insert its value in your span.
You should read how to display data in Angular docs.
Your question is tagged with angular so inject elements like this:
How can I select an element in a component template?
In my angular component ts file I have a model, with a property whose value is html formatted text.
The text is displayed in the UI using inner html property of a div in my component’s .html file.
The div is made editable by setting the editable property .
Code snippet :
<div id="requestBody" contenteditable="true"
*ngIf="selectedReqTab==='reqBody'" [innerHTML]="formatJson(requestBody)"></div>
Here formatJson returns the html formatted JSON text.
The issue :
The changes made in the text are not getting reflected in the corresponding model, even if we have 2 way data binding using ngModel.
<div id="requestBody" contenteditable="true"
*ngIf="selectedReqTab==='reqBody'" [(ngModel)]=”requestBody”
[innerHTML]="formatJson(requestBody)"></div>
What am I doing wrong here ? could you please suggest.
contenteditable isn't an input, and two way binding works on inputs.
You have to update your model through input events, as shown here
<p (input)="updateModel(model.innerText)" #model contenteditable>{{ name }}</p>
I have an object array like this
Heros=[{
heroName:"card1",
heroType:"type1",
heroHtml:"<p>card 1</p>"
},
{
heroName:"card2",
heroType:"type2",
heroHtml:"<p>card 2</p>"
}
]
and I want to display it in my html page use like this
<div *ng-for="#hero of heros" data-hero-type="hero.heroType" [inner-html]="hero.heroHtml"></div>
can see a Plunker here.
why the data-component-type cannot get right value? If this is forbidden or not recommanded, what else solution can be used to bind value to html 5 custom attribute?
That's because data-hero-type is not a div's property, but an attribute, so to make it work you have to use
[attr.data-hero-type]="hero.heroType"
See this issue for reference #5014
And you are good to go ;)
Is it possible to give angular expression inside a JSON file like this:
{
"headerHTML": "<div>{{clippedCoupons}}</div>"
}
And bind it to a directive template like this (the below convertAsHtml is a filter for trustAsHtml):
<header data-ng-bind-html="headerHTML|convertAsHtml">
</header>
When I bind the JSON, I'm getting {{clippedCoupons}} expression as such in the page. Is is possible to change it dynamically in our controller?