CODEWITHSUNDEEP
javascriptangularionic-frameworkinput
Oak
Oak

Reputation: 72

Ionic - Angular - Two out of three input of a component have undefined value

I have a problem with @input(), two out of three input have an undefined value when I want to use it but can be display using interpolation in the template file.

.ts :

export class NoteCanvasPageComponent {
  @Input() note: any;
  @Input() canvasWidth: any;
  @Input() canvasHeight: any;

  @ViewChild("TextArea") textArea: any;

  constructor() {

  }

  ngAfterViewInit(){
    console.log(this.note.posY + " " + this.canvasHeight);
    console.log(this.note.posX + " " + this.canvasWidth);
    this.textArea.nativeElement.style.top = this.note.posY * this.canvasHeight;
    this.textArea.nativeElement.style.left = this.note.posX * this.canvasWidth;
  }

}

console.log() print this :
0.623 undefined 0.578 undefined

template file :

<textarea #TextArea class="note-canvas-page">
  {{note.text}}
  {{canvasHeight}}
  {{canvasWidth}}
</textarea>

Give :
This is a note 512 360

Why only two out of three input have undefined value in the component file ?

I use the component like this :

<div *ngFor="let note of arrayNotes">
  <note-canvas-page [canvasHeight]=canvasHeight [canvasWidth]=canvasWidth [note]=note *ngIf="note.display"></note-canvas-page>
</div>

Thank you for your help

Upvotes: 1

Views: 97

Answers (3)

mvermand
mvermand

Reputation: 6117

Another solution might be:

export class NoteCanvasPageComponent {
  _canvasWidth: any;
  _canvasHeight: any;
  _note: any;

  @Input() 
  set note(value: any) {
      this._note = value;
      initComponent();
  }

  get note() {
      return this._note;
  }

  @Input() 
  set canvasWidth(value: any) {
      this._canvasWidth = value;
      initComponent();
  }

  get canvasWidth() {
      return this._canvasWidth ;
  }

  @Input() 
  set canvasHeight(value : any) {
      this._canvasHeight = value;
      initComponent();
  }

  get canvasHeight() {
      return this._canvasHeight ;
  }

  @ViewChild("TextArea") textArea: any;

  constructor() {

  }

  ngAfterViewInit(){

  }

  initComponent() {
    if(this._note && this._canvasWidth && this._canvasHeight) {
        console.log(this._note.posY + " " + this._canvasHeight);
        console.log(this._note.posX + " " + this._canvasWidth);
        this.textArea.nativeElement.style.top = this._note.posY * this.canvasHeight;
        this.textArea.nativeElement.style.left = this._note.posX * this._canvasWidth;
    }
  }

}

This has the added value that style.top and style.left will be recalculated whenever note, canvasHeight or canvasWidth changes.

Upvotes: 2

mvermand
mvermand

Reputation: 6117

Can you change your code to the following:

export class NoteCanvasPageComponent {
  _canvasWidth: any;

  @Input() note: any;

  @Input() 
  set canvasWidth(value: any) {
      debugger;                     // <-- breakpoint 1
      this._canvasWidth = value;
  }

  @Input() canvasHeight: any;

  @ViewChild("TextArea") textArea: any;

  constructor() {

  }

  ngAfterViewInit(){
    debugger;          // <-- breakpoint 2
    console.log(this.note.posY + " " + this.canvasHeight);
    console.log(this.note.posX + " " + this._canvasWidth);
    this.textArea.nativeElement.style.top = this.note.posY * this.canvasHeight;
    this.textArea.nativeElement.style.left = this.note.posX * this._canvasWidth;
  }

}

This code will break in two places. See if it reaches breakpoint 1 before breakpoint 2 and see what the value is in breakpoint 1.

Upvotes: 1

MukulSharma
MukulSharma

Reputation: 221

Try to replace this:

 <div *ngFor="let note of arrayNotes">
      <note-canvas-page [canvasHeight]=canvasHeight [canvasWidth]=canvasWidth [note]=note *ngIf="note.display"></note-canvas-page>
    </div>

with:

    <div *ngFor="let note of arrayNotes">
      <note-canvas-page [canvasHeight]=note.canvasHeight [canvasWidth]=note.canvasWidth [note]=note *ngIf="note.display"></note-canvas-page>
    </div>

Upvotes: -1

Related Questions