Question 281674 in Html Question posted in
Some basic documentation can be found here.

Html – Angular routing on button clicks not working

I am using angular routing on button clicks to route to new pages in my application. However, when I click on any of my buttons, no event is triggered and I am not directed to a new page. I have checked everything over and cannot figure out what I’m doing wrong.

Here is my code:

app-routing-module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CreateAccountComponent } from './create-account/create-account.component';
import { LoginComponent } from './login/login.component';
import { AboutComponent } from './about/about.component';
import { BlushComponent } from './blush/blush.component';
import { BronzerComponent } from './bronzer/bronzer.component';
import { ConcealerComponent } from './concealer/concealer.component';
import { EyelinerComponent } from './eyeliner/eyeliner.component';
import { EyeshadowComponent } from './eyeshadow/eyeshadow.component';
import { FoundationComponent } from './foundation/foundation.component';
import { HighlighterComponent } from './highlighter/highlighter.component';
import { LipglossComponent } from './lipgloss/lipgloss.component';
import { LipstickComponent } from './lipstick/lipstick.component';

const routes: Routes = [
  {path: 'create-account', component: CreateAccountComponent},
  {path: 'login', component: LoginComponent},
  {path: 'about', component: AboutComponent},
  {path: 'loginRedirect', redirectTo: 'login'},
  {path: 'blush', component: BlushComponent},
  {path: 'bronzer', component: BronzerComponent},
  {path: 'concealer', component: ConcealerComponent},
  {path: 'eyelinder', component: EyelinerComponent},
  {path: 'eyeshadow', component: EyeshadowComponent},
  {path: 'foundation', component: FoundationComponent},
  {path: 'highlighter', component: HighlighterComponent},
  {path: 'lipgloss', component: LipglossComponent},
  {path: 'lipstick', component: LipstickComponent},
  {path: 'home', component: HomeComponent, pathMatch: 'full'},
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
  

export class AppRoutingModule { }

home.component.html:

<router-outlet></router-outlet>
 <body style="background-color:deeppink;">
    <button type="button" routerLink="['/create-account']">Create Account</button>
    <button type="button" routerLink="['/login']">Login</button>
    <button type="button" routerLink="['/about']">About</button>
 
<header>
     <h1> MakeupFinder </h1>
    <h2> What kind of product are you looking for?</h2>

</header>
<ul>

    <li *ngFor = "let makeup of makeup">
        
    <a>
        
        <button (onClick)= "click('{{makeup.name}}')">
        <img width="270px" height="280px" src= "{{makeup.imageUrl}}" >
    
        
        <div class = "content">
            <div class = "name">
            
                {{makeup.name}}
            </div>
        </div>
    </button>
  
        </a>
    </li>
</ul>
</body>

home.component.ts:

import { Component } from '@angular/core';
import {MakeupService} from '../services/makeup/makeup.service';
import {makeup} from '../shared/models/makeup';
import { AppRoutingModule } from '../app-routing.module';
import {Router} from '@angular/router';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent{
  makeup: makeup[]= [];
  constructor(private MakeupService:MakeupService, private router: Router ){

  }

  ngOnInit(){
    this.makeup= this.MakeupService.getAll();
  }

  click(name: any){
    this.router.navigate([name]);
  }

}

Nothing happens when I click on my buttons

Tags:

2

Answers


  1. 0

    In angular the click binding should be used by adding (click) event handler to the element.

    Here is the reference: https://angular.io/guide/event-binding#binding-to-events

    Login or Signup to reply.
  2. 0

    You should rewrite it to this: [routerLink]="[‘/create-account’]", dont forget the brackets, and you need to import RouterModule for the module where the component is declared, or if its standalone, in the component you can import it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search