Suggest an edit

Improve this article

Refine the answer for “What are "view" and "content" in the context of Angular components?”. 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, "view" and "content" refer to different parts of a component and its contents:

## View and Content

1. **View**
  - This is the **component's template** and all the elements declared inside it.
  - Angular manages this DOM directly through the **View** mechanism.
  - Example: all the elements inside a component's `template` or `templateUrl` are its **view**.
2. **Content (content projection)**
  - This is the **external content** placed into the component using `<ng-content>`.
  - The parent component passes elements into the child component that were not declared in its template.
  - Angular manages this DOM separately through **Content**.

Example:

```html

<app-child>
  <p>This is content passed inside</p>
</app-child>

@Component({
  selector: 'app-child',
  template: `
    <h2>This is the component's view</h2>
    <ng-content></ng-content>
  `
})
export class ChildComponent {}
```

> Summary: **view** is the component's template, **content** is the elements passed by the parent. Angular distinguishes between them to manage the lifecycle and change detection.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.