I am building a site using Angular 6 and have been stuck for a few days now on a problem. I am trying to change text color (list items) on a navbar based on the active page. I have seen examples on how to do this using AngularJS and javascript. I have come across the routerActiveLink library documentation at https://angular.io/api/router/RouterLinkActive library for Angular 5+ which seems to be a simple solution, but it is not working for me. I have tried many different examples I have seen online and none have worked. Am I missing something? Here are some code snippets:
header.component.html
<div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
<li class="main-links" [routerLinkActive]="['active']">
<a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
</li>
<li class="main-links">
<a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
</li>
<li class="main-links">
<a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
</li>
<li class="main-links">
<a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
</li>
<li class="main-links">
<a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
</li>
<li class="main-links">
<a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
</li>
</ul>
This is my declaration for active in header.component.less:
.active {
color: #009fdb;
font-family: font-bold;
}
When I use [routerLinkActive] with the brackets, the page does not load at all, and when I user routerLink and routerLinkActive in the a tag, it does not register at all. Are there some imports I am missing. I have tried importing router, routerlinkactive, and routerlink from #angular/core.
I purposely left both different styles of using routerLinkActive in the code example. It was not like this when I actually ran it.
I have Angular 6, bootstrap 4.1.1, jquery 3, and popperjs installed.
After further review, I have discovered that routerLinkActive works correctly on elements inside the root app-module. I created a new module for my header and footer called UiModule and the functionality is not working inside the header. Any ideas on how to get routerLinkActive to work on this module?
Try importing RouterModule into your UiModule, it won't be able to make use of that imported in your app.module.ts file
import { RouterModule } from '#angular/router';
// some other imports here
#NgModule({
imports: [
RouterModule
],
exports: [
// export UI components
],
declarations: [
// declare UI components
]
})
When I had this issue, I imported everything right. It took me days before I figured the problem was from how I structured my HTML
<li class="nav-list">
<a routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}"
routerLink="/"
href="/">
<i class="material-icons nav-link-icon">person</i>
<span class="nav-link-text">Profile</span>
</a>
</li>
The problem there was that I was watching for the .active class to appear in the li element while it had always been appearing in the anchor element. Just be sure that is not what is happening in your case.
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 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?
We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
I was trying to move a sidebar navigation component to React.js and the javascript inside the onclick is not working anymore. So the sidebar shows but nothing happens when it is clicked.
Edit: This is the code that works fine with HTML:
<div id="sidebar">
<div class="toggle-btn" onclick="document.getElementById('sidebar').classList.toggle('active');">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<a href="index.html" class="animsition-link">
<li>Home</li>
</a>
<a href="about.html" class="animsition-link">
<li>About</li>
</a>
<a href="resume.html" class="animsition-link">
<li>Resume</li>
</a>
<a href="projects.html" class="animsition-link">
<li>Projects</li>
</a>
</ul>
</div>
Edit: React Snippit (part of react code showing render)
import React, { Component } from 'react';
class Header extends Component {
render() {
if(this.props.data){
var name = this.props.data.name;
var occupation= this.props.data.occupation;
var description= this.props.data.description;
var city= this.props.data.address.city;
var networks= this.props.data.social.map(function(network){
return <li key={network.name}><a href={network.url}><i className={network.className}></i></a></li>
})
}
return (
<header id="home">
<nav id="nav-wrap">
<div id="sidebar" ref="sidebar">
<div class="toggle-btn" onChange={this.refs.state.active}>
<span></span>
<span></span>
<span></span>
</div>
<ul>
<a href="index.html" class="animsition-link">
<li>Home</li>
</a>
<a href="about.html" class="animsition-link">
<li>About</li>
</a>
<a href="resume.html" class="animsition-link">
<li>Resume</li>
</a>
<a href="projects.html" class="animsition-link">
<li>Projects</li>
</a>
</ul>
</div>
You're passing a string instead of JavaScript, and using the wrong keywords. Make sure you use the react specific terminology of onClick={} and className="".
Edit: Also it looks like you're trying to use refs incorrectly. You shouldn't need to use a ref here at all as the onChange function would be available in the react class. Hard to tell exactly what you're trying to do without all the code, though.
Second edit:
Okay with your updated code I can see a bit more of what is wrong. There are a few issues you've got here and I'll try to cover them all.
Not using react keywords. Things like onclick and class need to change to the react specific onClick and className to work.
You aren't using refs correctly. Refs, in their most basic sense, are used to modify a react component after it has been mounted. I assume you're trying to call a function here, in which case since I cannot see it defined here I can only assume it was passed in as a prop. If this is true you'll need to call it using this.props.blah.
All your assignments to variables are within the scope of an if statement, so they aren't going to be available outside that scope. If you need to use them in your code you'll have to define the variables before the if block.
I have an issue with the <a href="#"> in my AngularJS app.
My main issue is on the:
<em class="fa fa-bars"></em>
navigation.html -> this is a template of navigation directive.
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2 bg-faded sidebar-style-1">
<h1 class="site-title"><em class="fa fa-rocket"></em> Brand.name</h1>
<em class="fa fa-bars"></em>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item"><a class="nav-link active" href="index.html"><em class="fa fa-dashboard"></em> Dashboard <span class="sr-only">(current)</span></a></li>
</ul>
<em class="fa fa-power-off"></em> Signout</nav>
index.html
<body ng-app="test" class="body-bg" ng-style="bgimg" ui-view>
</body>
app.js
var app = angular.module("test", ["ui.router");
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
// login route
.state("login", {
url:"/",
controller: "LoginController",
templateUrl: "pages/login/login.html"
})
// admin route
.state("admin", {
url:"/admin",
controller: "AdminController",
templateUrl: "pages/admin/admin.html"
})
And currently I am doing a SPA routing using ui-sref of ui-router.
The problem is everytime I click the button, I get redirected to the default state $urlRouterProvider.otherwise('/');.
How I can do something similar to that HTML href="#" with AngularJS ui-sref?
Or is there other ways?
from the code in the question I can say that, the normal usage of href will result in redirection so you need to use data-target, can you please try this?
<a data-target="#menu-toggle" data-toggle="collapse" class="btn btn-default"><em class="fa fa-bars"></em></a>
JSFiddle: here
if you have jQuery (which you probably do)
inside your head tag...
<script>
$(document).ready(function(){
$('[href="#menu-toggle"]').click(function(event){
event.preventDefault();
})
});
</script>
Basically keeps the link from routing via window navigation.
You can easily test by pasting this code into your browser console..
$('[href="#menu-toggle"]').click(function(event){
event.preventDefault();
})
You can use a combination of href and ng-click to solve your problem.
<em class="fa fa-power-off"></em> Signout</nav>
Where signOut() is a function on your controller.
1.Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it. (or) href="javascript:void(0);"
for your reference: Angular-UI-Router: should i avoid href with ui-router?