Angular 폰트 사이즈 변경 예시 / Angular 양방향 통신 예시 / sizeChage.emit / emit()

ng generate component fontSizer

1. 위 명령문을 실행하여 새로운 컴포넌트를 생성합니다.

 

 

app.component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  fontSizePx = 16;
}

2. 앱 컴포넌트에 fontSizePx 변수를 초기화 합니다. (전역 범위)

 

 

 

app.component.html

<app-sizer [(size)]="fontSizePx"></app-sizer>


<div [style.font-size.px]="fontSizePx">앱 컴포넌트 폰트 사이즈 : {{fontSizePx}}</div>


<!-- 양방향 바인딩 -->
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
<!-- $event 변수에는 SizerComponent.sizeChange 이벤트로 보낸 데이터가 담겨 있습니다. 
  이 변수의 값은 AppComponent.fontSizePx에 할당됩니다.-->

3. 앱 템플릿에 위 코드를 복붙합니다.

 

 

 

 

sizer.component.ts

import { Component, Input } from '@angular/core'; // Input 심볼을 로드합니다.
import { Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sizer',
  templateUrl: './sizer.component.html',
  styleUrls: ['./sizer.component.css']
})

export class SizerComponent {

  @Input()  size!: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
    // sizeChage.emit : 서브클래스에서 수퍼클래스로 값을 전달할 때 사용
    // 새로 변경된 값으로 이벤트를 생성해서 보냅니다.
  }
}

4. sizer 컴포넌트에 위 코드를  넣습니다.

5. 양방향 통신을 위해 필요한 심볼을 로드합니다.

6. 클래스 프로퍼티로 기본  size 변수를 선언합니다. 이 변수는 값을 외부로부터 입력받아 변경되므로 @Input 데코레이터로 지정합니다.

7. sizeChage 프로퍼티를 선언합니다. 이 변수는 변경된 값을 감지하고 전송하기 위해 EventEmitter<T> 타입으로 선언하며 @Output 데코레이터로 지정합니다.

8. dev, inv 메소드는 각각 resize 함수를 호출하며 현재 클래스의 프로퍼티 size 의 값을 +1 또는 -1 갱신하는 합니다.

동시에 sizeChage.emit 을 통해 변경된 값을 size로 전송합니다.

emit() 함수는 해당 이벤트가 ‘발생했음’을 알립니다!

 

 

 

sizer.component.html

<div>
    <button type="button" (click)="dec()" title="smaller">-</button>
    <button type="button" (click)="inc()" titme="bigger">+</button>
    <span [style.font-size.px]="size">폰트사이즈 : {{size}} px</span>
</div>

 

9. sizer 템플릿에 버튼을 그리고 sizer 컴포넌트에서 설계한 메소드를 바인딩 합니다.

10. (click) 이벤트가 발생한다면 = "작동할 메소드 호출"

11. (이벤트 함수 명) 자유롭게 명시 가능합니다. 좀 전에 직접 만든 dev 함수도 이벤트 조건에 넣을 수 있습니다.

12. 클릭 시 dec 또는 inc 함수가 호출

13. 이 함수는 다시 resize 를 호출하여 size 프로퍼티의 값을 +- 합니다.

14. [style.font-size.px] = "size" size 에 현재 컴포넌트 클래스의 size 객체가 들어감으로 실시간으로 폰트가 변경되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

app.component.html

<app-sizer [(size)]="fontSizePx"></app-sizer>


<div [style.font-size.px]="fontSizePx">앱 컴포넌트 폰트 사이즈 : {{fontSizePx}}</div>

<!-- 양방향 바인딩 -->
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
<!-- $event 변수에는 SizerComponent.sizeChange 이벤트로 보낸 데이터가 담겨 있습니다. 
  이 변수의 값은 AppComponent.fontSizePx에 할당됩니다.-->

 

15. 다시 앱 컴포넌트 템플릿으로 돌아와서 sizer 컴포넌트 외에도 앱 컴포넌트의 템플릿에서도 fontSizePx 값이 변경되는지 확인해봅시다.

16. <app-sizer> : sizer 컴포넌트의 selector 이름입니다. 태그로 감싸 해당 위치에 sizer 템플릿을 표시합니다.

17. sizer 셀렉터 태그에 있으므로 [(size)] 는 sizer 컴포넌트의 프로퍼티 size 를 의미합니다.

18. sizer 컴포넌트의 프로퍼티 [(size)] 에 app component의 프로퍼티 fontSizePx = "16" 으로 초기화된 값을 최초 할당합니다.

19. AppComponent에 있는 fontSizePx 프로퍼티는 SizerComponent.size 값에 따라 초기화

20. sizeChange 는 엄밀히 따지면 프로퍼티이지 메소드가 아닙니다. 하지만 이벤트에 가깝습니다. 따라서 () 이벤트 바인딩에 넣을 수 있습니다.