Apa perbedaan antara ViewChild dan ContentChild?

Question

Accepted Answer

Keduanya mencari referensi ke elemen/komponen anak, tetapi mereka melihat ke **tempat yang berbeda**: **`@ViewChild`** mencari *template komponen sendiri*, sementara **`@ContentChild`** mencari konten yang **diproyeksikan ke dalam** komponen melalui ``. ## @ViewChild — cari template Anda sendiri ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // by template ref @ViewChild(ChildComponent) child!: ChildComponent; // by component type ngAfterViewInit() { this.input.nativeElement.focus(); // available after the VIEW initializes this.child.doSomething(); // call a child component's method } } ``` `@ViewChild` mengakses elemen/komponen yang komponen sendiri deklarasikan dalam template-nya — tersedia di **`ngAfterViewInit`**. ## @ContentChild — cari konten yang diproyeksikan ```ts @Component({ selector: "app-card", template: `

`, // content projected here }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // the projected content is ready here (EARLIER than ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild` mengakses konten yang **induk sampaikan** (diproyeksikan melalui ``) — tersedia di **`ngAfterContentInit`**. ## Perbedaan utama ```text @ViewChild → elements in THIS component's own template → ngAfterViewInit @ContentChild → elements PROJECTED in from the parent → ngAfterContentInit (plural: @ViewChildren / @ContentChildren return a QueryList of all matches) ``` ## Versi plural ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Kueri signal modern ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Mengapa ini penting Membedakan `@ViewChild` (template Anda) dari `@ContentChild` (konten yang diproyeksikan) — dan waktu siklus hidup masing-masing (`ngAfterViewInit` vs `ngAfterContentInit`) — sangat penting ketika membangun komponen yang dapat digunakan kembali yang perlu berinteraksi dengan elemen template mereka sendiri atau konten yang dikonsumen proyeksikan ke dalamnya. Ini adalah titik kebingungan umum dan kebutuhan yang sering terjadi saat membuat perpustakaan komponen, tab, kontrol formulir, dan wrapper yang harus berkoordinasi dengan elemen anak.