Standalone 에서 컴포넌트 만들기

angular 19 에서는 standalone이라는 방식을 제공하고 있으며 기존 방식보다는 이 방식을 사용하기를 추천하고 있습니다.
standalone에서는 어떻게 component를 민드는지 이전 예제 를 이용하여 말씀드리겠습니다.

Standalone 이란

단독(standalone) 컴포넌트는 Angular 애플리케이션을 간단하게 구성하기 위해 도입되었습니다. 단독 컴포넌트, 단독 디렉티브, 단독 파이프는 모두 NgModule을 생략하기 위한 것입니다. NgModule 방식으로 개발된 애플리케이션이라면 단독 컴포넌트 스타일을 점진적으로 적용할 수 있습니다.

기존 방식(not standalone)

• footer.ts

..........
export class FooterComponent {}

@NgModule({
    declarations: [ FooterComponent ], // 기존에는 컴포넌트를 제작하고 반드시 declarations를 처리해야 했습니다.
    ..........
})
export class FooterModule {}

Standaline 방식

컴포넌트, 디렉티브, 파이프등에서는 standalone: true 로 정의함으로서 위에서 처럼 @NgModule안에 별도의 선언을 하지 않고도 바로 사용가능합니다.

• footer.ts

@Component({
  standalone: true, // 이부분을 정의
  selector: 'app-footer',
  ..........
})
export class FooterComponent {..........}

• main.ts

import {FooterComponent} from './common/footer';
..........
@Component({
  selector: 'app-root',
  ..........
  imports: [ FooterComponent], // 정의 없이 바로 imports 하여 사용
  template: `
    <app-footer></app-footer> // 이렇게 처리하면 위의 내용이 출력됩니다.
    `
})