ANGULARにリストを追加し表示させる、マウスホバーした時の色を変える

Angular コメントを残す

前回に引き続き、ANGULARでアプリケーションを作成します。
Angularでstockリストを作成し、表示させます。
マウスをstockの名前の上に置いた時に、名前の色が変わるようにします。
stockをクリックすると、下部にstockの詳細が表示されるようにします。

現在のAngularアプリケーションは、このような状態です。

Angular


株価のリストを作成します。

Angularのmock-stocks.tsファイルをsrc/appフォルダに作成します。

Angular

エディターに次のように記述しましょう。

import { Stock } from './stock';

export const STOCKS: Stock[] = [
{ id: 11, name: 'Amazon.com Inc.' },
{ id: 12, name: 'Facebook' },
{ id: 13, name: 'Apple Inc.' },
{ id: 14, name: 'Netflix, Inc.' },
{ id: 15, name: 'ServiceNow' },
{ id: 16, name: 'NVIDIA Corporation' },
{ id: 17, name: 'Adobe Systems Inc.' },
{ id: 18, name: 'PayPal' },
{ id: 19, name: 'Aiphabet Inc.' },
{ id: 20, name: 'Tesla, Inc.' }
];

Stockを表示する

AngularのStocksComponentクラスのファイルを開いてSTOCKSモックをインポートしてください。
stocks.component.tsファイルに、次の2つを記述します。

import { STOCKS } from '../mock-stocks';

export class StocksComponent implements OnInit {
stocks = STOCKS;

Angularの*ngFor を用いてStockを一覧表示する

Angularのstocks.component.htmlファイルを開き、次を記述してください。

<h2>My Stocks</h2>
<ul class="stocks">
<li *ngFor="let stock of stocks"

 

Stocksを装飾します

Angularのstocks.component.tsファイルを開いて、次のように記述します。

Angular

/* StocksComponent's private CSS styles */
.selected {
background-color: #CFD8DC !important;
color: white;
}
.stocks {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}
.stocks li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.stocks li.selected:hover {
background-color: #BBD8DC !important;
color: white;
}
.stocks li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.stocks .text {
position: relative;
top: -3px;
}
.stocks .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}



クリックイベントのバインディングを追加する

stockの名前をクリックした時に、画面の下部にstockの詳細を表示させます。Angularのstocks.component.htmlに次を記述しましょう。

<li *ngFor="let stock of stocks" (click)="onSelect(stock)">

クリックすると、onSelect(stock)式を実行します。

 

クリックイベントのハンドラーを追加する

onSelect( )メソッドを追加します。
Angularのstocks.component.tsに次を記述してください。

export class StocksComponent implements OnInit {
  stocks = STOCKS;
  selectedStock: Stock;
  constructor() { }
  ngOnInit() {
  }
  onSelect(stock: Stock): void{
  this.selectedStock = stock;
  }

 

詳細のテンプレートを更新する

Angularのstocks.component.htmlを編集します。
stock.idをselectedStock.idに書き換えましょう。

stock.nameをselectedStock.nameに書き換えましょう。（２箇所）

<h2>{{selectedStock.name | uppercase}} Details</h2>
<div><span>id: </span>{{selectedStock.id}}</div>
<div>
<label>name:
<input [(ngModel)]=”selectedStock.name” placeholder=”name”>
</label>
</div>

 

修正しましょう

コンポーネントは selectedStockが存在する場合のみ、選択されたStockの詳細を表示する必要があります。

Angularのstocks.component.htmlに、*ngIfを加えます。

<div *ngIf=”selectedStock”>
<h2>{{selectedStock.name | uppercase}} Details</h2>
<div><span>id: </span>{{selectedStock.id}}</div>
<div>
<label>name:
<input [(ngModel)]=”selectedStock.name” placeholder=”name”>
</label>
</div>

 

選択されたStockを装飾する

マウスをホバーさせたら、リストの色が変わるようにしましょう。
Angularのstocks.component.htmlに、次を記述します。

[class.selected]="stock === selectedStock"

全体のコード

<h2>My Stocks</h2>
<ul> class=”stocks”>
<li *ngFor=”let stock of stocks”
[class.selected]=”stock === selevtedStock”
(click)=”onSelect(stock)”>
<span class=”badge”>{{stock.id}}</span> {{stock.name}}
</li>
</ul>
<div *ngIf=”selectedStock”>
<h2>{{selectedStock.name | uppercase}} Details</h2>
<div><span>id: </span>{{selectedStock.id}}</div>
<div>
<label>name:
<input [(ngModel)]=”selectedStock.name” placeholder=”name”>
</label>
</div>
</div>

 

ブラウザには、次のように表示されます。
Angular
マウスをリストの上に、ホバーさせると次のように色が変わります。
Angular

Angularのstocks.component.tsファイルの全体コード

import { Component, OnInit } from ‘@angular/core’;

import { Stock } from ‘../stock’;

import { STOCKS } from ‘../mock-stocks’;

@Component({
  selector: ‘app-stocks’,
  templateUrl: ‘./stocks.component.html’,
  styleUrls: [‘./stocks.component.css’]
})
export class StocksComponent implements OnInit {
  stocks = STOCKS;
  selectedStock: Stock;
  constructor() { }
  ngOnInit() {
  }
  onSelect(stock: Stock): void{
  this.selectedStock = stock;
  }

 

}
ここまでで、次を行いました。

mock-stock.tsファイルを作成して、stockリストを定義しました。
stocks.component.tsファイルに、mockをインポートしました。
<li>で、*ngForを使いました。
stocks.component.cssにスタイルシートを定義しました。
onSelect( )メソッドを使用しました。
stocks.component.tsに、selectedStockを定義しました。
*ngIfを使用しました。



Related posts:

  1. AngularをMacへインストールする方法
  2. Angular入門　フォームから名前を修正する
  3. ANGULARのリスト一覧と詳細表示を切り分けて、保守性を高くする
  4. ANGULARのサービス

返信を残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。