컴포넌트 데이터바인딩 하기

1. html, css 수정(화면에 보기좋게 색변경 및 배치 변경)

   1. section에 추가된 button과 time-display 위치 변경

   // 위치 : section.component.html
   <div class="title">
   
       여기는 섹션입니다.
   
       <div class="display">
           <app-time-display></app-time-display>
           <app-buttons></app-buttons>
       </div>
       
   
   </div>
   

   b. css 변경

   // 위치 : section.component.scss
   
   .title{
       width: 100%;    
       height: 80vh;
       background-color: #fff;
       font-size: 25px;
       color: black;
   }
   
   .display{
       width: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }
   

   c. 결과

   

2. time-display 수정

   1. Angular Language Service 마켓플레이스에서 추가하기
   2. 컴포넌트와 맴버변수 데이터 바인딩하기 : ts파일 → html 파일로 연결 및 진행됨

   // 위치 : time-display.component.html
   
   <p>
   
       // 템플릿과 컴포넌트간의 데이터 바인딩
       // 컴포넌트가 가진 맴버변수 바인딩 가능
       {{test}}
   
   </p>
   

   // 위치 : time-display.component.ts
   
   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-time-display',
     templateUrl: './time-display.component.html',
     styleUrls: ['./time-display.component.scss']
   })
   export class TimeDisplayComponent implements OnInit {
   
     test = '시간값';
   
     constructor() { }
   
     ngOnInit(): void {
     }
   
   }
   

3. time-display 시간 변경되게 하기

   1. 2에서 배운 내용을 바탕으로 test 값 1씩 증가하게 하기

   // 위치 : time-display.component.ts
   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-time-display',
     templateUrl: './time-display.component.html',
     styleUrls: ['./time-display.component.scss']
   })
   export class TimeDisplayComponent implements OnInit {
   
     test = 1;
   
     constructor() {
   
       setInterval(() => {
         this.test++;
       }, 1000)
   
     }
   
     ngOnInit(): void {
       
   
     }
   
   }
   

   // 위치 : time-display.component.html
   <p>
   
       {{test}} 이 들어가게 됩니다.
   
   </p>
   

   b. 결과 화면 :

   

4. 버튼 추가하기 (시작, 멈춤, 리셋)

   1. 시작, 멈춤, 재시작 버튼 추가

   // 위치 : buttons.component.html
   
   <p>
   
       <button class="start-btn" (click)="start($event) ">
           시작
       </button>
   
       <button class="stop-btn">
           멈춤
       </button>
   
       <button class="restart-btn">
           재시작
       </button>
   
   </p>
   

   b. start 버튼 기능 추가하기

   // 위치 : buttons.component.ts
   
   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-buttons',
     templateUrl: './buttons.component.html',
     styleUrls: ['./buttons.component.scss']
   })
   export class ButtonsComponent implements OnInit {
   
     constructor() {
   
      }
   
      start($event:MouseEvent) {
       
        console.log($event)
      }
   
     ngOnInit(): void {
     }
   
   }
   

5. button 과 time-display component 연동하기 (부모와 자식 데이터 간의 흐름 구조로 연동하기)

   

   1. 시작 버튼을 누를시 타임 디스플레이 변경하는 것이 목적
   • button 컴포넌트의 ts 에서 @Output 데코레이터 사용

   // button.component.ts
   
   import { Component, OnInit, Output } from '@angular/core';
   import { EventEmitter } from 'stream';
   
   @Component({
     selector: 'app-buttons',
     templateUrl: './buttons.component.html',
     styleUrls: ['./buttons.component.scss']
   })
   export class ButtonsComponent implements OnInit {
   
     // Output 데코레이터 추가 (component의 이벤트 발생)
     // clickEvent라는 propertiy 생성
     // EventEmitter 앵귤러 기능의 생성자 생성
     @Output() clickEvent = new EventEmitter();  
   
     constructor() {
   
      }
   
   	 // start()에 클릭이벤트 실행
      // 부모 객체가 이벤트를 기다리고있다가 눌리면 이벤트 실행
      start() {
       this.clickEvent.emit
      }
   
     ngOnInit(): void {
     }
   
   }
   

• click 이벤트를 위한 버튼에 이벤트 추가

// 위치 : section.component.html

<div class="title">

    <div class="display">

        <app-time-display></app-time-display>
        
        <app-buttons> (clickEvent)="startTime()" </app-buttons>

    </div>
    

</div>

• startTime 함수 생성

// 위치 : section.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-section',
  templateUrl: './section.component.html',
  styleUrls: ['./section.component.scss']
})
export class SectionComponent implements OnInit {

  constructor() { }

  startTime() {
    console.log('섹션 컴포넌트 작동')
  }

  ngOnInit(): void {
  }

}

1. ㅁㄴㅇㄹ

   1. ㅁㄴㅇㄹ
      • ㅁㄴㅇㄹ
      • ㄴㅇㄹ

2. ㅁㄴㅇㄹ

3. ㅁㄴㅇㄹ

4. ㅁㄴㅇㄹ

5. ㅁㄴㅇㄹ

6. ㅁㄴㅇㄹ