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);
}
Related
This is my block of code , I want to redirect to a href tab using the # when I click the Next button. Now my code when I click the next button only send me on the Index #. I know this work with Jquery or Ajax... but I do not know how to implement that. That why I'm looking for help. Thanks.
<div class="row" >
<div class="col-lg offset-1 col-lg-10 col-md-12 col-xs-12 col-sm-12">
<div id="wizard" class="adjust" >
<div class="navbar-inner" >
<div class = "container" style="visibility:hidden;" >
<ul>
<li> First</li>
<li> Second</li>
<li> Third</li>
</ul>
</div>
</div>
</div>
<div class="tab-content" >
<div class="tab-pane" id="tab1" >
#Html.Partial("PartialHome_Main")
</div>
<div class="tab-pane" id="tab2" >
#Html.Partial("PartialPage_Main")
</div>
<div class="tab-pane" id="tab3" >
#Html.Partial("PartialP_Main")
</div>
</div>
<div class="row" >
<div id="nextBtn" class="col-xs-12 col-md-12 col-sm-12 col-lg-12 text-center" >
<a class =" next btn2 btn2-primary FinishBtn" href="#" > next <i class="fa fa chevron-right" ></i> </a>
How can I display page content according to the button I click?
I would like that on entering the page it presents the HTML of a button, but if you click on the other button the page loads another HTML.
I made a very simple example, and I would like the page to load the html inside the container class and then click on another button to load the content of the container-fluid class.
Sorry if I was confused.
Thanks!
My simple example
<li class="nav-item">
<a class="Grelha">
<img src="http://icons.iconarchive.com/icons/hopstarter/button/128/Button-Close-icon.png" style="width:30px; height:30px; cursor:pointer" >
</a>
</li>
<li class="nav-item">
<a class="Vquadrado">
<img src="http://icons.iconarchive.com/icons/hopstarter/button/128/Button-Play-icon.png" style="width:30px; height:30px cursor:pointer">
</a>
</li>
<div class="container">
<div class="row text-center text-lg-left tab-pane">
<div class="col-sm-2">
<a href="#" class="d-block mb-4 h-100">
<img class="Images" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
<div class="col-sm-2">
<a href="#" class="d-block mb-4 h-100">
<img class="Images" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="d-flex flex-row flex-wrap" style="margin-left: 3px;">
<div class="d-flex flex-column">
<a>
<img src="https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?auto=format&fit=crop&w=668&q=80" class="img-fluid Vimages">
<div class="VimageText"> Name1</div>
</a>
<a>
<img src="https://images.unsplash.com/photo-1502865787650-3f8318917153?auto=format&fit=crop&w=334&q=80" class="img-fluid Vimages">
<div class="VimageText"> Name1</div>
</a>
</div>
</div>
</div>
You can toggle container with all styles which makes it visible or not.
For example:
display:none;
visibility: hidden;
const button1 = document.querySelector('.toggle-first');
const button2 = document.querySelector('.toggle-second');
const firstContainer = document.querySelector('.first');
const secondContainer = document.querySelector('.second');
button1.addEventListener('click', () => {
firstContainer.style.display = 'block'; // Or visibility: visible or other style
secondContainer.style.display = 'none';
});
button2.addEventListener('click', () => {
secondContainer.style.display = 'block'; // Or visibility: visible or other style
firstContainer.style.display = 'none';
});
<div class="container first">
<h1> First container </h1>
</div>
<button class="toggle-first"> Toggle first container </button>
<div class="container second">
<h1> Second container </h1>
</div>
<button class="toggle-second"> Toggle second contianer </button>
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.(...)
}
I would like to have three single column list-group's on my page and allow the user to select an item from each group. However, the list-groups are all linked and I haven't been able to figure out how to keep them as individual list-groups.
I setup up a quick Plunker link here so you could see what I'm trying to do.
I'm also not sure why each column of lists is offset by the previous column.
Here's the HTML that I'm playing with as I try to figure out how to do this:
<div class="container">
<h3>
Select one from each column.
</h3>
<div>
<h3 class="list-group-item-heading">Select Opp</h3>
</div>
<div id="oppname" class="col-md-4 list-group">
<div class="no-margin">
<a href="#" class="list-group-item">
Aelia
</a>
</div>
<div class="no-margin">
<a href="#" class="list-group-item">
Del Monte
</a>
</div>
</div>
<div>
<h3 class="list-group-item-heading">Select Id</h3>
</div>
<div id="oppid" class="col-md-4 list-group">
<div class="no-margin">
<a href="#" class="list-group-item">
Id: 1724
</a>
<div class="no-margin">
<a href="#" class="list-group-item">
Id: 1675
</a>
</div>
</div>
</div>
<div>
<h3 class="list-group-item-heading">Select Size</h3>
</div>
<div id="oppsize" class="col-md-4 list-group">
<div class="no-margin">
<a href="#" class="list-group-item">
Size: 24
</a>
<div class="no-margin">
<a href="#" class="list-group-item">
Size: 75
</a>
</div>
</div>
</div>
</div>
Thanks for you help!
Yes, its weird that it doesn't work by default groupings.
Here is a solution in Fiddle
<div class="list-group">
One
Two
Three
</div>
<div class="list-group">
One
Two
Three
</div>
<div class="list-group">
One
Two
Three
</div>
and add this sibling js to do the selection like this
$('body').on('click', '.list-group a', function (e) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
and Viola.
I am using angularjs to render my html and using bootstrap 3 to style it. The tabs render correctly, but the images within each tab do not display in a grid, rather, they are outputted one by one in a single column. What am I doing wrong?
<div class="col-sm-12">
<!--Nav Tabs-->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="{{'#' + retailProducts[0].Category}}"
role="tab" data-toggle="tab">
{{retailProducts[0].Category}}
</a></li>
<li ng-repeat="pro in retailProductsMinusFirst">
<a href="{{'#' + pro.Category}}" role="tab" data-toggle="tab">
{{pro.Category}}
</a>
</li>
</ul>
<!--Tab Panes-->
<div class="tab-content">
<div class="tab-pane active" id="{{retailProducts[0].Category}}">
<div class="row">
<div class="col-sm-2">
<a ng-repeat="pro in retailProducts[0].Products" href="#"
class="thumbnail">
<img src="{{pro.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>
</div>
</div>
<div ng-repeat="pro in retailProductsMinusFirst" class="tab-pane"
id="{{pro.Category}}">
<div class="row">
<div class="col-sm-2">
<a ng-repeat="img in pro.Products" href="#" class="thumbnail">
<img src="{{img.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>
</div>
</div>
</div>
</div>
You're repeating the anchors. You need to repeat the column divs. Something like this:
<div ng-repeat="pro in retailProducts[0].Products" class="col-sm-2">
<a href="#" class="thumbnail">
<img src="{{pro.Product.PrimaryPhotoUrl + '?height=100'}}"
alt="Product Photo" />
</a>
</div>