I am trying to change glyphicon on click event. From console I found out that classes are not set properly.
From Inspect Element
<span _ngcontent-c2="" class="glyphicon-menu-up" ng-reflect-klass="glyphicon glyphicon-menu-up ar" ng-reflect-ng-class="[object Object]"></span>
This is the code I did in HTML part.
CODE:
<ul class="nav third-nav">
<li appExpandMenu (click)="isCollapsedA=!isCollapsedA">
<a>
<span [ngClass] = "{'glyphicon glyphicon-menu-up arrow': !isCollapsedA, 'glyphicon glyphicon-menu-right arrow': isCollapsedA}" class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
<span class="third-menu-title">Docs</span>
</a>
</li>
<ul class="nav third-nav">
<li appExpandMenu (click)="isCollapsedA=!isCollapsedA">
<a>
<span [ngClass] = "{'glyphicon glyphicon-menu-up arrow': !isCollapsedA, 'glyphicon glyphicon-menu-right arrow': isCollapsedA}" class="glyphicon glyphicon-menu-{{sign}} arrow"></span>
<span class="third-menu-title">Docs</span>
</a>
</li>
you should apply [ngClass] like this:
[ngClass] ="isCollapsedA ? 'glyphicon glyphicon-menu-right arrow' : 'glyphicon glyphicon-menu-up arrow'"
This is perhaps the code you need .
https://stackblitz.com/edit/angular-ngclass-u5bzma?file=app%2Fapp.component.html
Related
i am new in Java EE development.
My problem is to set the bootstrap navbar class to active, if the user will go to another side.
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
Sign Up</a></li>
<li id="login" class="active"><a href="/login.do">
<span class="glyphicon glyphicon-log-in">
</span> Login</a>
</li>
</ul>
Actual i have set the "Login" Button in the "navbar" to active.
Now i would like to make it possible, that the active Button in the navbar will switch if the user goes to another site. I tried it with javascript but it does not work in my java-ee project.
You did not specify which UI framework you are using. For JSF you can do something like the followin:
You can check the current view id with the EL expression #{view.viewId} and add the styleClass if it matches your expectations:
<ul class="nav navbar-nav navbar-right">
<li styleClass="#{view.viewId == 'login' ? 'active' : ''">
<a href="#">
<span class="glyphicon glyphicon-user"></span>Sign Up
</a>
</li>
<li id="login" styleClass="#{view.viewId == 'login' ? 'active' : ''">
<a href="/login.do">
<span class="glyphicon glyphicon-log-in"></span> Login
</a>
</li>
</ul>
I need to display the name of the user next to the logout option on my navbar. The way I did this was as follows:
<ul class="nav navbar-nav navbar-right">
<li>${userName}</li>
<li repeat.for="row of router.navigation" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
I thought that if I added another list item it in the nav navbar-nav it would display as all the other menu items do. Instead I got:
I have highlighted the name admin as, if I didnt it would be black on black. Its not receiving the correct styling as the other menu items have.
How do I render the admin list item so it displays like all the other list items?
EDIT
Looking at the question it was pointed out it was light on on background. It was late at night.
Yes I am using bootstrap version 3.
Here is the full html of the navbar view model:
<template>
<require from="./navmenu.css"></require>
<div class="main-nav">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/home">Jobsledger</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li repeat.for="row of routes" if.bind="row.settings.pos == 'left'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
<a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="row.settings.nav">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="row.settings.nav" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>${userName}</li> //HERE - THIS LINE DOESNT RENDER PROPERLY.
<li repeat.for="row of routes" if.bind="row.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="row.href" if.bind="!row.settings.nav">${ row.title }</a>
<a href.bind="row.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="row.settings.nav">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="row.settings.nav" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
${userName}
</template>
Here is the typescript file behind it:
import { autoinject, bindable, bindingMode } from "aurelia-framework";
import { Router } from 'aurelia-router'
import { AuthService } from '../../auth/auth-service'
#autoinject
export class Navmenu {
public userName: string = 'anonymous';
private userRole = localStorage.getItem("user_role");
constructor(public authService: AuthService, public router: Router) {
this.userName = authService.getUserName();
}
get routes() {
return this.router.navigation.filter(r => r.settings.roles.indexOf(this.userRole) > -1);
}
}
I wanted to separate the left menu items with the right menu items so there are two sections. This is the right side where you have the user name and the option to logout. The display of the user name is done as a list item in the unordered list tag but before repeat for the right menu items.
I am looking at a way to add a class dynamically to aurelia template. I have to add an active class if the particular li is visible.
Example
<section id="jobsCategoryContainer" class="jobsCategoryContainer">
<h1>{{title}}</h1>
<div *ngFor = "#slide of jobCategorySlides; #i = index" id="job-category-slide_{{i}}" class="job-category-slide" [ngClass]="{active: initialCarouselIndex == i}">
<ul *ngFor = "#item of slide">
<li class="jobDetails" *ngFor="#job of item; #i = index">
<div>
<span id="{{job.name}}" class="jobName">{{ job.name }}</span>
</div>
<div>
<span>{{job.noOfJobs}}</span>
</div>
</li>
</ul>
</div>
<div>
Previous
Next
</div>
</section>
I want to add the active class on below code
<div class="phs-widget-body">
<div class="phs-carousel-inner">
<ul repeat.for = "slide of nearByJobSlides" class="phs-item phs-grid-row" >
<li repeat.for = "item of slide" class="phs-small-6">
<a href="javascript:void(0)">
<div class="phs-job-title">${item.title}</div>
<div class="phs-job-info">
<span class="phs-job-loacation">${item.location}</span>
<span class="phs-job-category">${item.category}</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="phs-widget-footer">
<a class="left" href="#phsNearbyJobs" role="button" data-slide="prev">
<i class="fa fa-angle-left"></i> Move to Previous
</a>
<ol class="phs-carousel-indicators">
<li repeat.for = "slide of nearByJobSlides" data-target="#phsNearbyJobs" data-slide-to="${$index}" class="" click.trigger="changeActiveClass()"></li>
</ol>
<a class="right" href="#phsNearbyJobs" role="button" data-slide="next">
Move to Next <i class="fa fa-angle-right"></i>
</a>
</div>
As well how do I pass an event Object on aurelia?
Just use interpolation
<div class="${ applyMyClass ? 'my-class' : '' }">
E.g.
<div class="${ carouselIndex == $index ? 'active' : '' }">
You don't need to do this with a click event, it's the same as ng2 (only less code!)
I am writing testcase on logout functionality. When the code is executed it show element is notclickable at point.
element.all(by.css('.dropdown-user a')).then(function(items) {
items[0].click();
ptor.sleep(500);
});
view.html
<li class="dropdown dropdown-user">
<a href="#" class="dropdown-toggle" id="logout" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../../assets/admin/layout/img/avatar3_small.jpg"/>
<span class="username username-hide-on-mobile">
</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<i class="icon-user"></i> My Profile
</li>
<li>
<i class="icon-calendar"></i> My Calendar
</li>
<li>
<i class="icon-envelope-open"></i> My Inbox <span class="badge badge-danger">3 </span>
</li>
<li>
<i class="icon-rocket"></i> My Tasks <span class="badge badge-success">7 </span>
</li>
<li class="divider">
</li>
<li>
<i class="icon-lock"></i> Lock Screen
</li>
<li ng-click="logout()">
<i class="icon-key"></i> Log Out
</li>
</ul>
</li>
Is there any way to oprn this dropdown? Could you please let me know how to write the code to test it?
You can try the xpath way
//li[contains(#class, 'dropdown')]/ul[contains(#class, 'dropdown')].
I am not sure if this is what you are looking for
When I use the find element by ID it is not working in my code.
--This is the HTML where the 4 tabs appears. Under each option there is nav option which has the id. Each of the 4 tabs also has ids. But identifying using those are not working.
HTML:
<nav id="monitoring-tab" class="pure-menu pure-menu-open pure-menu-horizontal ng-scope">
<ul>
<li id="now-tab" ui-sref-active="pure-menu-selected" ng-hide="hideTab.now" class="ng-hide">
<a ui-sref="app.monitoring.real-time" href="#/monitoring/real-time">
Now</a>
</li>
<li id="day-tab" ui-sref-active="pure-menu-selected" class="pure-menu-selected">
<a ui-sref="app.monitoring.historical.day" href="#/monitoring/historical/day">
Day</a>
</li>
<li id="month-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.month" href="#/monitoring/historical/month">
Month</a>
</li>
<li id="year-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.year" href="#/monitoring/historical/year">
Year</a>
</li>
<li id="lifetime-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.lifetime" href="#/monitoring/historical/lifetime">
Lifetime</a>
</li>
</ul>
</nav>
<div id="date-range" ng-hide="stateName =='app.monitoring.historical.lifetime'" class="ng-scope">
<span>
<a id="historical-nav-prev" ui-sref="app.monitoring.historical.day({date:'2014-10-16'})" href="#/monitoring/historical/day?date=2014-10-16">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span class="ng-binding">Fri, Oct 17, 2014</span>
<span ng-show="historicalNav.nextDateBtnShown" class="ng-hide">
<a id="historical-nav-next" ui-sref="app.monitoring.historical.day({date:''})" href="#/monitoring/historical/day?date=">
<i class="fa fa-chevron-right"></i>
</a>
</span>
</div>
MyCode:
it('Should click on the previous day', function() {
element(by.id('historical-nav-prev')).click();
});
Error:
NoSuchElementError: No element found using locator: By.id("historical-nav-p
rev")
What is wrong here? Most of the id's I am using are not working.