[Angular] 3장 컴포넌트 생성 및 데이터 바인딩

✅ 1.컴포넌트 생성하기

Angular CLI를 사용해 컴포넌트를 생성할 수 있습니다. 터미널에 다음 명령어로 컴포넌트를 생성해줍니다.

ng generate component example
# or
ng g c example

 

명령어를 실행하고 생성하면 /src/app/example/ 폴더에 컴포넌트 관련 파일이 생성됩니다. 그럼 아래 코드를 입력하여 컴폰넌트를 적용시켜줍니다.

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent {
  title = 'Angular Data Binding Example';
  message = 'Hello, Angular!';
}

---

✅ 2. 템플릿에서 데이터 바인딩

<!-- example.component.html -->
<h2>{{ title }}</h2>
<p>{{ message }}</p>
<input [(ngModel)]="message" placeholder="Type a message" />

• {{ 변수명 }}: 인터폴레이션(Interpolation)으로 변수 값을 출력
• [(ngModel)]: 양방향 데이터 바인딩으로, 입력값이 컴포넌트 변수와 동기화됨

---

✅ 3. NgModel 사용을 위한 설정

이제 AppModule에 FormsModule(Angujlar 내장)을 import 해줍니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { FeatureModule } from './feature/feature.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SharedModule, FeatureModule, FormsModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

다음은 라우트를 수정하기 위해 app.routes.ts를 다음과 같이 수정합니다.

import { Routes } from '@angular/router';
import { FeatureComponent } from './feature/feature.component'; // FeatureComponent 경로에 맞게 수정
import { ExampleComponent } from './example/example.component'; // ExampleComponent 경로에 맞게 수정

export const routes: Routes = [
  { path: 'feature', component: FeatureComponent },
  { path: 'example', component: ExampleComponent },
  // 필요하면 기본 경로 리다이렉트도 넣어
  { path: '', redirectTo: '/feature', pathMatch: 'full' },
  // 존재하지 않는 경로 처리 (옵션)
  { path: '**', redirectTo: '/feature' },
];

---

 

GitHub - Koras02/angular-bloging