am working on tile base interface design using angular2,Tile name and image click events are fetching details from db.Now iam trying to fetch details when click on article div.please check my code
<ng-container *ngFor="let item of itemdetails;">
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="col-item">
<figure class="photo">
<a [routerLink]="['/productdetails',item.ItemID]">
<img [src]="item.ItemImage1" class="img-responsive center-block" alt="Product Image" />
</a>
</figure>
<div class="info">
<div class="row" style="margin:0px;">
<div class="ItemDetails ellipseArea">
<a [routerLink]="['/productdetails',item.ItemID]">
<span class="Subtext">{{item.ItemDescription}}</span>
</a>
</div>
</div>
</div>
</article>
</div> <!--col ends-->
</ng-container>
template
<article class="col-item" (click)="fetchDetails(item)">
component
fetchDetails( _item ) {
this._http.(...)
}
Related
I have an html page that contains "links" to many sections of the page. I'm using a single page layout where if a link is clicked, you are not actually taken to a new page. Instead you are taken to the section of the page that you clicked on in the nav bar. I have a section for 6 images, each with a caption. I need the images to be in 2 rows with 3 images per row without using a table.(each image with its caption underneath) But I also need them to be responsive, so if the size of the browser is minimized then the images stack up on each other (caption still there). I tried using padding and margins but I wasn't able to get it to work so I don't have any CSS to post but I do have my HTML code. Can someone please help me out? Here is my code:
<div class="allimagesgallery">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption">CAPTION.</div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image4.jpg">
<img id="galleryimages" src="images/image4.jpg">
</a>
<div class="caption">CAPTION</div>
<a href="images/image5.jpeg">
<img id="galleryimages" src="images/image5.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image6.jpeg">
<img id="galleryimages" src="images/image6.jpeg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
it would help us if we knew what your css in "allimagesgallery" looked like.
A little reformatting like the code below might help:
/*-----css---------*/
.imagesgalleryrow img{
display: inline-block;
}
<!-- /// HTML \\\ -->
<div class="allimagesgallery">
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
I've been trying to get the data.login of the data item on which user has clicked the avatar image. The HTML code is below.
I tried everything i could on the web but couldn't make it work.
How to get the current data.login to the corresponding .TS file.
Code:
<ul *ngFor="let data of uarr" class="list-unstyled" >
<li>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<a routerLink="/" >
<img class="github-avatar" src="{{data.avatar_url}}" >
</a>
<div class="caption">
<h3 class="text-center">{{ data.login }}</h3>
</div>
</div>
</div>
</li>
Thank You.
Use Click Event
<ul *ngFor="let data of uarr" class="list-unstyled" >
<li>
<div class="col-sm-6 col-md-3">
<div class="thumbnail" (click)="onClick(data.login)">
<a routerLink="/" >
<img class="github-avatar" src="{{data.avatar_url}}" >
</a>
<div class="caption">
<h3 class="text-center">{{ data.login }}</h3>
</div>
</div>
</div>
</li>
TS
onClick(login){
console.log(login);
}
I have a list of media cards. At a time 6 cards are displayed and to view next set of media cards I need to swipe right/left. How can I do this using angular ngtouch.
This is what I have for html
<div class="media people-card-media col-xs-12" ng-repeat="item in heroes">
<div class="media-left ">
<div class="person-photo presence" >
<img class="media-object list__photo img-circle" ng-src="{{item.photo}}" />
</div>
</div>
<div class="media-body list__body">
<div class="people_name_title">
<h4 class="media-heading title">{{item.name}}</h4>
</div>
</div>
<div class="media-right media-middle contacts-chat-call flex-it-align-top">
<a style="margin-right: 10px;">
call
</a>
</div>
</div>
here is the plunker
http://plnkr.co/edit/XRyEwpVNXiaejojm8lEY?p=preview
any help appreciated
https://github.com/revolunet/angular-carousel solved my problem. You turn any ul li elements to carousel
I want to use the media bottom bootstrap component but the text is top aligned despite adding the media-bottom class. Is this component broken or something. Any clean workaround?
Thanks
fiddle: https://jsfiddle.net/2yrrf6zx/2/
HTML code:
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
You are putting the media-bottom on the image and not on the text. If you use the following HTML, it should work as expected:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body media-bottom">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
Fiddle
Hello i would like to know if it is possible to filter a section with a specific class ? here is my code
<section class="portfolio_masonry" >
<div class="row isotope_portfolio_container">
<div class="new col-sm-4 col-md-4">
<div class="portfolio_item">
<a href="images/portfolio/lenses.jpg" class="lightbox">
<img src="images/portfolio/lenses.jpg" alt="Community & Non-Profit" >
<div class="overlay">
<div class="desc">
<h4>Lenses to Their World</h4>
<span class="cross"></span>
</div>
</div>
</a>
</div>
</div>
and the list gose on i need to filter this to not show all images in the start of the section but just specific calss images? thank you in advance
Yes you can using ('.div').filter('.yourclass')