[Angular] 4장 템플릿

✅ 1. Angular 템플릿이란?

Angular 템플릿은 컴포넌트의 UI(View)를 정의하는 구조로 단순 HTML 뿐만 아닌 Angular 문법을 이용합니다.

• 데이터 표시
• 이벤트 처리
• 조건/반복 렌더링
• 스타일/클래스 동적 적용
• 컴포넌트 클래스에 정의된 변수와 메서드에 연동

 ng generate component user

// user.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
})
export class UserComponent {
  name = 'Angular';
}

// app-routing-module.ts
import { RouterModule, Routes } from '@angular/router';
import { FeatureComponent } from './feature/feature.component';
import { ExampleComponent } from './example/example.component';
import { UserComponent } from './user/user.component';

export const routes: Routes = [
  { path: 'feature', component: FeatureComponent },
  { path: 'example', component: ExampleComponent },
  { path: 'user', component: UserComponent },

  { path: '', redirectTo: '/feature', pathMatch: 'full' },
  { path: '**', redirectTo: '/feature' },
];

• user.component.html은 Angular 템플릿임

---

 ✅ 2. Angular 템플릿 문법

1) 데이터 바인딩

1️⃣ 인터폴레이션 (Interpolation)

// user.component.ts
export class UserComponent {
  name = 'Angular';
}


// user.component.html
<!-- 인터폴레이션(interpolation) -->
<h1>Hello {{ name }}</h1>

• 컴포넌트 변수 값을 HTML에 표시

2️⃣ 속성 바인딩 (Property Binding)

// user.component.html
<img [src]="userImage" alt="User Image" />


// user.component.ts
userImage: string = 'https://placehold.co/600x400';

• TS 변수에 UserImage 값을 적용

3️⃣ 이벤트 바인딩 (Event-Binding)

// user.component.html
<button (click)="sayHello()">Say Hello</button>
<p>{{ message }}</p>


// user.component.ts
message: string = '';

sayHello(): void {
    this.message = `Hello, ${this.name}`;
}

• 버튼 클릭 시 TS 메서드 실행 후 메시지가 표시됨

4️⃣ 양방향 바인딩 (Two-way Binding)

// user.component.html 
<input [(ngModel)]="username" placeholder="Enter your name" />
<p>Welcome, {{ username }}</p>

// user.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  imports: [FormsModule], // 모듈 추가
})
export class UserComponent {
  // 인터폴레이션
  name: string = 'Angular';

  // 속성 바인딩
  userImage: string = 'https://placehold.co/600x400';

  // 이벤트 바인딩
  message: string = '';

  sayHello(): void {
    this.message = `Hello, ${this.name}`;
  }

  username: string = '';
}

• 입력값과 TS 변수 username 동기화

5️⃣ 구조 지시자

•  *ngif: 조건부 렌더링

// user.component.html
<!-- *ngIf: 조건부 렌더링 -->
<p *ngIf="isLoggedIn">You are Logged in!</p>
<p *ngIf="!isLoggedIn">Please Log In</p>


<!-- *ngFor: 반복 렌더링 -->
<ul>
  <li *ngFor="let user of users; let i = index">
    {{ i + 1 }}. {{ user.name }}
  </li>
</ul>


// user.component.ts 

    @Component({
      selector: 'app-user',
      templateUrl: './user.component.html',
      imports: [FormsModule, NgFor], // 모듈 추가
    })

  isLoggedIn: boolean = true; // *ngIf 조건
  users: { name: string }[] = [
    // *ngFor 조건
    { name: 'Alice' },
    { name: 'Bob' },
    { name: 'Charlie' },
  ];

 

6️⃣ 속성 지시자(ngClass, ngStyle)

// user.component.html
<p [ngClass]="{ active: isActive, disabled: 'isDisabled' }">Status</p>
<p [ngStyle]="{ color: isActive ? 'green' : 'red' }">Dynamic Color</p>



// user.component.ts
@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  imports: [FormsModule, NgFor, NgClass, NgStyle], // 모듈 추가
})

 isActive: boolean = true;
 isDisabled: boolean = false;

• [ngClass] -> 조건에 따라 CSS 클래스 적용
• [ngStyle] -> 조건에 따라 스타일 동적 적용 
• 변수 값이 바뀌면 화면도 자동으로 갱신

---

 

GitHub - Koras02/angular-bloging