「基本的なAngularアプリをはじめる」をやってみる(1)

[Angular] 「基本的なAngularアプリをはじめる」をやってみる(準備)

昨日、上記の記事のようにチュートリアルのサンプルプロジェクトを生成しました。

サンプルプロジェクトを生成しますと、下図のように、

product-listフォルダー、top-barフォルダーにそれぞれ css、html、ts、の3つにファイルができていることが分かります。

実行結果としてプレビュー画面には、下図のように表示されています。

ちょっとだけ、テストしてみる

今日は、ちょっとだけテストしてみます。

export class ProductListComponent {
  products = products;
  test_1 = '製品';

product-list.component.ts に test_1 = '製品'; を書き加えてみます。

<h2>Products</h2>
<h2>{{ test_1 }}</h2>

product-list.component.html に <h2>{{ test_1 }}</h2> を書き加えます。

はい。test_1 の内容が表示されました！

次の記事 ： [Angular] 「基本的なAngularアプリをはじめる」をやってみる(2)