【Angular】サバイバルTypeScriptのlikeButtonを実装するよ

使用バージョン

-Angular CLI: 16.1.5
-Angular: 16.1.6

まえがき

筆者について

-専門卒 -フロントエンドの業務レベルでの開発経験はなし -React(TypeScript) にて3カ月ほどの業務外開発経験あり

やったことはこちら！

業務で人生初のフロントエンド開発をAngularで行うことになりAngularのチュートリアルを一通り実施後、TypeScript未経験なこともありそちらの学習も兼ねて、サバイバルTypeScriptを敢えてAngularで実施しました！
次回

プロジェクトを作る

まずはプロジェクト作成です サバイバルtypescriptの内容なので

ng new Angular-survive

作成したプロジェクトディレクトリに移動
cd ./angular-survive
like button 用のコンポーネントの作成
ng g c likeButton

app.Module.tsで作成したLikeButtonComponentをインポート

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LikeButtonComponent } from './like-button/like-button.component'
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  declarations: [
    AppComponent,
    LikeButtonComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.moduel.htmlでlikeButtonComponentをレンダリング

app.module.html

<div>
    <app-like-button></app-like-button>
</div>

likeButtonComponentの実装
like-button.component.tsにてcount変数の定義、初期値の代入

及びonClickメソッドの処理を記述

like-button.component.ts

import { Component,OnInit } from '@angular/core';
import { Models } from '../model/models';

@Component({
  selector: 'app-like-button',
  templateUrl: './like-button.component.html',
  styleUrls: ['./like-button.component.css']
})
export class LikeButtonComponent {

  count = 999;

  onClick(){
    this.count++;
  }
}

like-button.component.htmlでlikeButtonの表示
ボタンの上にcount変数の値を出力

like-button.component.html

    <div class="mainbody">
        <span class="likeButton" (click)="onClick()"> ♡ {{ count }} </span>
    </div>

cssを適当に整えます。

like-button.component.css

 .likeButton {
    background-color: rgb(231,76,60);
    color: white;
    padding: 0.8rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.likeButton:hover{
    opacity: .7;
}

.likeButton:active{
    background-color: orangered;
}

.mainbody{
    margin-top: 100px;
    margin-left: 100px;
}

変数countをnumber型で定義します。

model.ts

export class Models{

    count!: number;

}

ng serve し実装確認します
likeButtonはこれで完成です。

次回はAngularで猫画像ジェネレータを作成していきます。

andmore...

他にもこんな記事書いてます。