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.
Related
How do I create a link to a part of long webpage on another website that I don't control, that doesn't have an anchor tag?
I am trying to create a Course Outline Finder chrome extension for my university that you can use to:
Type course code in input box. (Use JS to filter out all other course codes)
Click the course code that remains after entering course code.
Course code link then leads you to a specific part of the university webpage that shows a list of course outlines for that specific course.
Ideally the webpage would have given an anchor tag like the following:
<h2 id="anchor">COMP150</h2>
Which I would then be able to link by doing the following:
<a href="https://www.ufv.ca/calendar/CourseOutlines/PDFs/COMP/#anchor>
But the website unfortunately doesn't have any id's for the h2 tags.
It instead has this:
<h2>COMP 150</h2>
<ul>
<li>COMP150-20000927.pdfEffective Fall 2012</li>
<li>COMP150-20011207.pdfEffective Fall 2019</li>
</ul>
Is there anything I can do?
You can insert the ID yourself in your extension:
document.querySelectorAll("h2")
.forEach(header => header.id = header.id ? header.id : header.textContent.trim())
Alternatively ask them to add an ID to their headers - they might agree
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.
I have a page that allows users to customise a design before downloading it. I have a list of designs that when clicked on display a different HTML layout. These HTML layouts are stored in a database as a string of HTML. To display these, i use:
<div [innerHTML]="myDesignHTML | safeHtml"></div>
As super basic example of one of the HTML strings is the following:
<div id="wrapper">
<div id="content">
<div id="title">titleText</div>
</div>
<div id="footer">
<p>footerText</p>
</div>
</div>
As I can't perform data binding on the actual HTML template that's inserted, I find the IDs of the elements and replace the 'placeholder' text with real user data. The issue I'm having is that my page also needs the ability to change colours of elements on the page. I've partially achieved this by doing the following for example:
document.getElementById("content").style.backgroundColor = color;
However, this doesn't always correctly update the DOM and feels a bit sketchy. Is there anything within Angular that allows the same functionality as [ngStyle] but within dynamic HTML templates that are inserted through [innerHTML]? When the user wants to change the colour of the background, or the text, it would be great to have a variable in the component.ts that get's updated and for the HTML template to react like [style.border-top-color]="mainCOlor" or something of the sort?
It seems that you can use the Renderer2 (see https://angular.io/api/core/Renderer2) in Angular. You would want a template reference do your div, and then you would use the nativeElement property to pull the current template. This is a better way to interact directly with the HTML inside of a div.
Trying to determine the correct syntax for using Microdata inside my breadcumbs implementation. Everything I have read seems to lean towards the fact that the breadcrumbs are structured inside an ordered or unorderd list. Mine is not.
<body itemscope="" itemtype="http://schema.org/WebPage">
...
<div class="breadcrumbs" itemprop="breadcrumb">
Home
<span class="delimiter"> > </span>
Parent Item
<span class="delimiter"> > </span>
<span>Child</span>
</div>
...
</body>
If I run it inside Google's tool it seems correct, but compared to their example it is missing a lot of elements and doesn't have the structure of their example BreadcrumbList.
I'm also a little confused about the correct properties for the links. Should they all have title and url properties?
I was looking at the examples at the bottom of the page here: http://schema.org/WebPage
The breadcrumb property expects one of two values:
Text
BreadcrumbList
If you provide a Text value (like you do in the example), you can’t provide data about each link. If you are fine with that, the Microdata in your example is correct (but it also contains RDFa, which doesn’t seem to make sense, at least not without further context; so if you didn’t add them intentionally, you might want to remove the property attributes).
If you want to provide data about each link, you have to provide a BreadcrumbList value.
For the Microdata, it doesn’t matter whether or not you use a list. If the example uses ol→li→a→span, you could as well use something like div→span→a→span. You just have to make sure to use the correct element type.
If you can’t add parent elements to the a elements, it’s still possible to use BreadcrumbList. But then you would have to duplicate the URL with a link element inside the a element.
So I was wondering if there is a way to find the element that belongs to a specific String that you know exists on a HTML page as part of an attribute. The example is I know that "Apr-16-2015" is somewhere in an attribute on the HTML page. If I go look for it, it's part of the attribute title:
<a title="Apr-16-2015 5:04 AM"
However, I do not have the information about the exact time, i.e. the "5:04 AM". I was wondering if there is a way to partially search an attribute in order for it to return the full element.
This is my code:
org.jsoup.nodes.Element links = lastPage.select("[title=\"Apr-16-2015\"]").first();
Again, it doesn't work because I did not enter the full attribute title, as given above. My question: "Is there any way to make this selector work by not entering the full information, as I will be unable to have the latter part of the attribute to my disposition?"
You can use it in the following way:
lastPage.select("[title^=\"Apr-16-2015\"]").first();
As described on JSoup Documentation:
[attr^=value], [attr$=value], [attr*=value]: elements with attributes
that start with, end with, or contain the value, e.g. [href*=/path/]
References:
http://jsoup.org/cookbook/extracting-data/selector-syntax