I would like to dynamically generate a class name for my element. For example,
<span class=``icon icon-${route.title}``></span> (had to use double backticks here, but it should really be just one set of backticks.)
<ul class="sidebar-list">
<li *ngFor="let route of menuRoutes.items">
<span class=`icon icon-${route.title}`></span>
<a routerLink="/{{route.path}}" routerLinkActive="active">{{ 'menu.' + route.title | translate}}</a>
</li>
</ul>
Try this:
<span class="icon icon-{{route.title}}"></span>
You can also archive this by using a [ngClass] directive
<span [ngClass]="['icon', route.title]"></span>
Related
I have an icon on a navigation bar which serves as a link to a admin route, I'd like this icon to change when I'm on that specific route, for this I can just replace the mdi-settings-outline class with mdi-settings, which will show a filled version of the same icon.
<li class="nav-item">
<a routerLink="/admin" routerLinkActive="mdi-settings" class="nav-link mdi mdi-settings-outline"></a>
</li>
However the regular routerLinkActive directive will only add the mdi-settings class to the link, which won't have the desired result. Can the routerLinkActive directive somehow replace the class instead of just adding it?
The routerLinkActive exports some properties that you can use in the template. You access the API by assigning the directive to a template variable. This is done by adding #link="routerLinkActive" where "link" is the name of the variable.
You can then use the properties of the directive, which are defined here in the API documentation.
https://angular.io/api/router/RouterLinkActive#properties
<li class="nav-item">
<a routerLink="/admin"
routerLinkActive="mdi-settings"
#link="routerLinkActive"
class="nav-link mdi"
[class.mdi-settings-outline]="!link.isActive"
></a>
</li>
Need to make the variable unique for each link
<a mat-list-item
[routerLinkActive]="['']"
[routerLinkActiveOptions]="{ exact: true }"
#reportsLink="routerLinkActive"
[ngClass]="reportsLink.isActive ? 'route-active': 'route-inactive'"
[routerLink]="['/reports']"
title="Reports">
</a>
<a mat-list-item
[routerLinkActive]="['']"
[routerLinkActiveOptions]="{ exact: true }"
#notificationsLink="routerLinkActive"
[ngClass]="notificationsLink.isActive ? 'route-active': 'route-inactive'"
[routerLink]="['/notifications']"
title="Notifications">
</a>
i have a side bar, where in it remains active if im on the screens first tab, if i switch to second tab, the url changes and the sidebar label wont be active.
How can this be solved. Please help.
HTML:
Side bar Code:
<a routerLink="/my-health/my-health-history" [ngClass] = "{'active' : true}" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
TAbs code redirected to pages on click of side bar link:
<div class="myhealth mt7">
<ul class="nav nav-tabs menu">
<li>
<a class="active-link" routerLink="/my-health/my-health-history" routerLinkActive="active-link"
[routerLinkActiveOptions]="{exact: true}">myHealthHistory
</a>
</li>
<li>
<a routerLink="/my-health/my-lifestyle" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myLifeStyle
</a>
</li>
<li>
<a routerLink="/my-health/my-family-health-history" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myFamilyHistory
</a>
</li>
</ul>
</div>
If i am in myHealth History tab, then side bar will be active, if i shift to other 2 tabs then side bar wont be active
Using [ngClass] = "{'active' : true}" in tag.
The condition are:
Differ your current URL based on tab change.
ex1: http://test.com/tab1 and http://test.com/tab2
ex2:http://test.com/#tab1 and http://test.com/#tab2
Read url and find string like "tab1 or tab2"
add "Active" class based on this condition
You can check for the current active link in the sidebar component.
Sidebar html
<a routerLinkActive="active-link" [ngClass]="{'active-link': isActive()}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
Sidebar ts
constructor(private router:Router) {
}
isActive(){
return ["/my-health/my-health-history","/my-health/my-lifestyle","/my-health/my-family-health-history"].includes(this.router.url);
}
Note : the code is written directly to Stackoverflow editor so there could be typo or syntatical error. Please correct yourself.
In the application I am working on, we can add the following markup for the pictured result
<span class="cell-inner-undefined">
<span title='Not defined' class="status pl-undefined" ></span>
</span>
Inside the relevant CSS we have the following:
.pl-undefined:before {
content: "";
color:#969696;
}
The item assigned to content looks like unicode. Instead of that I want to get the result of the following:
<span class="fa-stack fa-5x">
<i class="fa fa-info-circle fa-stack-1x" style="color:blue" ></i>
<i class="fa fa-ban fa-stack-1x" style="color:red"></i>
</span>
How can I get the class 'pl-undefined' to return the FA icon generated above?
p.s: Adding the fa span in my page displays the desired icon, but I need it to be displayed using the class.
I didn't find any other way of achieving this, other than adding a javascript which will find a <span class="cell-inner-undefined"> and replace it with the fa CSS
How can i use glyphicons with JSF(Netbeans: Maven/web application+JSF Framework)? I want to use a glyphicon with a <h:link>.
Here is how I did it in regular HTML:
<li><span class="glyphicon glyphicon-home"></span> Home</li>
Here is how that looked like:
Here is how I tried to do it in JSF:
<li><h:link id="bone" value="Home" outcome="book" /><span class="glyphicon glyphicon-plane"></span></li>
Here is how it looked like:
As you can see, the glyphicon which is black and a little hard to see in that darkblue background color, is located down there. How do I make it to look like the HTML version but in JSF?
Ps, the "home button" is part of a navigation bar.
Thanks.
When you use this code:
<h:link id="bone" value="Home" outcome="book" />
<span class="glyphicon glyphicon-plane"></span>
Your generated HTML code will be:
<span class="glyphicon glyphicon-home"></span> Home
Try like this:
<li>
<h:link id="bone" outcome="book">
<span class="glyphicon glyphicon-plane"></span>Home
</h:link>
</li>
In short: the order you place the JSF code matters.
How do you add a span tag inside of an a tag using Html.ActionLink? Is something like this at all possible?
I am using ASP.NET MVC 4 together with Twitter Bootstrap version 3.
I have a drop down menu and the HTML looks like this:
<ul class="nav navbar-nav">
<li class="#(Model.Equals("Home") ? "active" : "")">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
</ul>
I was wanting to do the link like this:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
But there is a span tag in the mix of things which makes it a bit more complex.
I can probably also use the following:
<a href="#Url.Action("Index", "Home")">
<span class="glyphicon glyphicon-home"></span> Home
</a>
Curious to know if the above is possible?
Your variant with Url.Action("Index", "Home") is correct and possible. Url.Action returns the url, so it can be used in a href.