routerlink

I have a problem with my routerLinkActive. Here is two Gifs to explain. First problem: When i start the app, none of the routerLinkActive give the class active. But if i click on a different route, that finaly works. When I click at first on the current route, the class isn't displayed. Here is my code: <ul class="nav"> <li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}"> <a [routerLink]="[menuItem.path]"> <i class="material-icons">{{menuItem.icon}}</i> <p>{{menuItem.title}}</p> </a> </li> </ul> Here is the tree of my route. (in red the component called)

My page currently has Navigation.vue component. I want to make the each navigation hover and active. The 'hover' works but 'active' doesn't. This is how Navigation.vue file looks like : <template> <div> <nav class="navbar navbar-expand-lg fixed-top row"> <router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link> <router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link> <router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link> <router-link tag="li" class="col" class-active="active" to="

I have a Home page, somewhere in it the user clicks on Contact me to be redirected to the Contact page: home.component.html <div> <a routerLink="/contact" [queryParams]="sendOBj">Contact me</a> </div> home.component.ts: import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '../../../node_modules/@angular/router'; import { FollowersService } from '../followers.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { myfollowers: any[]; sendOBj: {id: any,

This may be simple, but I've looked over documentation and can't find anything about it. I want to have my 'github' link redirect to say, github.com. However, its just appending ' https://github.com ' to my url instead of following the link. Here is a snippet: <BreadcrumbItem to='https://github.com'> <Icon type="social-github"></Icon> </BreadcrumbItem> (This is using iView for custom CSS, but 'to' works in the same way as router-link). What ends up happening is this: I read Daniel's Link and found a workaround: { path: '/github', beforeEnter() {location.href = 'http://github.com'} } <a :href="

i have a menu bar that contain a list of menus loaded from express api and every menu is referenced to a page that have an alias wich will be the URL of that page i am trying to load the page when i click to menu, it's done but only when i refresh the page this my menu code export class MenuList implements OnInit { menus:Menu[]; menu:Menu; page:Page; constructor(private router:Router, private menuService:MenuService) { } getMenus():void { this.menuService.getMenus() .subscribe( menus => this.menus = menus, //Bind to view err => { // Log errors if any console.log(err); } ); } getPage(id):void {

What is the difference between [routerLink] and routerLink ? How should you use each one? Milad You'll see this in all the directives: When you use brackets, it means you're passing a bindable property (a variable). <a [routerLink]="routerLinkVariable"></a> So this variable (routerLinkVariable) could be defined inside your class and it should have a value like below: export class myComponent { public routerLinkVariable = "/home"; // the value of the variable is string! But with variables, you have the opportunity to make it dynamic right? export class myComponent { public routerLinkVariable =