@ViewChild in *ngIf

by

Use a setter for the ViewChild:

 private contentPlaceholder: ElementRef;

 @ViewChild('contentPlaceholder') set content(content: ElementRef) {
    if(content) { // initially setter gets called with undefined
        this.contentPlaceholder = content;
    }
 }

The setter is called with an element reference once *ngIf becomes true.

Note, for Angular 8 you have to make sure to set { static: false }, which is a default setting in other Angular versions:

 @ViewChild('contentPlaceholder', { static: false })

Note: if contentPlaceholder is a component you can change ElementRef to your component Class:

  private contentPlaceholder: MyCustomComponent;

  @ViewChild('contentPlaceholder') set content(content: MyCustomComponent) {
     if(content) { // initially setter gets called with undefined
          this.contentPlaceholder = content;
     }
  }

More Related Contents:

  1. Triggering change detection manually in Angular
  2. ExpressionChangedAfterItHasBeenCheckedError Explained
  3. How should I use the new static option for @ViewChild in Angular 8?
  4. What’s the difference between markForCheck() and detectChanges()
  5. How to force a component’s re-rendering in Angular 2?
  6. How to detect when an @Input() value changes in Angular?
  7. Trigger update of component view from service – No Provider for ChangeDetectorRef
  8. Angular @ViewChild() error: Expected 2 arguments, but got 1
  9. Angular2 ngFor OnPush Change Detection with Array Mutations
  10. Angular2: *ngFor does not update when array is updated
  11. What is the difference between declarations, providers, and import in NgModule?
  12. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  13. Angular routerLink does not navigate to the corresponding component
  14. Default sorting in Angular Material – Sort header
  15. ng2 – Difference between ng-container and ng-template tags
  16. How to return observable from subscribe
  17. How to use pipes in Angular 5 reactive form input
  18. Syntax Error in Angular App: Unexpected token
  19. How to mock Angular 4.3 httpClient an error response in testing
  20. How to add multiple headers in Angular 5 HttpInterceptor
  21. Angular 2 creating reactive forms with nested components
  22. Limit input field to two decimal places – Angular 5
  23. Angular 6 – how to mock router.events url response in unit test
  24. How to create and download text/Json File with dynamic content using angular 2+
  25. Angular4 Load external html page in a div
  26. angular2: http post not executing
  27. FormControl.detectchanges – why use distinctUntilChanged?
  28. Angular5: Deploying Angular application to multiple clients
  29. Cypress 12.8.1 not working with Stripe Elements iframe
  30. How to use angular2 built-in date pipe in services and directives script files [duplicate]

Leave a Comment