I am displaying a list of Angular Material Cards like this:

```
<mat-card *ngFor="let todo of todos">
    <mat-card-header>
        <mat-card-title>{{{todo.title}}</mat-card-title>
    <mat-card-header>
<mat-card>

```

It works great but now I've got a custom directive that only displays the Card if it's enabled (based on the "id" property of the Todo object). And I want to use it on the same element.

```
@Directive({
    selector: '[customFeature]'
})
export class CustomFeatureDirective implements OnInit {
    @Input()
    customFeature: string;

    constructor(
        private tpl: TemplateRef<any>,
        private vcr: ViewContainerRef,
        private myService: MyService
    ) {}

    ngOnInit(): void{
        const enabled = this.myService.amIEnabled(this.customFeature)
        if(enabled)
            this.vcr.createEmbeddedView(this.tpl);
    }
}

```

But I don't know how to read the *id* property of the todo so i can assign it to the CustomFeature directive. I'm trying this:

```
<mat-card *ngFor="let todo of todos" *customFeature="todo.id">
    <mat-card-header>
        <mat-card-title>{{{todo.title}}</mat-card-title>
    <mat-card-header>
<mat-card> 

```

But the error says that you can't have multiple template bindings on one element. I thought in older versions of Angular you could do something like this. Did I completely blow the syntax or what? Thanks for any helpful tips.