The Angular component property of type DataBindingDirective lacks an initializer and is not explicitly assigned in the constructor

I encountered a compilation error:

The property with the type DataBindingDirective is not initialized in the constructor and is not definitely assigned.

@ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;
                                  ~~~~~~~~~~~

My suspicion is that this issue may be related to package versions, as everything seems to work fine on StackBlitz (see working example: StackBlitz).

Here is a larger portion of the code:

export class NPEComponent implements OnInit {
  rowData$: Observable<Array<NPE>> = of([]);
  public filter$: Observable<CompositeFilterDescriptor | null>;
  @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;  // compilation error here

  constructor(private activatedRoute: ActivatedRoute) {

    this.filter$ = this.activatedRoute.queryParams.pipe(
      map(params => params['name']),
      distinctUntilChanged(),
      map(searchTerm => {
        if (!searchTerm) return null;

        return (<CompositeFilterDescriptor>{
          logic: 'or',
          filters: [ buildFilterItem('organizationName', searchTerm) ]
        })
      }),
    );
  }

  ngOnInit(): void {
    this.rowData$ = this.NPEService.apiNPEGet();
  }

Packages versions listed in packages.json :

  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

Angular CLI version in PowerShell:

>ng --version
Angular CLI: 13.3.10
Node: 18.13.0 (Unsupported)
Package Manager: npm 8.19.3
OS: win32 x64
Angular: 13.3.12
Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.10
@angular-devkit/build-angular   13.3.10
@angular-devkit/core            13.3.10
...
typescript                      4.6.4

Answer №1

This issue is directly linked to a strict TypeScript setup. To resolve it, consider using the non-null assertion operator "!" like so:

@ViewChild(DataBindingDirective) dataBinding!: DataBindingDirective;

Note that StackBlitz does not show this error because the project lacks strict type checking configurations in the tsconfig.json file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Dynamically Determine if a Value Matches a Union Type in Typescript

After creating a Union type of supported methods, the goal is to verify if a specific method belongs to the set of supported methods and then execute it dynamically. One commonly used approach is to use an array containing the names of the supported method ...

Angular 17 Integration with FullCalendar PluginPluginDef

Seeking help with understanding the CalendarOptions.plugins key in FullCalender 6.1.11 for Angular 17. The examples on the FC website demonstrate using plugins as an array imported into the component like this: import dayGridPlugin from '@fullcalenda ...

Is it possible to perform remote file upload using Selenium in TypeScript?

Is there a specific way to manage remote file uploads using selenium-webdriver in typescript? Here is code that functions in javascript for this purpose: import remote from 'selenium-webdriver/remote'; // import * as remote from 'selenium- ...

The specified property 'nodeName' is not recognized within the data type 'EventTarget'

In the code snippet below, we are checking whether the user is interacting with an input field, textarea, or contenteditable element. If any of these conditions are met, we should clear out the keys array and stop the script execution. let keys: any[] = [] ...

Using Angular with THREE JS integration in Javascript

I am currently experimenting with Angular and facing a challenge that I can't seem to figure out. The issue I am encountering involves integrating a javascript code, SunLight.js, from the repository https://github.com/antarktikali/threejs-sunlight in ...

Not sure how to determine the types of function parameters

Is it possible to replace the anys in the following code snippet? I want to eliminate the TypeScript warning "Unexpected any. Specify a different type" interface Props { isPrime: boolean; } interface Other { isEdit: boolean; } type TFunc = (a: an ...

Pressing the enter key on a table column in Angular will trigger an automatic button click

In my Angular 9 application, I have a dynamic table in the HTML with editable columns. When I edit a value and press ENTER, it triggers a click event associated with a button in another column instead of applying the edit. How can I prevent this unexpected ...

Struggling to reset the first item in an HTML select dropdown with Angular - any tips?

I am having an issue with my dropdown in a modal window. When I first open the modal, the dropdown works as expected. However, if I make a selection and then close and reopen the modal, the selected value remains instead of resetting to 'None selected ...

zod - Mastering the Art of Dive Picking

Working with zod and fastify, my UserModel includes the username and device properties. The username is a string, while the device consists of "name", "id", and "verified" fields in an object (DeviceModel). For the sign-up process, I need to return the co ...

Utilizing Angular 5 alongside the powerful ngx-cookie library and configuring it all within the system

Currently in the process of upgrading a project from AngularJS 1 to Angular 5. In need of a package for cookie manipulation, I came across ngx-cookie. However, facing a hurdle as I cannot alter systemjs.config.js as per the instructions provided, given t ...

Accessing querySelector for elements with numerical values in their name

Here is a URL snippet that I need to work with: <h1 id="header_2" title="mytitle" data-id="header_title" class="sampleclass " xpath="1">mytitle<span aria-label="sometest" class="sa ...

What is the best way to set up the --public-host for operating an Angular universal app in conjunction with an Ngin

Looking to implement HMR for a universal app, I want to confirm if it is possible. I have successfully set up and run an Angular 8 application using the default "ng new" command. To run it behind a reverse proxy, I modified npm start as follows: e.g. { " ...

Intercepting the initialization process of a web application created with Angular-CLI

Is there a way to delay the bootstrapping process of an Angular-CLI app in order to allow a loading animation to finish before rendering the actual content? Currently, when the root component is bootstrapped, any CSS animations are automatically removed fr ...

Troubleshooting Problem with Dependency Injection in Angular 2 Services

Within my application, there is a Module that consists of two components: ListComponent and DetailsComponent, as well as a service called MyModuleService. Whenever a user visits the ListComponent, I retrieve the list from the server and store it in the Li ...

What is the best method to compare two times and determine if they fall on the same date within an Angular 2/4 application? The time should be in the format of "HH:mm AM

Is there a way to validate if my time period falls on the same date? let startTime = currentSelection.startTimeHr + ":" + currentSelection.startTimeMin + " " + currentSelection.startTimeAMPM; let endTime = currentSelection.stopTimeHr + ":" + currentSele ...

Check the attribute sequence in Angular HTML templates

Currently, our team is in discussions during code reviews regarding the order of attributes. We would like to find a way to streamline this process and believe that having support from an IDE or tool would be beneficial. Does anyone have recommendations f ...

Encountered an error during npm installation: Fetch Package Metadata error occurred while attempting to request from http://registry.npmjs.org/concurrently, the cause being a socket hangup

I am encountering the following errors: "An unexpected fetchPackageMetaData error occurred while making a request to http://registry.npmjs.org/concurrently failed due to a socket hang up." I am currently connected through a corporate proxy with the firew ...

Is it permissible to employ binding within the <script> element on an html page?

Is it feasible to apply binding within script tags on an HTML page? For instance: <script src="{{SOME_VARIABLE}}"></script> Would this be a viable option? ...

Breaking up assignments in a loop with Angular's *ngFor

Having issues while attempting to iterate through a JavaScript dictionary within my HTML markup using *ngFor with Object.entries, and encountering an error message: Error: Unexpected token [, expected identifier, keyword, or string at column 5 in [let ...

the most effective method for including a new field in a formGroup

How can I correctly add a new object property to an Angular formGroup? Currently, my setup looks like this: ngOnInit() { this.form = this.fb.group({ // store is the formGroupname store: this.fb.group({ // branch and code are formControlN ...