I am trying to create a menu dynamic for my ecommerce and i got this error:
Error: mat-menu-trigger: must pass in an mat-menu instance!
Did anyone know how to solve this error.
How can i do [matMenuTriggerFor] and #main_menu dynamic?
I have multiple shops in my list! Its simple as that.
Only need these two attr in dynamic format.
<button mat-button [matMenuTriggerFor]="i" *ngFor="let shop of shopey; let
i=index">{{shop.name}}
</button>
<mat-menu #main_menu="matMenu">
<ng-container *ngFor="let shop of shopey">
</ng-container>
</mat-menu>
Try the following...
Move your *ngFor loop to a span wrapper
<span *ngFor="let shop of shopey; let i=index">
And then change #main_menu to #i
<span *ngFor="let shop of shopey; let i=index">
<button mat-button [matMenuTriggerFor]="i" >{{shop.name}}
</button>
<mat-menu #i="matMenu">
<ng-container>
this is a test of the container
</ng-container>
</mat-menu>
</span>
Stackblitz
https://stackblitz.com/edit/angular-wu6dl4?embed=1&file=app/menu-overview-example.ts
Related
When I have used the array directly (without making it part of the object) then it's working fine as expected,
below is the code,
<span class="tagSpan" v-else-if="row.label == 'Tags'">
<span v-if="aTags.length" v-for="(tag, tagIndex) in aTags" class="input-tag tagSpan">{{tag}}
<span class="close-x" #click="aTags.splice(tagIndex, 1)">❌</span>
</span>
<input v-on:keyup.186="onTagAdd(rowIndex)" type="text" class="form-control form-control-sm col-3" :disabled="!row.editable" v-model="row.value" >
</span>
Now I optimized the code and made aTags is an item of oDyData object and changed the code as below
<span class="tagSpan" v-else-if="row.label == 'Tags'">
<span v-if="oDyData.aTags && oDyData.aTags.length" v-for="(tag, tagIndex) in oDyData.aTags" class="input-tag tagSpan">{{tag}}
<span class="close-x" #click="oDyData.aTags.splice(tagIndex, 1)">❌</span>
</span>
<input v-on:keyup.186="onTagAdd(rowIndex)" type="text" class="form-control form-control-sm col-3" :disabled="!row.editable" v-model="row.value" >
</span>
My function for removing tag '#click="aTags.splice(tagIndex, 1)' is not working as before, It removes the item from the array of the object but UI is not getting updating, I have also cross-checked in vue development components and the array is getting updated but UI is not getting rerendered (updating) until any other change in UI (It got changes if I enter something in input or click somewhere). Below is the screenshot for the same.
How to solve this?
<span class="close-x" #click="aTags.splice(tagIndex, 1)">❌</span>
use #click="oDyData.atags.splice(tagIndex,1)
Because you are trying to reach aTags object which is undefined because you are getting this object from oDyData. O this might be the problem in your code. Also you have to use :key while using v-for property.
I am trying to loop trough an array of objects that have an array of "dependent"-objects in them. For every dependent there is an array of, up to three ENUMS, AssignmentRoles. So for every AssignmentRole I want to display some html. My problem is I am displaying all three of the AssignmentRoles for every dependent even though they dont have every AssignmentRole in their AssignmentRole Array. This is what I am working with, and trying to do:
The object:
and this is the html:
<tr *ngFor="let assignment of filteredAssignments">
<td>
<ul class="dependent-entities" *ngFor="let dependent of assignment.DependentEntities">
<li class="filterable">
<span class="assignment-roles">
<ng-container *ngIf="dependent.AssignmentRoles[0] == AssignmentRole.HRResponsible">
<span class="hr-responsible"
HR
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="HRResponsible">
</ng-container>
<ng-container *ngIf="dependent.AssignmentRoles[1] == AssignmentRole.SoFContact">
<span class="sof-contact">
SF
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="SoFContact">
</ng-container>
<ng-container *ngIf="dependent.AssignmentRoles[2] == AssignmentRole.GeneralContact">
<span class="general-contact">
G
</span>
<input data-val="true"
name="AssignmentRole[0]"
type="hidden"
value="GeneralContact">
</ng-container>
</span>
</li>
</ul>
</td>
</tr>
*Edit, I placed the spans in ng-containers and removed the ngFor. Here is an image of how it looks. The first row is correct, the second should not be empty, the third is correct and the fourth should not be empty... So every other one is empty..
I got it working by removing the index e.g *ngIf="dependent.AssignmentRoles == AssignmentRole.GeneralContact"
I have one check box and two links with same classes & same Div.During the automation testing using protractor, i want to click on check box but it click on Links.
i am writing this code but its not working, please provide a solution.
Code:
element(by.id('Remember')).click();
[1
please find HTMl code:-
<div class="input-field">
<div class="pas_rembr">
<input name="remember" id="Remember" class="css-checkbox ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required" ng-model="rememberMe" type="checkbox" ng-required="true" required="required">
<!-- <label for="Remember" class="css-label">I agree with the <a class="text_link" target="_blank" ng-href="{{baseUrl}}terms-conditions">Terms & Conditions</a>.</label> -->
<label for="Remember" class="css-label">I have read and I agree with <a class="text_link" target="_blank" ng-href="/lmd/terms-conditions" href="/lmd/terms-conditions">Terms and Conditions</a> and the <a class="text_link" target="_blank" ng-href="/lmd/privacy" href="/lmd/privacy">Privacy Policy</a> of this site.</label>
</div>
<span class="errorForm ng-hide" ng-show="(memberForm.remember.$dirty || submitted) && ((memberForm.remember.$error.required))">
<span class="errorForm ng-scope ng-hide" ng-show="memberForm.remember.$error.required" translate="TERAMS_CONDITION_IS_REQUIRED">Terms and condition is required</span>
</span>
</div>
Try this:-
var el = element(by.css('label[for="Remember"]'));
browser.actions().mouseMove(el, {x: 20, y: 3}).click().perform();
For your tests, the CSS selector would be
element = $$('label.css-label > a:nth-child(2)');
This should be able to click on the second a child of the label element.
I do have popup where are three dropdowns, ids are unique
with each popup generation:
The first element:
<a aria-required="true" class="select" aria-disabled="false" aria-
describedby="5715:0-label" aria-haspopup="true" tabindex="0" role="button"
title="" href="javascript:void(0);" data-aura-rendered-by="5733:0" data-
interactive-lib-uid="10">Stage 1 - Needs Assessment</a>
While I'm able to identify the element above by simple xpath="//*[#class='select'][1]", the other two, which look same to me (example below), can't be identified by index like //*[#class='select'][2], tried 'following' without success, but I may be not correct with syntax.
Example of dropdown element I'm unable to locate..
<a aria-required="false" class="select" aria-disabled="false" aria-
describedby="6280:0-label" aria-haspopup="true" tabindex="0" role="button"
title="" href="javascript:void(0);" data-aura-rendered-by="6290:0" data-
interactive-lib-uid="16">--None--</a>
Any ideas what am I missing?, except advanced xpath knowledge..
Thank you!
//*[#class='select'][2] will return you required node only if both links are children of the same parent, e.g.
<div>
<a class="select">Stage 1 - Needs Assessment</a>
<a class="select">--None--</a>
</div>
If links are children of different parents, e.g.
<div>
<a class="select">Stage 1 - Needs Assessment</a>
</div>
<div>
<a class="select">--None--</a>
</div>
you should use
(//*[#class='select'])[1]
for first
(//*[#class='select'])[2]
for second
I have a complected structure of the page and I have no idea how to find the element...
The page contains folders that are created by a user, I need to create a folder and then to click on it, but I have no idea how to find the element that I've created. The structure look like this:
<div class="row-text" style="width: calc(100% - 84px);">
<span class="row-item-name">
<span class="row-item-link">
<a class="grid-row-element-name">Eclipse111</a>
</span>
<span class="row-item-actions hover-child">
<a>Share</a><span> | </span><a watchdox-rename="name" watchdox-save-func="rename(element, name)" class="rename-link"><span translate="">Rename</span></a>
</span>
</span>
<br>
<span class="row-meta-data">
<span class="creation-date-formatted">Today at 10:30 | </span>
<span class="row-email">orgadmin#mailinator.com</span>
</span>
</div>
<div class="grid-row-buttons">
<div class="row-tools">
<div class="btn-group dropdown" uib-dropdown="">
<button type="button" class="btn btn-default uib-dropdown-toggle clear-button dropdown-toggle" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
<span class="icon-wd-material-menu"></span>
</button>
<ul uib-dropdown-menu="" class="dropdown-menu-highZ contextual-menu dropdown-menu" role="menu">
</ul>
</div>
</div>
</div>
The class="grid-row-element-name" contains the name of the folder that was created (each folder has its own )....
I have no idea how to continue with the testing cause I am not able to click on the folder....
Thank you.
try the following, since you said "grid-row-element-name" has the folder name then trying using that class name in cssSelector.
List<WebElement> elements = driver.findElements(By.cssSelector("a.grid-row-element-name"));
String folderName = null; //name of the folder which you want to click.
for (WebElement ele : elements) { //Iterate over the loop
if (ele.getText().equalsIgnoreCase(folderName)) {
ele.click();//once the folder you want is found go for the click.
}
}
//OR
//To click on the last element try this
elements.get(elements.size()-1).click();
Since you are looking for an element with specific text that you have created (the folder name), I would approach this by looking for an A tag that contains the folder name.
BTW, you didn't tag your question with a language so the below is Java. You should be able to convert it easily to another language by just reusing the XPath, if needed.
String folderName = "Eclipse111";
// create folder
WebElement folder = driver.findElement(By.xpath("//a[text()='" + folderName + "']"));