trying to change routerlink for a different component | TypeScript Community | Page 1

idle knoll Apr 11, 2024, 9:25 PM

#

<li class="nav-item">
@if (userIsAdmin) {
<a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"
routerLink="/admin/admin-orders">Admin Orders</a>
}</li>

      <li class="nav-item">
        @if (userIsAdmin) {
          <a class="nav-link" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"
          routerLink="/admin/admin-data">Data Website</a>
        }</li>

got 2 html links but the lead to the same routerlink and no clue how to fix it

#

let me know if i need to give more info 🙂

elfin rover Apr 11, 2024, 9:32 PM

#

you might want to provide your code formatted using Discord code blocks
helps with the readability a lot

<li class="nav-item">
@if (userIsAdmin) {
    <a
        class="nav-link"
        [routerLinkActive]="['active']"
        [routerLinkActiveOptions]="{exact: true}"
        routerLink="/admin/admin-orders">Admin Orders</a>
}
</li>

<li class="nav-item">
@if (userIsAdmin) {
    <a
        class="nav-link"
        [routerLinkActive]="['active']"
        [routerLinkActiveOptions]="{exact: true}"
        routerLink="/admin/admin-data">Data Website</a>
}
</li>

#

but to answer your question, make sure the routing module is loaded
especially if you are in standalone mode for your component, you might need to add some imports

idle knoll Apr 11, 2024, 9:34 PM

#

import { DataWebshopComponent } from './data-webshop/data-webshop.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'categories', component: CategoriesComponent,/* canActivate: [authGuard] */ },
  { path: 'cart', component: CartComponent },
  { path: 'auth/login', component: LoginComponent},
  { path: 'auth/register', component: RegisterComponent },
  { path: 'orders', component: OrdersComponent },  
  { path: 'admin', component: AdminComponent },
  { path: 'admin/admin-orders', component: AdminOrdersComponent },
  {path: 'admin/admin-data', component: DataWebshopComponent}

  //  { path: 'auth', children: [
  //      { path: 'login', component: LoginComponent },
  //       { path: 'register', component: RegisterComponent },
  //       { path: 'logout', }
  //    ]
  //  }

#

used them on the admin order so it is fine

#

@elfin rover do you got any idea?

elfin rover Apr 11, 2024, 9:40 PM

#

what component does the links redirect to? AdminComponent?

idle knoll Apr 11, 2024, 9:40 PM

#

elfin rover Apr 11, 2024, 9:40 PM

#

doesn't it have something with the order the routes are declared in?

#

shouldn't you use nested routes for your admin pages?

idle knoll Apr 11, 2024, 9:42 PM

#

elfin rover shouldn't you use nested routes for your admin pages?

i dunno lol not that good with angular just wanna add an updated power bi with the springboot backend

elfin rover Apr 11, 2024, 9:42 PM

#

what if you set the order as

  { path: 'admin/admin-data', component: DataWebshopComponent },
  { path: 'admin/admin-orders', component: AdminOrdersComponent },
  { path: 'admin', component: AdminComponent },
```?

#

https://angular.io/guide/router#route-order

#

Route order

The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route. The wildcard route comes last because it matches every URL and the Router selects it only if no other routes match first.

idle knoll Apr 11, 2024, 9:43 PM

#

elfin rover what if you set the order as ```ts { path: 'admin/admin-data', component: Data...

so that is all gonna be order?

elfin rover Apr 11, 2024, 9:44 PM

#

wdym?

#

you might want to read the doc sample I just sent

#

especially the

more specific routes should be placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route
part

idle knoll Apr 11, 2024, 9:45 PM

#

elfin rover wdym?

want admin orders to see the order data of the user and data to see updated data from database frompowerbi

idle knoll Apr 11, 2024, 9:45 PM

#

elfin rover you might want to read the doc sample I just sent

don t understand all of that

#

#

will fix the design later but what should i do?

elfin rover Apr 11, 2024, 9:50 PM

#

hollander? 👀

idle knoll Apr 11, 2024, 9:51 PM

#

elfin rover hollander? 👀

👉 nederlnader tho holland is zuid en noord holland

elfin rover Apr 11, 2024, 9:52 PM

#

~~kaaskop~~

idle knoll Apr 11, 2024, 9:52 PM

#

elfin rover ~~kaaskop~~ <:HA:1156938599535738981>

ok

elfin rover Apr 11, 2024, 9:52 PM

#

idle knoll will fix the design later but what should i do?

read the docs snippet I sent

#

more specific routes should be placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route

idle knoll Apr 11, 2024, 9:54 PM

#

don t understand it so won t get muc further

elfin rover Apr 11, 2024, 9:56 PM

#

routes in correct order bepalen
van meest precies to minst precies/meest generiek

#

admin/admin-data is meer precies dan admin dus moet eerst

#

en admin moet laast

idle knoll Apr 11, 2024, 9:57 PM

#

#

maar dat zijn alleen detials want veranderd niet veel toch?

elfin rover Apr 11, 2024, 9:58 PM

#

jawel

idle knoll Apr 11, 2024, 9:58 PM

#

voor voor 2 uur in de nacht powerbi fixen lol

elfin rover Apr 11, 2024, 10:00 PM

#

elfin rover jawel

want Router kiest die eerte route dat matcht
dus kortere routes moeten laast

idle knoll Apr 11, 2024, 10:00 PM

#

elfin rover want `Router` kiest die eerte route dat matcht dus kortere routes moeten laast

okie dokie 🙂

elfin rover Apr 11, 2024, 10:00 PM

#

nested routes kan ook

#

https://angular.io/guide/router#nesting-routes

idle knoll Apr 11, 2024, 10:02 PM

#

dus childcomponents onder de hoofdclass
clean code intreseerd mij voor nu niet zo heel veel wil het werkend hebben dus net gammel genoeg om te werken XD

elfin rover Apr 11, 2024, 10:06 PM

#

idle knoll dus childcomponents onder de hoofdclass clean code intreseerd mij voor nu niet z...

*child-routes onder een hoofd-route
anders routes in de "juiste" volgorde

idle knoll Apr 11, 2024, 10:07 PM

#

elfin rover *child-routes onder een hoofd-route anders routes in de "juiste" volgorde

maar nu staan de routes toch in de juiste volgorde? admin/..

elfin rover Apr 11, 2024, 10:08 PM

#

nu wel, met admin laatst

idle knoll Apr 11, 2024, 10:09 PM

#

en dan?

elfin rover Apr 11, 2024, 10:11 PM

#

dan wat?
het zou moeten lukken

idle knoll Apr 11, 2024, 10:11 PM

#

#

houdt nog steeds bij orders en data de orders path aan

elfin rover Apr 11, 2024, 10:13 PM

#

nav component toch goed opgeslagen?

#

en geen compileerfout

idle knoll Apr 11, 2024, 10:13 PM

#

  selector: 'app-navigation',
  standalone: true,
  imports: [RouterModule, FormsModule],
  templateUrl: './navigation.component.html',
  styleUrl: './navigation.component.scss'
})
export class NavigationComponent implements OnInit {
  public title: string = 'INFIRFS - Webshop';
  // searchtext: any;


  public amountOfProducts: number = 0;

  constructor(private cartService: CartService, private authService: AuthService, private router: Router) { }

  ngOnInit() {
    this.cartService.$productInCart.subscribe((products: Product[]) => {
      this.amountOfProducts = products.length;
      this.checkLoginState();
    })
  }

   
  public showHotCupIcon: boolean = false;
  public userIsLoggedIn: boolean = false;
  public userIsAdmin: boolean = false;
 
 
  public onLogout(): void{
    this.authService.logOut();
    this.userIsAdmin = false; 
    this.router.navigate(['/']);
  }
 
  public checkLoginState(): void{
 
    this.authService
      .$userIsLoggedIn
      .subscribe((loginState: boolean) => {
        this.userIsLoggedIn = loginState;
        if (localStorage.getItem('email') === "[email protected]" || localStorage.getItem('email') === "[email protected]"){
          this.userIsAdmin = true;
        }
      });
  }


  public fontChange(size: string){
    const root = document.querySelector(":root") as HTMLElement;

    if (root){
      root.style.fontSize = size;
    }
  }

#

doe wel ff ng serve

#

#

als je ooit in die admin rol bent gekomen en daarna weer user bent heb je een probleem XD get local storage in incognito is het niet

#

nu laat hij trouwens niks meer zien als je de paths verplaatst

#

🙃

#

@elfin rover

#

#

nu pakt hij het wel 🙂

elfin rover Apr 11, 2024, 10:26 PM

#

geen idee

#

misschien de hele code effe opsturen

idle knoll Apr 11, 2024, 10:27 PM

#

elfin rover misschien de hele code effe opsturen

het werkt al admin moet gwn boven 😂

#

werk je echt met angular als baan🤨 thonk

elfin rover Apr 11, 2024, 10:29 PM

#

yep

#

gewoon niet iets wat we dagelijks doen

idle knoll Apr 11, 2024, 10:30 PM

#

elfin rover yep

wat doe je vooral dagelijks als baan ben gwn benieuwd als ict student

elfin rover Apr 11, 2024, 10:32 PM

#

fullstack dev (voor overheidsdiensten)
meestal Spring Boot voor de backend en Angular voor de frontend

#

meeste van onze apps hebben slechts een paar pagina's

#

vooral tabellen

#

geen admin dashboard ofzo

#trying to change routerlink for a different component

Route order