I want to generate unique variable share in *ngFor so I can open single modal.
<li *ngFor="let gallery of galleries; let i = index">
<div class="gallery card" >
<div class="share-fab" (click)="share = !share" [class.open]="share">
<div class="option email" [class.open]="share"><i class="material-icons">email</i></div>
<div class="option download" [class.open]="share"><i class="material-icons">file_download</i></div>
<div class="option facebook" [class.open]="share"><i class="material-icons">whatshot</i></div>
<div class="option twitter" [class.open]="share"><i class="material-icons">notifications_none</i></div>
<div class="close" [class.open]="share"><i class="material-icons cross">close</i></div>
</div>
</div>
</div>
</li>
I appreciate any help...
You should add a property share to your gallery object, for instance:
export class Gallery {
//...
public share: boolean = false;
}
In your template you can do something like this:
<li *ngFor="let gallery of galleries; let i = index">
<div class="gallery card" >
<div class="share-fab" (click)="gallery.share = !gallery.share" [class.open]="gallery.share">
<div class="option email" [class.open]="gallery.share"><i class="material-icons">email</i></div>
<div class="option download" [class.open]="gallery.share"><i class="material-icons">file_download</i></div>
<div class="option facebook" [class.open]="gallery.share"><i class="material-icons">whatshot</i></div>
<div class="option twitter" [class.open]="gallery.share"><i class="material-icons">notifications_none</i></div>
<div class="close" [class.open]="gallery.share"><i class="material-icons cross">close</i></div>
</div>
</div>
</div>
</li>
Another option would be to create a variable in your component where you keep track of which galleries should be active. Pretty sure you will figure out how to do that yourself :)
Related
I have a modal and inside it i have a stepper which is connected to some links, what i want to do is whenever a person clicks on the link the content of that link should be displayed which are defined inside ngcontainers each link have contents of their own and when their respective link is clicked the content of that ngcontainer should only display!
Here's what i am doing now but how do i alter the ngIf in the first parent ngcontainer when i would have multiple ngcontainers for the links?
<div>
<div class="modal-header lead">
Generate Reports
</div>
<div>
<ul class="timeline w-75">
<li class="bg-info">
<div class="timeline-item">
<span class="timeline-icon material-icons text-info">brightness_1</span>
<span class="text-dark">Select Report</span>
</div>
</li>
<li [ngClass]="isSecondStep?'bg-info':'bg-secondary'">
<div class="timeline-item">
<span class="timeline-icon material-icons"
[ngClass]="isSecondStep?'text-info':'text-secondary'">brightness_1</span>
<span class="text-dark">Generate Report</span>
</div>
</li>
</ul>
</div>
<ng-container *ngIf="!isSecondStep">
<div>
<h4><a (click)="isSecondStep=!isSecondStep" class="text-link text-main">Head/Approver Report</a></h4>
<a>A report containing list of all departments along with it's heads and approvers.</a>
</div><br>
<div>
<h4>Student Dues Application Status Report</h4>
<a>A report containing list of all departments along with it's head and approvers.</a>
</div><br>
<div>
<h4>Student Details Report</h4>
<a>A report containing all relevant details pertaining to students registers in this institute for the current</a>
</div><br>
<div>
<h4>Staff/Faculty Details Report</h4>
<a>A report containing all relevant details pertaining to staff/Faculty of your institute.</a>
</div><br>
<div>
<h4>Dues Details Report</h4>
<a>A report containing the details related to total accumulated dues.</a>
</div><br>
</ng-container>
<ng-container *ngIf="isSecondStep">
<div>
<h4><a class="text-main">Head/Approver Report</a></h4>
</div><br>
<div class="text-left">
<label class="mt-1">Scope</label>
<div class="row">
<div class="col-sm-6 radio">
<label class="text-secondary vertical-center">
<input type="radio" class="mr-1" name="scope">Institute</label>
</div>
<div class="col-sm-6 radio">
<label class="text-secondary vertical-center">
<input type="radio" class="mr-1" name="scope" checked>Department</label>
</div>
</div>
</div><br>
<div>
<label class="mt-1 text-left">Department</label><br>
<select>
<option [ngValue]="null">Select Department</option>
<option [ngValue]="dept.id" *ngFor="let dept of departments">{{dept.name}}</option>
</select>
</div><br>
<div class="d-flex justify-content-around">
<div class="p-4">
<span class="material-icons text-main">get_app</span>
<div class="text-link text-main text-left">Download</div>
</div>
<div class="p-4">
<span class="material-icons text-main">print</span>
<div class="text-link text-main text-left">Print</div>
</div>
<div class="p-4">
<span class="material-icons text-main">clear</span>
<div class="text-link text-main text-left">Close</div>
</div>
</div>
</ng-container>
</div>
In my html, there are 2 tabs once you click on a tab the other tab is hidden, while the one that is clicked on is shown, It's a normal javascript tab interface.
I have a gallery plugin, it shows the gallery of the image in the first div, but it doesn't work for the image in the second div, even after i have hidden the image in the first div and it works based on the id as light gallery, Please why doesn't it show the gallery of the second image and how can i solve this issue
This is my html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<li id="tabs1" onclick="showStuff(this)" class="active pic-list"><a href="#all" > All (35)</a></li>
<li id="tabs2" onclick="showStuff(this)" class="pic-list"></i></li>
<div id="tabs-1" class="tabContent" style="display: block;">
<div class="row" id="lightgallery">
#if(isset($images))
#foreach ($images as $image)
<div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
<div class="img-con" id="{{$image->id}}">
<a href="">
<img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
</a>
<div class="img-select">
<div class="new gvs-title">
<span style="color: #333333;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
<div id="tabs-2" class="tabContent">
<div class="row" id="lightgallery">
#if(isset($images))
#foreach ($images as $image)
<div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
<div class="img-con" id="{{$image->id}}">
<a href="">
<img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
</a>
<div class="img-select">
<div class="new gvs-title">
<span style="color: #333333;">{{$image->description}}080808008080 <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
This is my jquery code
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
I solved this by basically calling two light gallery functions and changing the id of the 2 divs i.e lightgallery and lightgallery1
$(document).ready(function(){
$('#lightgallery').lightGallery();
$('#lightgallery1').lightGallery();
});
I am building a web App using Angular 2 and want to loop the button with the list items but outside of list items, how can I get the functionality using *ngFor, please help.
My HTML code:
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)" *ngFor="let buying of buy">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right" >
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6"> <-----I WANT TO LOOP THIS BUTTON
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
Try this code snippet. I have created a div tag above linking both content and then added the loop inside that, so it will refer to both elements (item and button).
<div *ngFor="let buying of buy">
<div class="col-xs-6">
<a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)">
<div class="pull-left" style="max-width:350px">
<h5 style="color:white">{{buying.names}}</h5>
<p style="color:white">{{buying.desc}}</p>
</div>
<div>
<span class="pull-right">
<img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
</span>
</div>
</a>
</div>
<div class="col-xs-6">
<button class="btn btn-primary ; pull-right">Add To Cart</button>
</div>
</div>
I have three columns of equal width of col-md-4, however the middle one has an ng-show set on it and sometimes will not be displayed. Right now when friend requests come in and the right most col-md-4 comes up, it is showing up in the middle when the middle one is still hidden. How do I still have the middle col-md-4 chatWindow take up space even when it is hidden?
<div class="row">
<div class="col-md-4 friendListWindow" ng-init="getFriends()">
Friends List
<form ng-submit='addFriend(username)' name='addFriendForm'>
<input type='text' name='username' ng-model='username' required/>
<input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'>
</form>
Online Friends
<ul>
<span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'>
<li ng-if='friend.online'>
<span class='friendService'>{{friend.service}}</span>
<span class='friendName'>{{friend.name}}</span>
</li>
</span>
</ul>
</div>
<div class="col-md-4 chatWindow" ng-show="activeFriend">
<div class="activeFriendBox">Chat with {{activeFriend.name}}</div>
<div class="messages">
<div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
<span>{{message.from}}</span>
<span>{{message.message}}</span>
<span>{{message.timestamp}}</span>
</div>
</div>
<div class="sendMessage">
<form ng-submit='sendMessage(messageText)' name='messageForm'>
<input type='text' name='message' ng-model='messageText' required/>
<input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
</form>
</div>
</div>
<div class="col-md-4 friendRequestsWindow">
<div class="friendRequests">
<ul>
<li ng-repeat='friend in friendRequests track by $index'>
<span>New friend Request from: {{friend}}</span>
<button ng-click='acceptFriendRequest(friend)'>Accept</button>
<button ng-click='ignoreFriendRequest(friend)'>Ignore</button>
</li>
</ul>
</div>
<div class="acceptedFriendRequests">
<ul>
<li ng-repeat='friend in acceptedfriendRequests track by $index'>
<span>{{friend}} accepted your friend request</span>
<button ng-click='acknowledgeFriendRequest($index)'>Acknowledge</button>
</li>
</ul>
</div>
</div>
</div>
You can use ng-show in the col content instead of the col itself
Instead of
<div class="col-md-4" ng-show="xxx">content</div>
Use
<div class="col-md-4">
<div ng-show="xxx">content</div>
</div>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
<input type="text" id="message" param="1" placeholder="chat here.." />
This is element inside the div which is working fine outside the javascript
here is the case after appended element
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
Now when I do
$('#message').keypress(function(event){
alert('WORKING');
});
alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?
Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.
$("div").on( "keypress", "#message", function(){
alert( "working!" );
});
where div is the selector of a parent of #message.
here work fine;
https://jsfiddle.net/mig1098/0rgd3ppu/
var id='one',img_url='http';//test values
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
$('#message').keypress(function(event){
alert(event.keyCode);
});