Suggest an edit

Improve this article

Refine the answer for “What does ngAfterContentInit() do? When is it called?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

In Angular, `ngAfterContentInit()` is a lifecycle hook that is called **once, after Angular has inserted (projected) external content into the component through** `<ng-content>`.

## Key points

1. **What it does**:

- Lets you work with **content inserted from the parent component**.
- You can access the projected elements through `@ContentChild` or `@ContentChildren`.

2. **When it is called**:

- **Once**, after the content is first projected into the component.
- Before any view checks (`AfterViewInit`) and after `ngOnInit()`.

Example:

```ts
export class ChildComponent implements AfterContentInit {
  @ContentChild('projectedContent') content: ElementRef;

ngAfterContentInit() {
    console.log('Projected content is available:', this.content.nativeElement);
  }
}
```

```html
<child-component>
  <p #projectedContent>Hello from the parent component!</p>
</child-component>
```

- In `ngAfterContentInit`, it is already safe to work with the `<p>` inserted by the parent.

In other words, `ngAfterContentInit` **is a hook for working with content projected into the component, after it has been inserted into the DOM**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts147 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.