Dynamically generate exportAs variable value Angular 2

Asked Oct 18 '18 at 09:44

Active Oct 19 '18 at 01:52

Viewed 82 times

Hi I have a directive as below,

@Directive({
      selector: '[changeColor]',
      exportAs:'changeColor' 
    })
    export class ColorDirective {
@Input('mfData') public inputData: any[] = [];
        constructor(elem: ElementRef, renderer: Renderer2) {
           renderer.setStyle(elem.nativeElement, 'color', 'red');
console.log(this.inputData, 'inputData');
        }
    }

And use it as below:

<h1 #x=changeColor>Hello</h1>

What if my x value is dynamically generating (inside ngFor). How can add an index infront or after x, so that my x value will be unique? like below

<h1 #x1=changeColor>Hello1</h1>
<h1 #x2=changeColor>Hello2</h1>
....
<h1 #xn=changeColor>Hellon</h1>

Please help me guys on this.. TIA

Updated HTML with @Input variable

<div class="col-12 u-grey-container table--section u-margin-bottom-8" *ngFor="let color of colorList;let ndx = index">

 <table class="table table-striped" [mfData]="color.list" #main="changeColor" *ngIf="color.list" (mfSelectedEntities)="selectedRecords($event, schedule)">
<thead> ... </thead>
<tbody>
<template let-item ngFor [ngForOf]="main.data" let-ndx="index">
...
</tbdoy>
</table>
</div>

edited Oct 19 '18 at 01:52

asked Oct 18 '18 at 09:44

chewi

Just use `#x="changeColor"` inside `*ngFor` loop – yurzui Oct 18 '18 at 09:46
@yurzui It is already inside a *ngFor.. – chewi Oct 18 '18 at 09:51
Then it should work – yurzui Oct 18 '18 at 09:51
when i console in my directive, if there is multiple directives its always getting the first reference – chewi Oct 18 '18 at 10:22
https://ng-run.com/edit/mBDQgjKiS2PoJeWcLqD4 – yurzui Oct 18 '18 at 10:26
Lets say i have an@Input, `@Input('mfData') public inputData: any[] = []; every time I console inside my component, its the first reference's data.. Thats the problem – chewi Oct 18 '18 at 10:31
Where do you have that input? I don't see the problem here because you can refer to any directive in array through index – yurzui Oct 18 '18 at 10:33
https://ng-run.com/edit/mBDQgjKiS2PoJeWcLqD4?open=app%2Fapp.component.html – chewi Oct 18 '18 at 10:37
Edited my question with Input – chewi Oct 18 '18 at 10:44
Can you also add template and where you console it? – yurzui Oct 18 '18 at 10:47
Updated my question. – chewi Oct 19 '18 at 01:52

Dynamically generate exportAs variable value Angular 2

0 Answers0