The image path is defined in item.imagePath.
<div *ngFor="let item of itemList">
<div style="background-image: url(item.imagePath)" class="thumb">
<span>{{item.productName}}</span>
</div>
<div>
<p>{{item.productFeature}}</p>
</div>
</div>
style="background-image: url(item.imagePath)"
What is the correct syntax as this does not work?
The styles are updated according to the value of the expression evaluation:
keys are style names with an optional . suffix (ie 'top.px', 'font-style.em'),
values are the values assigned to those properties (expressed in the given unit).
<div [ngStyle]="{'background-image': 'url(' + photo + ')'}"></div>
Try this
<div *ngFor="let item of itemList">
<div class="thumb">
<img src="{{item.imagePath}}" />
<span>{{item.productName}}</span>
</div>
<div>
<p>{{item.productFeature}}</p>
</div>
</div>
Related
I am trying to find the parent of the span element with label First Name and go up the DOM until i get to the input element with class "mat-input-element"
I have attempted with the following xpath, but did not get the result i needed:
//div/div/span[contains(.,'First Name')]/parent::div[#class='add-users']/lib-text-input-v3/div/mat-form-field/div/div/div[1]/input
Any help would be appreciated. Thanks!
You can try with the below xpath.
//span[normalize-space(.)='First Name']/ancestor::div[#class='input-v3']//input[#class='mat-input-element']
Sample HTML: From jsfiddle
<html><head></head><body>
<div class="add-users">
<lib-text-input-v3 errortext="”Error" a="" valid="" first="" name”="">
<div class="input-v3">
<mat-form-field class="mat-form-field">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<input class="mat-input-element" type="text">
<span class="mat-form-field-label-wrapper">
</span>
</div>
</div>
<div class="mat-form-field-underline>
<span class=" mat-form-field-ripple"="">
</div>
<div class="mat-form-field-subscript-wrapper">
<div class="mat-form-field-hint-wrapper">
<div class="mat-form-field-hint-spacer">
</div>
</div>
</div>
</div>. //closes mat-form-field-wrapper class
</mat-form-field>
<div class="input-v3__label"> // same level as input-v3 class
<div class="input-v3__label--text">
<span class="ng-tns-c11-01">First Name
</span>
</div>
</div>
</div> // closes input-v3 class
</lib-text-input-v3>
<lib-text-input-v3>…..
</lib-text-input-v3></div></body></html>
I have a problem with Anguar8 and ngIf:
I have a code that creates div which loads some images and their details to a page from a json with conditon:
HTML Code:
<div class="row" >
<div class="col-md-2 col-6 col-sm-4" style="margin-bottom: 1em;" *ngFor="let item of product; let i=index"> <br>
<div class="box" *ngIf="i>35">
<img [src]="item.photo" alt="image slide" style="display: block; width: 100%;">
<div class="text-center">
<h6>{{item.name}}</h6>
<h6>MRP : ₹ {{item.price}}</h6>
</div>
</div>
</div>
</div>
The problem is, that angular creates an empty div with this comment in it:
<div _ngcontent-oio-c3="" class="col-md-2 col-6 col-sm-4" style="margin-bottom: 1em;"><br _ngcontent-oio-c3=""><!--bindings={
"ng-reflect-ng-if": "false"
}--></div>
You may write *ngFor="let item of product | slice:0:35;".
Reference https://angular.io/api/common/SlicePipe
There are two options:
1.You can filter the list using pipe to avoid
2.You can try this should not create any template
<div *ngIf="i>35; else noData">
{{data}}
</div>
<ng-template #noData>
</ng-template>
I am following one of the bootstrap's template and I am dealing with the next problem:
Template
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="img/portfolio/fullsize/1.jpg">
<img class="img-fluid" src="img/portfolio/thumbnails/1.jpg" alt="">
<div class="portfolio-box-caption">
<div class="project-category text-white-50">
Category
</div>
<div class="project-name">
Project Name
</div>
</div>
</a>
</div>
My problem is the following:
`href` in the `<a>` seems to shows in a modal the image in a bigger size, but I am trying to use it as a variable.
I have tried to use ng-ref="myvariable" but it does not happen (either an error)
How could I do it?
Maybe you should do the next:
...
<a class="portfolio-box" href={{ your-variable}}>
...
Value of "your-variable" should be in the component of this template.
I have dropdown with list of people results.
Each result contain some details.
The demand is that click in each <div class="list-item clearfix">will redirect the user to specific change ' unless the user click on some inner span ( <span class="locationJob">) which redirect him to another page.
<div class="list">
<g:each in="${peopleList?.getResults()}" var="doc">
<div class="list-item clearfix">
<g:link controller="connection" action="details" id="${ApplicationUtils.encodeString(doc.ref?.toString())}">
<div class="avatar">
<span class=""><img src="${doc.avatarUrl}" width="41" alt="Avatar" class="img-circle"/></span>
</div>
<div class="info">some text</div>
<div class="row no-margin body highlight-search-term">
<span class="locationJob">
<g:link controller="profile" action="show" id="${ApplicationUtils.encodeString(profExperienceCompanyIds[index]?.trim())}" class="professional-exp-highlight">
{currentCompany}</g:link>
</div>
</g:link>
</span>
</div>
</g:each>
</div>
I understood that it's not correct to write inside .... So what should I do?
You can replace inside g:link, use input type with onclick method to run remoteFunction:
http://grails.github.io/grails-doc/2.2.1/ref/Tags/remoteFunction.html
I need extract value of attribute src from this HTML.
For example from this HTML:
<div class="css_telo js_telo">
<div class="css_teloV">
<div class="css_vlavo">
<div class="css_info css_zena">
<a class="css_foto big_foto" href="" title="Fotka: endoskopia"><span><img id="PPAsrc" src="http://m3.aimg.sk/profil/v_08c261dabb82e3eaded3e54c28c49e35.jpg?13922246241392224624" width="176" height="220" alt="Fotka: endoskopia" /></span></a>Zmeniť fotku
</div>
<div class="por_0">
<div class="css_album css_menubox edit c_prazdne" id="m_fotoalbumy">
<h3>Fotoalbumy<small> (0)</small></h3>
</div>
</div>
<div class="por_1">
<div class="css_album c_video xcss_akt css_menubox edit" id="m_videoalbumy">
<h3>Videoalbumy<small> (0)</small></h3>
</div>
</div>
<div class="por_2">
<div class="css_priatelia css_menubox edit" id="m_userFriends">
<h3>Priatelia<small> (0)</small></h3>
</div>
</div>
</div>
I need get this:
http://m3.aimg.sk/profil/v_08c261dabb82e3eaded3e54c28c49e35.jpg?13922246241392224624
I tried this XPATH expression:
//div[#class="css_telo js_telo"]/div[#class="css_teloV"]/div[#class="css_vlavo"]/div[#class="css_info css_zena"]/a/span/img/#src
But it not work. Where is problem?
it seem like its the only src on the page, you can simply do:
//img/#src
or more specific:
//img[#id="PPAsrc"]/#src