目次：Webアプリ開発ロードマップ

第4回：ニュースフィード一覧画面を作る(画面遷移とディレクティブ)

今回はニュースフィードの一覧画面を作成していきます。

ニュースフィード一覧画面用のコンポーネントを追加する

コンポーネントを追加する

% ng g component components/newsfeeds

src/app/components/newsfeedsにコンポーネントが追加される。

モジュール更新内容の確認

src/app/app.module.tsにコンポーネントが追加される。

更新された内容

import { NewsfeedsComponent } from './components/newsfeeds/newsfeeds.component';

  declarations: [
    AppComponent,
    SignInComponent,
    FeedsComponent
  ],

ルーター更新内容の確認

src/app/app-routing.module.tsにルートを登録する。

下記を追記します。

import {NewsfeedsComponent} from './components/newsfeeds/newsfeeds.component';

const routes: Routes = [
  { path: '', redirectTo: '/sign-in', pathMatch: 'full'},
  { path: 'sign-in', component: SignInComponent },
  { path: 'newsfeeds', component: NewsfeedsComponent },
];

画面遷移を行う

src/app/components/sign-in/sign-in.component.tsに下記の修正を行う

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

@Component({

  constructor(
    private router: Router
  ) { }

  ngOnInit(): void {
  }

  onClickSignIn() {
    // Go to newsfeeds page.
    this.router.navigate(['./newsfeeds']);
  }

src/app/components/sign-in/sign-in.component.htmlに下記の修正を行います。
Sign inボタンがクリックされたらonClickSignIn()メソッドが呼ばれます。

    <button (click)="onClickSignIn()">Sign in</button>

ログイン画面の入力内容が正しいときに画面遷移するようチェックする

実際はログイン時にサーバに問い合わせを行い、ログインできたら画面遷移を行うことになりますが、まだサーバがないので何か入力されていたらOKとします

  onClickSignIn() {
    if (this.email !== '' && this.password !== '') {
      // Go to newsfeeds page.
      this.router.navigate(['./newsfeeds']);
    }
  }

ニュースフィード一覧画面にフィードを表示する

ニュースフィード用のデータを用意する

まだサーバもデータベースも用意できていないので、ダミーデータを用意します。
newsfeeds.component.tsに下記のようにnewsfeedsプロパティを追加してください。

export class NewsfeedsComponent implements OnInit {

  newsfeeds = [
    {
      message: 'あけましておめでとう!',
      createdAt: new Date('2020-01-01T02:23:30'),
    },
    {
      message: 'メリークリスマス!',
      createdAt: new Date('2019-12-25T10:52:02'),
    },
    {
      message: 'ハッピーハロウィーン!',
      createdAt: new Date('2019-10-31T20:13:55'),
    },
  ];

  constructor() { }

画面に表示する

newsfeeds.component.htmlを下記のように修正してください。

<div id="newsfeeds">
  <article *ngFor="let newsfeed of newsfeeds" class="newsfeed">
    <p class="message">{{newsfeed.message}}</p>
    <p class="createdAt">{{newsfeed.createdAt.toLocaleString()}}</p>
  </article>
</div>

htmlタグ内に*ngFow=""を入れることで、繰り返しタグを表示することができます。
newsfeeds配列の中から一つずつ要素を取り出し、newsfeed変数に格納されます。
この*ngForをディレクティブと呼びます。他に*ngIfや*ngSwitch等があります。
ディレクティブを利用して作成した画面もプロパティの値が変更されるとリアルタイムに画面が更新されます。

スタイルを変更する

見栄えをよくするために装飾します

#newsfeeds {
  padding: 20px;
  background-color: #1877f2;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .newsfeed {
    width: 100%;
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .message {
      color: #1c1c1c;
    }
    .createdAt {
      color: #a0a0a0;
      font-size: 10px;
      text-align: right;
    }
  }
}

最後に

今回はここまでです。次回はパイプを作っていきます。
今回開発したソースコードはGitHubに入っています。