DOMException: Failed to execute 'setAttribute' on 'Element': '[routerLink' is not a valid attribute name

Question

So i have basically started a new angular Project and I'm making the navbar for it and here's the code

navbar.component.html:

<nav>
  <li class="navbar-list">
    <a [routerLink="/home-component"] [class="home-link"]>Home</a>
    <a [routerLink="/about.component"] [class="about-link"]>About</a>
  </li>
</nav>
<router-outlet></router-outlet>

// navbar.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})

export class NavbarComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }

}

this error occured after i add the [routerLink="abc"] attributes on the elements. And if you want to know there is nothing in home.component.html and about.component.html since this is self work-in-progress project and its just for fun!

HELPPP!

i Have already did that and has still not worked :( – ΔβΙΧΚαΓ K Aug 21 '22 at 14:05 — ΔβΙΧΚαΓ K, Aug 21 '22 at 14:05

Amer · Accepted Answer · 2022-08-21T20:18:38.397

2

The binding is not used correctly in your snippet code. The square brackets [] should enclose the element property only (not the property and its value), like the following:

<nav>
  <li class="navbar-list">
    <a [routerLink]="'/home'" class="home-link">Home</a>
    <a [routerLink]="'/about'" class="about-link">About</a>
  </li>
</nav>
<router-outlet></router-outlet>

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.

That's useful if you have dynamic links, however in other cases you just need to pass a static value to the property, then, you can add it without square brackets, like the following:

<nav>
  <li class="navbar-list">
    <a routerLink="/home" class="home-link">Home</a>
    <a routerLink="/about" class="about-link">About</a>
  </li>
</nav>
<router-outlet></router-outlet>

Read more about binding in Angular:

edited Aug 21 '22 at 20:18

answered Aug 21 '22 at 15:49

Amer

6,162
2
8
34

But then it comes up with a parse error. The errors are saying that there are unexpected tokens for / – ΔβΙΧΚαΓ K Aug 21 '22 at 16:38
I updated the answer. The links specified in the `routerLink` should be valid links, not `home.component`. Besides, the routes config should be defined in your app-routing module or lazy-loaded module. – Amer Aug 21 '22 at 16:43
Yes they are and that also did'nt work can i just like instead of /home.component cant i just do home.component and the same for about – ΔβΙΧΚαΓ K Aug 21 '22 at 17:08
No you can’t. The path should be used here, not the component names. – Amer Aug 21 '22 at 17:31
Ok, but how do i not get the error of: parse error – ΔβΙΧΚαΓ K Aug 21 '22 at 19:22
TYSM it finally worked!! – ΔβΙΧΚαΓ K Aug 22 '22 at 21:05

DOMException: Failed to execute 'setAttribute' on 'Element': '[routerLink' is not a valid attribute name

1 Answers1