Angular 개발할 때 자바스크립트 객체를 사용하여 데이터를 다루는 예제를 살펴보겠습니다.

자바스크립트 객체 정의

먼저, 자바스크립트 객체를 정의해보겠습니다. 예를 들어, 사용자 정보를 담은 객체를 아래와 같이 정의할 수 있습니다.

let user = {
  id: 1,
  name: 'John Doe',
  email: 'johndoe@example.com'
};

객체 사용 예제

컴포넌트에서 객체 사용

이제 Angular 컴포넌트에서 이 객체를 사용하는 예제를 살펴보겠습니다.

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

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent {
  user = {
    id: 1,
    name: 'John Doe',
    email: 'johndoe@example.com'
  };
}

템플릿에서 객체 사용

이제 컴포넌트의 템플릿에서 이 객체를 사용하는 예제를 살펴보겠습니다.

<div>
  <p>User ID: {{ user.id }}</p>
  <p>Name: {{ user.name }}</p>
  <p>Email: {{ user.email }}</p>
</div>

위 예제에서 {{ user.id }}, {{ user.name }}, {{ user.email }}와 같이 객체의 속성을 템플릿에 바인딩하여 사용할 수 있습니다.

이렇게 Angular에서 자바스크립트 객체를 정의하고 사용하는 방법을 살펴보았습니다.

결론

이 예제를 통해 Angular에서 자바스크립트 객체를 어떻게 사용하는지 간단히 살펴보았습니다. 객체는 데이터를 구조화하고 관리하는 데 유용한 도구입니다.