Error: The property 'settDate' is not defined and cannot be read

Question

Error: The property 'settDate' is not defined and cannot be read

In Angular, I'm facing an issue when trying to pass data from one component to another on a click event. The structure of my components is as follows:

Parent Component

@Component({
  selector: 'app-reporting-filter',
  templateUrl: './reporting-filter.component.html',
  styleUrls: ['./reporting-filter.component.scss'],
  providers: [ProjectShipmentService]
})

export class ReportingFilterComponent implements DoCheck {

  @ViewChild(TjlShipdateFilterComponent, {static: false})
  private tjl: TjlShipdateFilterComponent;

  finalResult: ShipDateFilterModel[];

  click() {
    this.elem = this.getResultOnFilter(this.firstSelection, this.secondSelection);
      this.tjl.settDate(this.finalResult);
  }
   ........}

Child Component Structure:

Component({
  selector: 'app-tjl-shipdate-filter',
  providers: [ProjectShipmentService],
  templateUrl: './tjl-shipdate-filter.component.html',
  styleUrls: ['./tjl-shipdate-filter.component.scss']
})
export class TjlShipdateFilterComponent implements DoCheck {
 tljShipDate: ShipDateFilterModel[];
  @Input() settDate(e: ShipDateFilterModel[]) {
    this.tljShipDate = e;
  }
......}

Content of reporting-filter.component.html:

      <dxi-item  [ratio]="1">
              <dx-button (onClick)="click()" style="padding: 1vw 3vw 1.5vw 3vw; text-align: center; font-weight: bold;">Filter</dx-button>
      </dxi-item>

However, upon clicking the button and executing 'this.tjl.settDate(this.finalResult);' in the parent component, I encounter the following error:

TypeError: Cannot read property 'settDate' of undefined

We are unsure if there is anything missing here.

https://i.sstatic.net/7yNl1.png

javascript angular typescript angular7

Answer 1

Answer №1

Instead of directly calling methods on the child component, you have the option to pass data and bind it to the Input setter. Remember to include a space between set and Data when implementing this.

 @Input() set Data(e: ShipDateFilterModel[]) {
    this.tljShipDate = e;
  }

In the parent component, create a variable that can be passed down to the child component, like so:


@Component({
  selector: 'app-reporting-filter',
  template: ` 
              <button (click)="click()">Click Me</button>
              <app-tjl-shipdate-filter [data]="tjlData" ></app-tjl-shipdate-filter>
  `,
  providers: [ProjectShipmentService]
})

export class ReportingFilterComponent {
  @ViewChild(TjlShipdateFilterComponent, {static: false})
  private tjl: TjlShipdateFilterComponent;
  private tjlData: any
  click() {
    this.tjlData = 'example data to pass'
  }
}

A functional stackblitz demo can be viewed here: https://stackblitz.com/edit/angular-r24zqd

Answer 2

Instead of directly calling methods on the child component, you have the option to pass data and bind it to the Input setter. Remember to include a space between set and Data when implementing this.

 @Input() set Data(e: ShipDateFilterModel[]) {
    this.tljShipDate = e;
  }

In the parent component, create a variable that can be passed down to the child component, like so:


@Component({
  selector: 'app-reporting-filter',
  template: ` 
              <button (click)="click()">Click Me</button>
              <app-tjl-shipdate-filter [data]="tjlData" ></app-tjl-shipdate-filter>
  `,
  providers: [ProjectShipmentService]
})

export class ReportingFilterComponent {
  @ViewChild(TjlShipdateFilterComponent, {static: false})
  private tjl: TjlShipdateFilterComponent;
  private tjlData: any
  click() {
    this.tjlData = 'example data to pass'
  }
}

A functional stackblitz demo can be viewed here: https://stackblitz.com/edit/angular-r24zqd

Error: The property 'settDate' is not defined and cannot be read

Answer №1

Similar questions

Is there a way to confirm that a method was invoked using the internal testing framework?

The texture on the SphereGeometry in Three JS is failing to render correctly

Design a dynamic backdrop using three.js

Is it possible to create a polar grid using Three JS Gridhelper?

Using jQuery to dynamically add a value to a comment string

Using pdfkit to create a PDF and then returning it as a base64 string from a function

Using a nodejs module is causing an error in my code

Safari experiencing issues with Brightcove's chromeless video player controls

Implement a bootstrap modal to pop up upon successful form validation using the formvalidation.io

Firebase Functions utilizing Realtime Database to update nested child data

Challenges arise with dependencies during the installation of MUI

Troubleshooting deployment problems in Heroku

Having trouble submitting data to a NextJS API route?

Can content projection be utilized from a child component in Angular?

using express routing to display the username or id in the URL

The value of the variable in the controller is not being successfully assigned the data that is resolved

The responses for several HTTP POST requests are not being received as expected

Column spilling over with cards

Building a React TypeScript project is successful on Windows, but encounters issues when attempted on a

A simple guide on logging into Discord with token using the Selenium library in Python