{"id":1994,"date":"2019-08-15T10:57:11","date_gmt":"2019-08-15T08:57:11","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=1994"},"modified":"2023-12-20T19:57:44","modified_gmt":"2023-12-20T18:57:44","slug":"angular-viewchild-static-property-in-ng8","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-viewchild-static-property-in-ng8\/","title":{"rendered":"Angular ViewChild – static property in ng8"},"content":{"rendered":"

Some of you might have stumbled upon an unexpected error message, while updating your project from ng7 to ng8. We all know that. Everything runs smoothly and we use the last 10 minutes before heading off for the update. Not a major issue. Already having packed your stuff and ready to head home, you get this message.<\/p>\n

\"\"<\/a><\/p>\n

What went wrong? Lets have a look, as knowing this might save you a little time and surprises.<\/p>\n

Quick Fix<\/strong>
\nTo solve the problem fast without much reading, you just have to add a static property {static<\/a>: false}<\/code> or {static<\/a>: true}<\/code> into every @ViewChild\/@ContentChild decorator. {static<\/a>: true}<\/code> forces the initialization of the component\/directive already in ngOnInit, {static<\/a>: false}<\/code> changes the timing to ngAfterViewInit for @ViewChild and ngAfterContentInit for @ContentChild.<\/p>\n

Whats the Problem?<\/h3>\n

So our problem is the @ViewChild<\/strong> or the @ContentChild<\/strong> property decorator. In short these decorators make it possible to include any components or directives, which are a direct child to the component. With @ViewChild you include elements you added to the component yourself. Contrary to that @ContentChild includes a reference to content that has been placed in a component with the <ng-content>-tag.<\/p>\n

To learn in depth what they do and how to use them you can check it out here<\/a>.<\/p>\n

Lets have a look at an example we used earlier in this blogpost about Content Projection in Angular<\/a>. The following code shows the old version in Angular 7, where we included three directives with the selectors appCardBody, appCardFooter and appCardHeader.<\/p>\n

import {\r\n  Component,\r\n  ContentChild,\r\n  Directive,\r\n  OnInit,\r\n  AfterContentInit,\r\n} from '@angular\/core';\r\n\r\n@Directive({\r\n  selector: '[appCardBody]'\r\n})\r\nexport class CardBodyDirective {\r\n}\r\n\r\n@Directive({\r\n  selector: '[appCardFooter]'\r\n})\r\nexport class CardFooterDirective {\r\n}\r\n\r\n@Directive({\r\n  selector: '[appCardHeader]'\r\n})\r\nexport class CardHeaderDirective {\r\n}\r\n\r\n@Component({\r\n  selector: 'app-card',\r\n  templateUrl: '.\/card.component.html',\r\n  styleUrls: ['.\/card.component.css']\r\n})\r\nexport class CardComponent{\r\n  @ContentChild(CardHeaderDirective) header?: CardHeaderDirective;\r\n  @ContentChild(CardBodyDirective) body?: CardBodyDirective;\r\n  @ContentChild(CardFooterDirective) footer?: CardFooterDirective;\r\n\r\n  constructor() {}\r\n}<\/pre>\n
To show both decorators we also included In the Card Component as @ViewChild in app.component.ts as followed:<\/p>\n
import {AfterContentInit, AfterViewInit, Component, ContentChild, OnInit, ViewChild} from '@angular\/core';\r\nimport {CardBodyDirective, CardComponent, CardFooterDirective, CardHeaderDirective} from \".\/card\/card.component\";\r\n\r\n@Component({\r\n  selector: 'my-app',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: [ '.\/app.component.css' ]\r\n})\r\nexport class AppComponent{\r\n  @ViewChild(CardComponent)card: CardComponent;\r\n\r\n  name = 'Angular';\r\n}<\/pre>\n
So the application is running great and we decide to update from Angular 7 to Angular 8. After the update is finished we see, that the @ViewChild and @ContentChild decorators complain about a shortage of\u00a0 arguments. Why is that? Whats happenig here?<\/p>\n
@ViewChild in app.component.ts:<\/p>\n
\"\"<\/a><\/p>\n
@ContentChild in card.component.ts:<\/p>\n
\"\"<\/a><\/p>\n
The solution comes with the timing of the component initialization. Lets dig into this and find out.<\/p>\n
Adding the static property.<\/h3>\n
The reason for this error is fast and simple to detect, if you know what has changed in Angular 8. The missing argument is the newly introduced static-property. It is a boolean, that determines the timing of component initialization.<\/p>\n
<=Angular 7:<\/h4>\n
As you may know (See: On Init Life Cycle Hook<\/a>) in most cases the @ViewChild\/@ContentChild gets initialized after the main component initialization. So it is more safe to put the component initialization code that uses the references in the ngAfterViewInit<\/code> Lyfecycle Method (for @ContentChild -> ngAfterContentInit<\/code>).<\/p>\n
So without the static argument, the decision when to resolve the query was made by the compiler. Each case was examined an decided individually. The @ViewChild\/@ContentChild queries got bundled in two categories. Static<\/strong> and dynamic<\/strong>. Following this categorization, the querie results were made available at different times:<\/p>\n