Derive ngIf value from component input

Question

When I want to remove a component from the tree if some input is missing, I need to specify it twice in component declaration like this:

   <app-block-with-some-data *ngIf="dataForBlock" [data]="dataForBlock">
   </app-block-with-some-data>

I'd like to remove the duplication while keeping the same behavior.

How do I achieve this?

Here's StackBlitz demo for details.

Answer 1

That is impossible because ngIf is a directive, app-block-with-some-data is a component.

FYI: But you can use next code to use friendly-naming if you don't want to use the same names of your value.

<app-block-with-some-data
    *ngIf="dataForBlock; let data"
    [data]="data"
></app-block-with-some-data>