Buttons

Execute a function with onclick method

HTML

 <button (click)="helloWorld()" type="button" class="btn">Hello</button>

TS

  helloWorld(){
    // Do something
    alert('Hello World!');
  }

Inject router into a button

HTML

<button (click)="contactUs()">Contact Us</button>

TS

import { Router } from '@angular/router';

constructor( private router: Router ) { }

contactUs(){
    this.router.navigate(['/contact']);
}

Full snippet

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor( private router: Router ) { }

  ngOnInit(): void {}

  contactUs(){
    this.router.navigate(['/contact']);
  }
}
Was this page helpful?