Skip to main content

What are "view" and "content" in the context of Angular components?

AngularJunior~1 min read
Suggest an edit

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.
  1. 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
<!-- Parent --> <app-child> <p>This is content passed inside</p> </app-child> <!-- Child component --> @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.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit