What’s the difference between @ViewChild and @ContentChild?

by

I’ll answer your question using Shadow DOM and Light DOM terminology (it have come from web components, see more here). In general:

  • Shadow DOM – is an internal DOM of your component that is defined by you (as a creator of the component) and hidden from an end-user. For example:
@Component({
  selector: 'some-component',
  template: `
    <h1>I am Shadow DOM!</h1>
    <h2>Nice to meet you :)</h2>
    <ng-content></ng-content>
  `;
})
class SomeComponent { /* ... */ }
  • Light DOM – is a DOM that an end-user of your component supply into your component. For example:
@Component({
  selector: 'another-component',
  directives: [SomeComponent],
  template: `
    <some-component>
      <h1>Hi! I am Light DOM!</h1>
      <h2>So happy to see you!</h2>
    </some-component>
  `
})
class AnotherComponent { /* ... */ }

So, the answer to your question is pretty simple:

The difference between @ViewChildren and @ContentChildren is that @ViewChildren look for elements in Shadow DOM while @ContentChildren look for them in Light DOM.

More Related Contents:

  1. Angular 2 – how round calculated number?
  2. Angular/RxJS When should I unsubscribe from `Subscription`
  3. Dynamically add event listener
  4. What is the equivalent of ngShow and ngHide in Angular 2+?
  5. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  6. Can’t bind to ‘ng-forOf’ since it isn’t a known native property [duplicate]
  7. How to use `trackBy` with `ngFor`
  8. Angular: Cannot find a differ supporting object ‘[object Object]’
  9. How to call an rest api while bootstrapping angular 2 app
  10. How to import Angular Material in project?
  11. Is it possible to use a pipe in the code? [duplicate]
  12. Angular 2 Form “Cannot find control with path”
  13. Angular 4 Pipe Filter
  14. Angular 4 validator to check 2 controls at the same time
  15. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  16. Multiple layouts for different pages in Angular 2
  17. Multiple conditions in ngClass – Angular 4
  18. angular4 httpclient csrf does not send x-xsrf-token
  19. How do I get the absolute path of the current page in Angular 2?
  20. How to use variable to define templateUrl in Angular2
  21. Behaviour subject initial value null?
  22. Change Detection issue — Why is this changing when it’s the same object reference with On Push
  23. How to reset form validation on submission of the form in ANGULAR 2
  24. Angular 4 Lazy loading with named router-outlet not working
  25. What is the lifecycle of a service in Angular 5
  26. Conditionally apply click event in Angular 4
  27. Angular4 APP_INITIALIZER won’t delay initialization
  28. Angular load external configuration before AppModule loads
  29. Firestore Error: The query requires an index
  30. Do we need to unsubscribe from observable that completes/errors-out?

Leave a Comment