How to check whether is empty? (in Angular 2+ till now)

by

Wrap ng-content in an HTML element like a div to get a local reference to it, then bind the ngIf expression to ref.children.length == 0:

template: `<div #ref><ng-content></ng-content></div> 
           <span *ngIf=" ! ref.children.length">
              Display this if ng-content is empty!
           </span>`

Updated for Angular 12; old logic (“ref.nativeElement.childNodes.length“) gives error, as nativeElement is undefined nowadays.

More Related Contents:

  1. Angular 7 go offline?
  2. How to add number with variable name? [duplicate]
  3. Firebase query if child of child contains a value
  4. Angular: conditional class with *ngClass
  5. How do I download a file with Angular2 or greater
  6. Angular window resize event
  7. Angular2 Dynamic input field lose focus when input changes
  8. How to Consume Http Component efficiently in a service in angular 2 beta?
  9. Angular 2.1.0 create child component on the fly, dynamically
  10. Angular4 – No value accessor for form control
  11. Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551
  12. What is ngDefaultControl in Angular?
  13. Property ‘value’ does not exist on type EventTarget in TypeScript [duplicate]
  14. npm WARN … requires a peer of … but none is installed. You must install peer dependencies yourself
  15. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  16. Angular 2 – Check if image url is valid or broken
  17. Angular 2 – Chaining http requests
  18. Unraveling Angular 2 book, Chapter 1, Example 5
  19. Cast int to enum strings in Typescript
  20. Module not found: Error: Can’t resolve ‘fs’ in
  21. Load JSON content from a local file with http.get() in Angular 2
  22. how to define index in angular material table
  23. How to Export JSON to CSV or Excel – Angular 2
  24. Angular 2 Final Release Router Unit Test
  25. Angular 2 Hover event
  26. angular 2 access ng-content within component
  27. How to use jQuery UI with Angular 2
  28. Is it a bad practice to use jQuery in Angular? [closed]
  29. How to Inject Angular2 Http service into es6/7 Class?
  30. Angular 4: How to read content of text file with HTTPClient

Leave a Comment