We Keep Coding

Why does DOMPurify with SAFE_FOR_TEMPLATES removes data attributes?

I stumbled across a weird behavior of DOMPurify where data-* attributes get left when sanitizing with the default options, but get stripped out when using the SAFE_FOR_TEMPLATES option. Also, the whole text that contains a template gets stripped out instead of just the template part.
Are these bugs or features? What is the rationale for these?
const dirty = '<span data-foo="bar"> Hello {{ World }} </span>';
console.log(
DOMPurify.sanitize(dirty)
// expected <span data-foo="bar"> Hello {{ World }} </span>
// actual <span data-foo="bar"> Hello {{ World }} </span>
);
console.log(
DOMPurify.sanitize(dirty, { SAFE_FOR_TEMPLATES: true })
// expected <span data-foo="bar"> Hello </span>
// actual <span> </span>
);
<script src="https://unpkg.com/dompurify#2.0.0/dist/purify.min.js"></script>

How can I display additional data when clicking on list item?

I managed to display some mock data (name, email and username) but as you can see I wanted to display more detailed information (city,country,...) on a User by clicking on a row
I am still new to angular and still have problems using the correct syntax.
I am stuck searching the web for hours although I know it should be quite easy...
I thank you all in advance
This is what I have so far :
(this is my first question on stack overflow, I am sorry for mistakes :P )
export class ScrollComponent {
users;
constructor() {
this.users = Array(100)
.fill(1)
.map(_ => {
return {
name: faker.name.findName(),
email: faker.internet.email(),
exMail: faker.internet.exampleEmail(),
userName: faker.internet.userName(),
url: faker.internet.url(),
ip: faker.internet.ip(),
mac: faker.internet.mac(),
pass: faker.internet.password(),
address: faker.address.streetAddress(),
zip: faker.address.zipCode(),
city: faker.address.city(),
country: faker.address.county(),
iban: faker.finance.iban(),
bic: faker.finance.bic(),
bitcoin: faker.finance.bitcoinAddress()
};
});
<cdk-virtual-scroll-viewport itemSize="100">
<li *cdkVirtualFor="let u of users" class="animated slideInUp">
<h2>{{ u.name }} </h2>
<p> {{ u.email }} {{ u.userName }} </p>
</li>
</cdk-virtual-scroll-viewport>

Welcome to SO!
First of all keep in mind, that when using libraries like Angular Material or ng-bootstrap you have components that can already do this. As you are using the CDK, you probably use Angular Material as well? Then you could use the Expansion Panel.
Otherwise as you expected you can achieve this quite easily. There are different ways to do this, depending on your specific needs (i.e. should every list-element be expandable at the same time or only one?). I will give you a hint for what I think is the easiest way and then you can adjust it to your needs.
First thing is to add a boolean to your user-type holding the state of each list-element. Let's call it detailsVisible.
Then you want to add a ClickHandler to the list items which toggles this boolean:
<li *cdkVirtualFor="let u of users" class="animated slideInUp" (click)="u.detailsVisible = !u.detailsVisible">
and then add the the details into some element whichs visibility you control using *ngIf:
<li *cdkVirtualFor="let u of users" class="animated slideInUp" (click)="u.detailsVisible = !u.detailsVisible">
<h2>{{ u.name }} </h2>
<p> {{ u.email }} {{ u.userName }} </p>
<div *ngIf="u.detailsVisible"> additional details in here </div>
</li>
If you only want one element to be allowed to be expanded at the same time you would go for something like this. The idea is to just store the index of the selected element and only show details for this.
<li *cdkVirtualFor="let u of users; let i = index" class="animated slideInUp" (click)="expandedElement = i">
<h2>{{ u.name }} </h2>
<p> {{ u.email }} {{ u.userName }} </p>
<div *ngIf="users.indexOf(u) === expandedElement"> additional details in here </div>
</li>
and then of course add the expandedElement variable to your .ts-file.

how can I correctly retrieve icons for a weather application from openweathermap?

<article>
<br/><br/>
<div class = "resultats">
<label> Weather : </label>
<img src ="http://openweathermap.org/img/w/{{weather.icon}}.png">
<p> {{ weather.weather[0].description }}</p>
<p>Wind speed (meter/sec): {{ weather.wind.speed }}</p>
<span class="temperature">Temperature (Fahrenheit): {{ ((weather.main.temp) -273.15)*1.8+32 }} </span>
<br/>
<span class="temperatureCelsius">Temperature (Celsius): {{ ((weather.main.temp) -273.15) }} </span>
</div>
<br/><br/>
</article>
This code takes all the information but I don't have an icon result. I think it's the URL link which is not write correctly.

In your component file, declare the icon source string with interpolation:
iconSrc: string = `http://openweathermap.org/img/w/${weather.icon}.png`;
Then use the binding in your template:
<img [src]="iconSrc" />
Also you have an extra space after your src attribute in your image tag and removing that would also solve it.

parse array in html with javascript and render a different span each time

How can I make this code more general:
<div class="xx" *ngIf="this.message.address">
<span class="helper" *ngIf="this.message.address">
{{ this.errorMessage.address[0] }}
</span>
<span class="helper" *ngIf="this.message.address[1]">
{{ this.errorMessage.address[1] }}
</span>
</div>
so that this span is rendered multiple times for each array element:
<span class="xx" *ngIf="this.message.address.forEach(x=> x">
{{ this.errorMessage.address[x] }}
</span>
(my attempt above doesn't work by the way)
I could only make it work in the angular component, sth like:
this.message.address.forEach(x=> console.log(x))
but I'm not sure how to parse an array in html and render a different span in each case, which is what I really need

What you are looking for is *ngFor, which can be used in your HTML to iterate over an array of elements.
<div class="xx" *ngFor="let ad of this.message.address">
<span class="helper" *ngIf="ad">
{{ ad }}
</span>
</div>

Show first and last page only when there is more than one page number using jquery or javascript?

I have two buttons like this:
<button class="next_prev" onclick="" id="first_buttons" disabled>{{ pages.first }}</button>
<button class="next_prev" onclick="" id="last_buttons" disabled>{{ pages.last }}</button>
If there is only one page by default the page {{ pages.first }} and {{ pages.last }} store the page number 1 and 1 and show it. But I only want to show these two buttons if page number is great than 1. I get page length like this:
<p> <span>{% get_pages %} {{ pages|length }} pages</span> </p>
Can it be done in jquery or javascript? Thanks

Give the wrapper of the page length number with a class/ID. For example:
<p id="num-of-pages"><span>{% get_pages %} {{ pages|length }} pages</span></p>
If the output of the above code only churns out some numbers only, you can use this jQuery code below to hide the buttons:
var numOfPages = $('#num-of-pages').text();
if (numOfPages <= 1 ){
$('.next_prev').hide();
}
Example fiddle here: http://jsfiddle.net/shodaburp/56kbj/
PS: Just a tip - since .next_prev is quite a generic name and you might have used this class for some other elements, better to give some IDs to those two buttons that you want to hide.
UPDATE (Based on user2032220's second comment):
If {% get_pages %} {{ pages|length }} actually output "Pages 1" then one of the easiest solution is to wrap the page length in another span tag. For example:
<p id="num-of-pages"><span>{% get_pages %} <span>{{ pages|length }}</span></span></p>
Then the code to hide the buttons would be to change:
var numOfPages = $('#num-of-pages span span').text();
Example fiddle: http://jsfiddle.net/shodaburp/56kbj/1/

How about adding a common class to each button, e.g:
<button class="next_prev pageNumberBtn" onclick="" id="first_buttons" disabled>{{ pages.first }}</button>
<button class="next_prev pageNumberBtn" onclick="" id="last_buttons" disabled>{{ pages.last }}</button>
Then hide the buttons if the last page number is 1:
if ($('#last_buttons').html() == '1') {
$('.pageNumberBtn').hide();
}