【Angular】ボタンを押したら別のページに遷移する方法

2022年8月10日2026年8月11日

当ページのリンクには広告が含まれています。

Angularでボタンを押したら別のページに遷移する方法が知りたいなぁ….

結論、AngularのRouterを使えばできます。

Contents

実装内容

実装する内容です。

トップ画面へ遷移するボタンを押下→トップ画面に遷移する(URLは/)

ユーザー登録画面へ遷移するボタンを押下→ユーザー登録画面に遷移する(URLは/userRegister)

企業一覧画面へ遷移するボタンを押下→企業一覧画面に遷移する(URLは/company)

ボタン押下したら別のページに遷移する実装

HTML

<button mat-raised-button color="primary" (click)="onClickToTop()">トップ画面へ遷移する</button>
<button mat-raised-button color="primary" (click)="onClickToUserRegister()">ユーザー登録画面へ遷移する</button>
<button mat-raised-button color="primary" (click)="onClickToCompany()">企業一覧画面へ遷移する</button>

mat-raised-buttonを使うには、事前にangular materialのmat-buttonをインストールしておく必要があります。

それぞれボタンをクリックした時に、クリックイベントを設定しましょう。あとはtsファイルがわでクリックイベントを定義すれば良いです。

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

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

  constructor(
    private router: Router
  ) { }

  ngOnInit(): void {
  }

  /**
   * トップ画面に遷移する
   */
  public onClickToTop() {
    this.router.navigate(["/"]);
  }

  /**
   * ユーザー登録画面に遷移する
   */
  public onClickToUserRegister() {
    this.router.navigate(["/userRegister"]);
  }

  /**
   * 企業一覧画面に遷移する
   */
  public onClickToCompany() {
    this.router.navigate(["/company"]);
  }
}

Routerをimportします。

あとは、this.router.navigate([“URL”])とすれば良いです。

エンジニアの基礎力を上げるおすすめ本を紹介！