In the table(table) i have loaded objects from API. When i click on "osavotjad" link i am redirected to another component where i want to load data from selected object. How can i pass id of object what is on the same line with a clicked link.
<div class="card-body fixed-content">
<div *ngIf="futureEvents">
<ul>
<li *ngFor="let event of futureEvents">
<span class="name">{{event.eventName}}</span>
<span class="name">{{event.place}}</span>
<span class="date">{{event.eventDate | date:'dd.MM.yyyy'}}</span>
<span><a routerLink="/participants">Osavoitjad</a></span>
<span (click)="delete(event.id)"><img src="assets/remove.svg" class="deleteBtn"></span>
</li>
</ul>
</div>
There are many ways to do that. The easiest solution will be using the router param or query params.
[routerLink]="[participants, event.id]" (this is using parameter)
Or you can use query param in similar way.
Related
I have a bunch of li elements and when the user clicks them, it opens a more detailed view of those elements in a different component.
However, it requres TWO clicks to show the data I want to show.
When the user click ONCE the component opens up with the empty view template.
When the user clicks AGAIN it then shows the populated data.
Can I not just put this in one anchor tag that routes me to me detailed view and emits the click event in one?
Is there a preferred method or better way to do this?
<ul>
<li *ngFor="let favorite of sortedFavorites; let i= index">
<a class= 'clickMe' (click)= "openContact($event, i)" routerLink= "/details">
<div *ngIf= "favorite.isFavorite">
<img class="smallImage" onerror="this.onerror=null;this.src='User Icon Small.png';"
src={{favorite.smallImageURL}} />
<h3><img src="Favorite — True.png">{{ favorite.name }}</h3>
<br>
<p>{{ favorite.companyName }}</p>
<hr>
</div>
</a>
</li>
</ul>
EDIT: Some people are suggesting that I use reslove guards to fetch the data before it is populated, but I am only pulling this from a local JSON file and passing it between my components.
you use click event for both. navigate to details page via programmatically using the router
this.router.navigate(['path']);
whatever process do in openContact() and then redirect on the details page.
add into constructor private router: Router
In my application there are couple of rows and in each row last column, there is option of 'Edit'|'Delete' and when click on Edit, on the same place we get option for 'Update'|'Cancel', I successfully clicked on edit, made some changes and when I try to click on update it throws an error:
more than one element found with locator by.css(..) as both have same code
<td>
<div class="biometricActionCln ng-hide" ng-show="!list.isEditable" style="">
<a ng-click="editBiometrics(list, $index)">
**<i class="fa fa-pencil-square-o">**
</i> Edit</a>
<span> | </span>
<div ng-show="list.isEditable" class="" style="">
<a ng-click="manageEditBiometric(editBiometric, 'Modify', list.biometricId)">
**<i class="fa fa-pencil-square-o">**
</i> Update</a>
<span> | </span>
</div>
</td>
Kindly let me know how do I click on update link.
Below are different ways of handling multiple elements.
accessing multiple elements with index:
element.all(by.css('.selector'))[0]
element.all(by.css('.selector'))[1]
accessing multiple elements by calling methods:
element.all(locator).first();
element.all(locator).last();
accessing multiple elements through callback function:
element.all(by.css('.selector')).then(function(elements) {
// elements is an array of ElementFinders.
});
my first post. I am writing e2e tests in protractor using page objects with javascript/nodejs. Have read many SO posts on this, read Julie's pages as well as studying ProtractorPageObjects.
All of the tables in the application have the same structure. The only difference is in an attribute: data-row-type can be one of 10 possible values like 'job', 'node', 'rack', etc...
Obviously I can pass in the string to a method and switch in the method to construct the correct selector. Based on comments in ProTractorPageObjects
I am trying NOT to write the code that way. Am I being silly here, just use the string and get on with it or is there a way to create such a method without having to pass in the string?
In chapter 5 of the ProTractorPageObjects, in the columns.js file it is mentioned not to use a pattern where a string is passed in to determine what is looked for.
For example:
<div id="ee54a74e-17b8-4380-bbd8-2a5087bad7c9" class="tableRow escale-table-row-selected" data-row-type="ipAddress" data-qa-row-number="1">
<div class="tableCell">
<span class=""></span> ips-172-20-143-20-21
</div>
<div class="tableCell">
<span class=""></span> UP
</div>
<div class="tableCell">
<span class=""></span> Yes
</div>
...
Another Table:
<div id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9" class="tableRow escale-table-row-selected" data-row-type="fileSystem" data-qa-row-number="0">
<div class="tableCell">
<span class=""></span> card-view<div><span class="fa fa-square success fileSystemIndicator"></span><span id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9-share" class="fa fa-square fileSystemIndicator success"></span><span id="6f529383-c0f3-49b7-9ccb-c8db2b0c75a9-accessRule" class="fa fa-square fileSystemIndicator success"></span></div>
</div>
<div class="tableCell">
<span class=""></span> UP
</div>
<div class="tableCell">
<span class=""></span> Yes
</div>
......
It is perfectly okay to construct your selector based on a string value that is passed into a method and then used to match a div element's data-row-type attribute. data-row-type attribute in your case is quite a "data-oriented" attribute (well, compare it to, for instance, style attribute - this one is very much UI/style oriented and is always a poor choice to rely your locators on) and uniquely distinguishes/defines the page blocks on a page.
Example implementation:
function getTable (tableType) {
return element(by.css("div[data-row-type='" + tableType + "']"));
}
Sample usage:
getTable("ipAddress");
getTable("fileSystem");
I have multiple flow-btn elements on my page. There is a list of items that the user can upload single files directly in to (individually) or they can choose to upload multiple files which will automatically populate the list. Everything is inside a flow-init.
A bit like this pseudo-code example:
<div flow-init>
<div flow-btn>Upload multiple images to fill the list</div>
<h3>The list</h3>
<ul>
<li ng-repeat="item in items">
<div flow-btn flow-single-file>Upload an image for this item</div>
<img flow-img="item.flowFile">
</li>
</ul>
</div>
I need to identify which flow-btn was used within the list so that I can display the uploaded image thumbnail at the correct point. Basically I think I want access to the item from a flow event.
Note: The list loop data is defined by other data, so I can't just loop through $flow.files to create my list.
How can I do this?
Should I create a new flow-init instance for each loop item? Overkill?
Edit: Alternatively, perhaps I can open the multiple flow-btn from my controller programmatically rather than having a flow-btn for each item?? In which case I could stash the current item in the controller.
Edit. 08.2015
I have checked this once again under firefox and input element appears to be hidden not inside event.srcElement, but in event.originalTarget. I have updated code and plnkr.
Well, as you probably know ng-flow provides events. To those events you can pass your functions and inject them with $event object, which has reference to specific button you have clicked. In your case you could listen for flow-files-submitted and based on $event.srcElement do appropriate actions like this:
HTML
<div flow-init flow-files-submitted='handleUpload($files, $event, $flow)'>
<div flow-btn>Upload multiple images to fill the list</div>
<h3>The list</h3>
<ul>
<li ng-repeat="item in items">
<div flow-btn flow-single-file>Upload an image for this item</div>
<img flow-img="item.photo" ng-if='item.photo'>
</li>
</ul>
</div>
JS
$scope.handleUpload = function($files, $event, $flow) {
if(($event.srcElement !== undefined)&&($event.srcElement !== null))
var input = angular.element($event.srcElement)
else
var input = angular.element($event.originalTarget)
if (input.scope().item) {
if(input.scope().item.photo) {
input.scope().item.photo.cancel();
}
input.scope().item.photo = $files[0];
} else {
for(var i = 0; i < $files.length; i++) {
$scope.items.push({photo: $files[i]});
}
}
};
Check out this Plunker for solution to your problem
I'm trying to rewrite a live search feature using AngularJS, but can't find how I can grab the currently clicked item in the list. See below:
<div id="searchResults" ng-show="speaker.list.length > 0">
<ul ng-repeat="person in speaker.list">
<li ng-click="speaker.updateFields()">{{person.name}}</li>
</ul>
</div>
In my speaker.updateFields() method, how do I reference person.name? Is there a different way this should be done?
Thanks.
Pass it in!
<li ng-click="speaker.updateFields(person.name)">{{person.name}}</li>
And the JS
$scope.updateField = function(name) {
//console.log(name)
}
When you use ng-repeat each item is assigned an index value as well.
<div ng-repeat='person in persons'>
{{person.$index}}
</div>