Angular에서 스타일 동적 변경

ngClass 및 ngStyle 지시문을 사용하여 표현식을 요소에 바인딩할 수 있으며, 이를 통해 스타일이 동적으로 변경될 수 있습니다.

컴포넌트 클래스의 active 속성을 사용하여 텍스트가 나타나거나 사라지도록 만들어 봅시다:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

이를 위해 toggle 함수를 작성하여 이 속성을 번갈아가며 켜거나 끄도록 합니다:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

컴포넌트의 CSS 파일에서 클래스에 다음 스타일을 설정합니다:

.hidden {
	display: none;
}

컴포넌트 템플릿에서 div를 만들고, hidden CSS 클래스를 추가합니다. 이 클래스는 컴포넌트 클래스의 active 속성에 따라 켜지거나 꺼집니다:

<div [ngClass]="{hidden: active}">
	text
</div>

버튼도 만들어, 클릭 시 toggle 메서드를 호출하여 컴포넌트를 표시하거나 숨깁니다:

<button (click)="toggle()">
	toggle
</button>

세 개의 블록이 주어져 있습니다. 각 블록을 토글하는 세 개의 버튼을 만드세요.