Dynamically bind to Google tagging attribute data-tracking-label="" - angular5

Question

I am trying to bind data-tracking-label="plan.priceplan_name".
Not sure how do i go about binding the priceplan_name dynamically to the data-tracking-label.
Already tried a few options including:
data-tracking-label={{plan.priceplan_name}} - which has error :
Uncaught Error: Template parse errors:
Can't bind to 'tracking-label' since it isn't a known property of 'div'.
Below is a snippet of my code.
<div *ngFor="let plan of plans; let i = index" class="col-md-3 pt-2 pb-2 pl-2 pr-2">
<div class="card">
<div class="card-body row p-0" (click)="selectPlan(plan, i)" data-tracking-category="SEA - Choose-plan" data-tracking-action="Click" data-tracking-label={{plan.priceplan_name}}>
<div class="first-sec col-6 pt-2 pb-2 rounded-left">
<h3>{{plan.priceplan_name}}</h3>
<div class="position-bottom">
<h2 class="mb-0">R{{plan.base_priceplan_cost | number:'1.0-2'}}pm</h2>
<h5>x{{plan.contract_duration}}</h5>
</div>
</div>
</div>
</div>
</div>

Answer 1

Here is another way to add the tags which is being used.
Note that a service with a windowRef provider was added to the app.module.ts and imported in every controller that makes use of the dataLayer.
(click)="myFunstion(param); dataLayer.push({event:'MyEvent', category:'MyCategory', action:'Click', label:plan.priceplan_name})
And in the controller:
import { WindowRef } from '../WindowRef';
Declare var before constructor:
dataLayer = this.winRef.nativeWindow.dataLayer;
And add variable inside constructor:
private winRef: WindowRef