Angular component Input always return undefined

Question

One specific component of my application doesn't bind any input I pass.

My component

@Component({
    selector : 'default-actions',
    templateUrl : './default.actions.template.html',
    styleUrls: [ './default.actions.style.scss' ],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DefaultActionsComponent
{
    protected entityId;
    protected uuid = UUID.UUID();
    protected extraForms;

    @Input() protected data;
    @Input() protected structure;
    @Input() protected targetId;
    @Input() protected table;
    @Input() protected row;
    @Input() protected modal: ModalDirective;
    @Input() protected entity;
    @Input() protected entityObject: Entity;
    @Input() protected parentWrapper;
    @Input() protected foo;

    constructor(
        protected translate: TranslateService,
        protected activatedRoute: ActivatedRoute,
        protected actionService: DefaultActionsService,
        protected router: Router,
        protected entityService: EntityService,
        protected http: HttpAuthenticationService
    ) {}

    public ngOnInit() {
        console.log(this.foo);
    }

I use it here:

<default-actions
    [table]="table['defaultListingTableComponent']"
    [row]="row"
    [foo]="'bar'"
    [modal]="modal"
    [structure]="availableColumns"
    [entityObject]="entityObject"
    [targetId]="selectedRows()">
</default-actions>

I added foo input in order to do some debugging. In console the line console.log(this.foo); outputs undefined. The same happens to all other inputs.

I believe there's something wrong with the component itself, however I'm unable to find it. Other components of my application are working.

Answer 1

You should probably implement OnInit interface to make this work? Can you try?

Answer 2

EDIT:

I just made a sample on Stackblitz : https://stackblitz.com/edit/angular-qrgy7k

Tip:

Instead of directly passing string like [foo] = "'bar'", make a variable in the parent component and then pass it as [foo] = "yourVariable"

Parent Component HTML:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<app-demo
[mydata]="datatopass"
>  
</app-demo>

Parent Component TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  datatopass = "sad";
}

Child Component HTML:

<p>
demo works!
</p>
<div>
  Data: {{ mydata }}
</div>

Child component TS:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {

  @Input() mydata;

  constructor() { }

  ngOnInit() {
    console.log(this.mydata);
  }

}

---

ngOnInit() will run when the component is initialized and at that point, it is possible that the properties you have bind do not contain data from the parent component. Try ngOnChanges(), ngAfterViewInit()

On way to tackle is to use Observable and Subject.

Answer 3

As mentioned by @Yash ngOnInit is the correct place to do that But you can add ngOnChanges and add a console.log there, it might be undefined at first but whenever input changes it goes to that so you might get the value later if it is coming at any point

ngOnChanges() {
console.log(this.foo)
}

Answer 4

Have you tried using Observables instead? As far as I can see, your input might still be undefined when it is passed to that child component. @Input can be a little weird if you're not used to how it works.

Answer 5

You can try implementing AfterViewChecked and see if you have value in ngAfterViewChecked like this:

@Component({
    selector : 'default-actions',
    templateUrl : './default.actions.template.html',
    styleUrls: [ './default.actions.style.scss' ],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DefaultActionsComponent implements AfterViewChecked
{
    protected entityId;
    protected uuid = UUID.UUID();
    protected extraForms;

    @Input() protected data;
    @Input() protected structure;
    @Input() protected targetId;
    @Input() protected table;
    @Input() protected row;
    @Input() protected modal: ModalDirective;
    @Input() protected entity;
    @Input() protected entityObject: Entity;
    @Input() protected parentWrapper;
    @Input() protected foo;

    constructor(
        protected translate: TranslateService,
        protected activatedRoute: ActivatedRoute,
        protected actionService: DefaultActionsService,
        protected router: Router,
        protected entityService: EntityService,
        protected http: HttpAuthenticationService
    ) {}

    public ngOnInit() {
        console.log(this.foo);
    }

    ngAfterViewChecked() {
      console.log(this.foo);
    }

Answer 6

The undefined output generated because you use ChangeDetectionStrategy.onPush

OnPush works by comparing references of the inputs of the component. so in your case the object reference is always the same. so the OnPush change detector did not get triggered.

you can reference to this url for more explanations: https://blog.angular-university.io/onpush-change-detection-how-it-works/