Angular Directive input is not being set

Question

I just cant find this issue here...

The directive:

@Directive({
  selector: '[appListData]'
})
export class ListDataDirective implements OnInit {

  @Input('data') data: object;
  @Input('layout') layout: string;

  templateUrl: string;

  constructor(private el: ElementRef) { }

  ngOnInit(): void {

    console.log(JSON.stringify(this.data));
    console.log(this.layout);

    this.templateUrl = 'list-data-layouts/list.html';

    if (this.layout === 'grid') {
      this.templateUrl = 'list-data-layouts/grid.html';
    } else if (this.layout === 'list') {
      this.templateUrl = 'list-data-layouts/list.html';
    }

  }
}

The template

<div appListData [data]=employees [layout]="grid"></div>

The log outputs : the layout is undefined - WHY?

I am also not sure how to load the external template files in my div. thanks.

EDIT

Per suggestions, doing the following prints out both inputs, I will stick with the second one moving forward. @nkuma_12 answer explains how it's looking for the grid property in the component's class which made sense - as eventually there will be a button changing a layout variable.

<div appListData [data]=employees layout="grid"></div> 
<div appListData [data]=employees [layout]="'grid'"></div>

I have been reading the documentation here on structural directives - nothing helped me out there. https://angular.io/guide/structural-directives#write-a-structural-directive

instead of [layout]="grid" try layout="grid" because you are assigning a string and not property. — Roman Šimík
I think all of the templateUrl are relative to the root of your application, so I don't think this would work. — nircraft

nircraft nircraft · Accepted Answer · 2018-12-04T18:12:34

Since you are using

  @Input('layout') layout: string;

in directives.

When passing input , i see you are passing [layout]="grid"></div> which makes it look for grid variable in your component where it's used and gets undefined.

You should pass value grid in single quotes: [layout]="'grid'"></div>

Also your data input value should be in double quotes: [data]="employees". Please check documentation for more details.

Angular Directive input is not being set

1 Answers