I have several hyperlinks on the page
<a href="#" class="list-group-item list-group-item-action active" routerLink='/route1' >First Link</a>
<a href="#" class="list-group-item list-group-item-action" routerLink='/route2' >Second Link</a>
<a href="#" class="list-group-item list-group-item-action" routerLink='/route3' >Third Link</a>
First link is highlighted because has class "active". while pressing each link I have some actions, but the first link stays active anyway.
Now how can I move active class to the corresponding link that has being pressed ?
use routeLinkActive directive like this
First Link
Second Link
Third Link
Use ngClass for conditionally switching active element:
https://angular.io/api/common/NgClass
Add (click) action to every a element, and inside called function set active element:
First Link
Second Link
Third Link
in ts file:
activeItem: string;
setActiveItem(activeItem: string): void {
this.activeItem = activeItem;
}
Related
I'm using multiple <a> tags to use routerLink.
When I first load my home page, the home icon (which is in aMenuItems) has the active class thanks to routerLinkActive and the rest of the array aMenuItems does not. This is a good behaviour.
However, both <a> tags in bottom-group has the active class triggered as the home icon. I tried to set the attribute exact in routerLinkActiveOptions to true but nothing changes.
As soon as I select another page other than home page, this bug disappears.
HTML:
<div class="top-group">
<a
*ngFor="let oItem of aMenuItems"
class="menu-item"
[routerLink]="oItem.link"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon>{{oItem.icon}}</mat-icon>
<p>
{{oItem.designation}}
</p>
</a>
</div>
<div class="bottom-group">
<a
class="menu-item"
[routerLink]="routerLinkMarketPlace"*
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon>apps</mat-icon>
<p>applications</p>
</a>
<a
class="menu-item"
[routerLink]="routerLinkSettings"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon>settings</mat-icon>
<p>paramètres</p>
</a>
</div>
I found a solution to my problem:
In HTML, I replaced the routerLinkActive with a class condition using the attribute isActive from the router.
<a
class="menu-item"
[routerLink]="routerLinkSettings"
[class.active]="router.isActive(routerLinkSettings)"
[routerLinkActiveOptions]="{ exact: true }"
>
<mat-icon>settings</mat-icon>
<p>parameters</p>
</a>
You also need to inject the router in your .ts
constructor(private router: Router) {
super();
}
Hope it can help someone passing by !
I'm new to cypress and lately I have to extract text variables within websites using cypress. Now, I've finally figured out how to extract text variables of a specific class/id in html. However, I cannot find the right way to extract the exact nth element within the class/id.
For example, here is my html:
<div class ="main-menu-wrapper align-self-stretch align-items-stretch" id="navbarCollaspse">
<ul region="header" class="clearfix nav navbar-nav navbar-nav-center mx-auto">
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/aaaaa"
class="nav-link dropdown-toggle main-menu-1" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
TEXTAAAAA </a>
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/bbbbb"
class="nav-link dropdown-toggle main-menu-2" data-toggle="dropdown"
aria-expanded="false" aria-haspopup="true">
TEXTBBBBBB </a>
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/ccccc"
class="nav-link dropdown-toggle main-menu-3" data-toggle="dropdown" aria-
expanded="false" aria-haspopup="true">
TEXTCCCCCC </a>
</div>
Here is my cypress javascript code:
cy.visit('https://example/website')
cy.get([class="clearfix nav navbar-nav navbar-nav-center mx-auto"]).each(($el) => {
cy.wrap($el).invoke('text')
.then(text => {
//do something with the text
//Here, I could get TEXTAAAAA TEXTBBBBBB TEXTCCCCCC orderly, however, i want to extract only TEXTBBBBBB
})
})
Now, when I cy.get([class="clearfix nav navbar-nav navbar-nav-center mx-auto"]).each($el) I could get TEXTAAAAA TEXTBBBBBB TEXTCCCCCC. However, now, I only want to get the second element within the class , in this case, TEXTBBBBBB. I tried to reference the way from here but cypress couldn't found the path.
Any ideas on how to get specific element within a class using cypress is a great help! Thanks a million!
If you want to extract the text for a particular element, you can do it by using the index value, it should look something like this. Here we ae extracting the second element.
cy.get('locator').each(($el, index) => {
if (index == 1) {
cy.wrap($el).invoke('text').then((text) => {
//do something with the text
})
}
})
I have an application in vue in which I show different links in the header.
depending on the environment the root of the link varies, so I have saved an environment variable with the value of this root of the link.
I import it in the component to use the reference to this variable, but I can't find the way to include it in the href tag.
in my component's script I import the config file where the variable is declared and return
<script>
import Config from './../../config.js';
export default {
data: function () {
return {
hoverHome: false,
testUrl: Config.TEST_URL
}
},
the value brought by the environment variable at this time is https://www.test.sp, and in my template I try to use it but I don't find how to do it neither in case of being the only value nor combining it with a url termination
<li class="nav-item">
<a class="nav-link head" href=testUrl>Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" href=testUrl/shops>Shops</a>
</li>
how can i use this variable inside the href tag?
You need to bind the href value using the v-bind:href or shortly :href for v-bind
So simply you can bind any variable that has some link to your href like
<a v-bind:href="'/anylink/' + testUrl">
You need to use v-bind: or its alias :. For example,
<li class="nav-item">
<a class="nav-link head" v-bind:href="testUrl">Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" v-bind:href="testUrl + '/shops'">Shops</a>
</li>
or
<li class="nav-item">
<a class="nav-link head" :href="testUrl">Business</a>
</li>
<li class="nav-item">
<a class="nav-link head" :href="testUrl + '/shops'">Shops</a>
</li>
See How to pass a value from Vue data to href?
I have been working on a custom dropdown functionality with a horizontal divider seperating two sets of values and have general select dropdown functionalities like using up and down arrow to navigate through the values, as well as go to specific values on press of a alphabet.
Code:
<div class="btn-group d-flex dropdown" dropdown>
<div class="floatLabelContainer w-100">
<button id="button-basic" dropdownToggle type="button" float-label [addLabel]="false" [hasFloat]="true" class="mb-2" aria-controls="dropdown-basic">
{{selectedCountry}}
<span class="caret" id="country-caret"></span>
</button>
<label for="button-basic" class="label-class" id="label-class">Country</label>
</div>
<ul id="dropdown-basic" slimScroll width="100%" height="250px" size="3px" alwaysVisible="true" wheelStep="20" *dropdownMenu
class="dropdown-menu d-block" role="menu" aria-labelledby="button-basic">
<li role="menuitem">
<a class="dropdown-item" tabindex="0" (click)="selectedCountry = country.name" *ngFor="let country of restOfCountries | orderBy : 'name'">{{country.name}}</a>
</li>
<li class="divider dropdown-divider"></li>
<li role="menuitem">
<a class="dropdown-item" tabindex="0" (click)="selectedCountry = country.name" *ngFor="let country of asianCountries | orderBy : 'name'">{{country.name}}</a>
</li>
</ul>
</div>
I have been able to achieve the divider part with the above code,
but is there away to implement arrows and alphabet press functionality also.
I would prefer to have angular specific implementation or a plugin, rather than js or jQuery
There is the possibility of evaluating keydown and keyup events:
https://alligator.io/angular/binding-keyup-keydown-events/
According to this you should be able to achieve this functionality by implementing click listeners such as:
<div class="btn-group d-flex dropdown"
(keydown.arrowup)="select(items[i-1])"
(keydown.arrowdown)="select(items[i+1])"
dropdown>
EDIT: so I tried this and turns out this does not work on any item on default. It works on inputs, how the example shows but I could not get i ti to work on a list by now.
I am trying to put html in the bootstrap popover and the content shows nicely but when I click on my links inside the popover it just goes to the parent 'OpenRecent' method on the anchor tag that triggers the popover. You can see below in the data-content html the different ways I try to call the function I want. How can I achieve this?
<ul id="RecentSearches" class="nav nav-tabs nav-stacked well" data-bind="foreach: CurrentItems">
<li>
<div>
<input type="checkbox" class="checkbox inline" data-bind="value: $data.TransId,
checked: $root.ItemsSelected"/>
<a href="#"
data-bind="text: $data.Description + '-' + $data.County,
attr:
{
id: $data.TransId,
'data-title': $data.Description
},
click: $root.OpenRecent"
data-trigger="hover"
rel="popover"
data-html="true"
data-content="<a data-bind='click: $parent.Print.bind($data)'>Print</a> |
<a data-bind='click: app.RecentSearches.Print.bind($data)'>Print 2</a>
<a data-bind='click: $parent.Email'>Email</a> |
<a data-bind='click: $parent.SaveToPDF'>PDF</a> |
<a data-bind='click: $parent.SavetToCSV'>CSV</a>">
</a>
</div>
</li>
</ul>
The HTML is your data-content will not have been bound by Knockout, as it was added dynamically later.
One option is to add a way to identify the links (class) and then use an unobstrusive approach to adding an event handler.
$("ul").on("click", ".print", function(event) {
var context = ko.contextFor(this);
context.$root.Print(context.$data);
event.preventDefault();
});
I am not sure why your OpenRecent function is getting called. It appears to me that bootstrap creates the popover outside of the element that it is triggered on. So, this would not be a parent of the popover. If you are still having an issue with that part, then maybe you could get it working in jsFiddle.
Here is a fiddle with the unobtrusive handler: http://jsfiddle.net/rniemeyer/Edww3/