I have three variables that are strings. However they sit one on top of the other with no spacing. Is there any way to add what would be equivalent to a in the ts file and not the template. Or am I able to add multiple values to my angular component input and somehow break it up there? I am not certain on how to achieve this. Any guidance would be greatly appreciated.
.ts file
this.myContent= this.content.paragraph1 + this.content.paragraph2 + this.content.paragraph3;
.html file
<my-component [myContent]="myContent"></my-component>
maybe you can use inline template literal. So you could assign this.myContent like this
this.myContent = `${this.content.p1}\n${this.content.p2}\n${this.content.p3}`
I would suggest the following approach:
Make this.myContent an array, and put this.content.paragraph1, this.content.paragraph2 and so on in it.
Put an *ngIf on <my-component>, and only display it if the content array has elements in it.
Put a <p *ngFor="..."> element within <my-component>, and iterate through the content array.
This will display the paragraphs, and will break them up.
Related
I tried setting the Print Width to a high number which temporarily solved the issue but I do not want this number to be too large as it is actually useful for long html tags with many attributes to be broken down into multi line. However, for an html tag with only one class name for example, I want Prettier to keep it like this:
<div class="header_info">
Rather than what Prettier is automatically reformatting it to as follows:
<div
class="header_info
>
You can set printWidth or put // prettier-ignore comment above your code.
I have this code.
this._notificationService.showInfoMessage
(
'The list below cannot be reached'
+ `'<ul>
<li> ${this.tagList
.map(i => i.tag)
.join(',')} </li>
</ul>'`
);
It does not work
I want add html list inside component.ts file for this tag list and show list items one by one as a list with bullets.
I have tried many ways.
I made it using browser inspect view
I want to get as below one
please suggest best way for this
Why it doesn't work?
Just check what says the official Angular documentation.
Angular recognizes the value as unsafe and automatically sanitizes it,
which removes the script element but keeps safe content such as the
element.
https://angular.io/guide/security#sanitization-example
That is how it's working!
But still, you have many options to achieve your goal.
Since you have a list/array of tags you could just iterate over them in the template and use string interpolation.
<ul>
<li *ngFor="let tag of tags">{{tag}}</li>
</ul>
Text interpolation:
https://angular.io/guide/interpolation
P.S Please, share with us what your service/component looks like.
Suppose I have a string <span class="msg">Text goes here</span>.I need to use this string as a HTML element in my webpage. Any ideas on how to do it?
Mithril provides the m.trust method for this. At the place in your view where you want the HTML output, write m.trust( '<span class="msg">Text goes here</span>' ) and you should be sorted.
Mithril it's powerfull thanks to the virtual dom, in the view you if you want to create a html element you use:
m("htmlattribute.classeCss" , "value");
So in your case:
m("span.msg" , "Text goes here");
Try creating a container you wish to hold your span in.
1. Use jQuery to select it.
2. On that selection, call the jQuery .html() method, and pass in your HTML string.
($('.container').html(//string-goes-here), for example)
You should be able to assign the inner HTML of the container with the string, resulting in the HTML element you want.
Docs here.
I have a DIV HTML element that displays some HTML from a variable:
<div contenteditable="true"
ng-bind-html="renderHtml(currentOperation.description)"
ng-model='currentOperation.description'></div>
It renders just fine.
When I type text into the DIV the changes are NOT reflected in the scope variable currentOperation.description
I need a 2 way street here, as is the case with all Angular variables using ng-model
I think you need 2 different things in your case. I would have one to write the content as text, and one to display it. Then either you have the 2 of them like a preview mode, or you use a 3rd variable to know if you are in edit mode or not.
For example:
<textarea model="description" ng-show="edit"></textarea>
<div ng-bind-html="description" ng-show="!edit"></div>
But the best would be to use a WYSIWYG tool I guess. Most of them allow you to write your own HTML. I use this one https://github.com/fraywing/textAngular
Suppose I have a string <span class="msg">Text goes here</span>.I need to use this string as a HTML element in my webpage. Any ideas on how to do it?
Mithril provides the m.trust method for this. At the place in your view where you want the HTML output, write m.trust( '<span class="msg">Text goes here</span>' ) and you should be sorted.
Mithril it's powerfull thanks to the virtual dom, in the view you if you want to create a html element you use:
m("htmlattribute.classeCss" , "value");
So in your case:
m("span.msg" , "Text goes here");
Try creating a container you wish to hold your span in.
1. Use jQuery to select it.
2. On that selection, call the jQuery .html() method, and pass in your HTML string.
($('.container').html(//string-goes-here), for example)
You should be able to assign the inner HTML of the container with the string, resulting in the HTML element you want.
Docs here.