【Angular】基本的な機能まとめ - ChuN6868/CodeChrysalis-fullstuck-project GitHub Wiki

機能まとめ

プルダウンの作成方法

component.tsに最低限、下記の記載が必要

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  imports: [
    FormsModule,
    CommonModule,
  ],
})
export class SampleComponent {
  years = ['2024', '2025', '2026'];
  selectedYear = '';
}

その後、component.htmlに下記のように記載

<select
  [(ngModel)]="selectedYear"
  id="years"
  class="pulldown-class"
>
  <option *ngFor="let year of years" [value]="year">{{ year }}</option>
</select>

お好みでcssに下記のように記載

.pulldown-class {
  width: 100px;
  height: 30px;
  border-radius: 8px;
}

縦横スクロールの作成方法

component.htmlに下記のように記載

<div class="scroll-area">
  <div style="width: 2200px; height: 800px; background: lightgray"></div>
</div>

cssに下記のように記載

.scroll-area {
  border: 1px solid #333;

  /* 縦の画面サイズ100%が100vh */
  height: calc(100vh - 220px);

  /* 中身がはみ出たときだけスクロールバー表示 */
  overflow: auto;

  /* overflow: scroll 常にスクロールバーを表示（中身に関係なく） */
  /* overflow-x 横スクロールのみ制御 */
  /* overflow-y 縦スクロールのみ制御 */
}

自動的に縦横のスクロールバーが出現し、スクロール可能となる。

リンクの作成方法

component.htmlに下記のように記載

// aタグの場合
<a routerLink="/">Home</a>

// buttonタグの場合
<button routerLink="/">Home</button>

component.tsに下記を追加

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

@Component({
  imports: [
    RouterLink
  ],
})

戻るボタンの実装

component.tsに下記を追加

import { Component, inject } from '@angular/core';
import { Location } from '@angular/common';

export class TestComponent {
  // 戻るボタンの実装
  private location = inject(Location);
  goBack(): void {
    this.location.back();
  }
}

component.htmlに下記のように記載

<button (click)="goBack()">戻る</button>
⚠️ **GitHub.com Fallback** ⚠️