In Angular you can use the # to identify a directive like this:
<div #actualTarget></div>
I need to make mine dynamic like this:
<div #{{l + '-' + n}}></div>
What's the correct way to do this?
<div class="list-cont shadow" *ngFor="let cat of categories; let l = index">
...
<ul class="responder" *ngFor="let responder of cat.bidderResponses; let n = index">
<li>
#
</li>
</ul>
</div>
There is no dynamic reference variable in Angular Template syntax.
Inside a structual directive like ngFor your template is nested in a seperate scope.
So you could easily use it like:
<div class="list-cont shadow" *ngFor="let cat of categories; let l = index">
...
<ul class="responder" *ngFor="let responder of cat.bidderResponses; let n = index">
<li #myReference>
</li>
</ul>
</div>
A template reference variable is often a reference to a DOM element within a template. It can also refer to a directive (which contains a component), an element, TemplateRef, or a web component.
You could pass variables to your directive using the @Input() decorator and property binding and do some validation inside the directive.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
colors: string[] = [
'yellow',
'Blue',
'Red',
'Grey'
]
}
app.component.html
<div *ngFor="let color of colors">
<p appHighlight [highlightColor]="color"> {{ color }} </p>
</div>
highlight.directive.ts
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(private el: ElementRef) { }
@Input() highlightColor: string
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
working example stackblitz
There is also an open question at the angular Githup and a workaround for adding directives to host elements in component declaration:
How to dynamically add a directive?
https://github.com/angular/angular/issues/8785
Maybe you can explain more exactly what you want to do.
