I have elements inside ngFor loop. Each elements get reference like this #f{{floor}}b. As you see floor is a variable.
I want to pass these elements to a function.
Code:
<button #f{{floor}}b (click)="onClick(f{{floor}}b)"></button>
I tried this but it only pass a string like this f5b not the element itself:
<button #f{{floor}}b (click)="onClick('f'+floor+'b')"></button>
Full code:
<div *ngFor="let floor of floors">
<button #f{{floor}}b (click)="onClick('f'+floor+'b')"></button>
</div>
floor is a number and floors is an array of numbers.
It is okay to have same template variable name inside *ngFor, no need to make unique template variable name inside *ngFor.
Html
<div *ngFor="let floor of floors">
<button #fb (click)="onClick(fb)"></button>
</div>
Even by having similar template name, you can query the DOM using #ViewChildren decorator.
#ViewChildren('fb') fbButtons:QueryList<any>;
Just use the same variable
<div *ngFor="let floor of floors">
<button #btn (click)="onClick(btn)"></button>
</div>
or use $event.target/currentTarget
Related
I am iterating through a dictionary (called in from a .json file) and would like to check an attribute of my props with a value in the dictionary. In my first div I am setting the variable attribute to be one of the values in the dictionary. This attribute variable has the value "event" which is exactly what I want.
In the inner div, the props.item.${attribute} code is not evaluating to props.item.event, which is what I thought it would. Is there any way to interpolate the value of this variable to my props statement?
<div
v-for="data in dict"
:set="attribute = data.targetAttr"
>
<div v-if="props.item.attribute == data.key">
<a
:href="data.response"
target="_blank"
>
More Info
</a>
</div>
</div>
I have tried looking at the resource here, but the answer is only in relation to effectively mapping over lists, which is not exactly my problem.
VueJs - How to use variable in v-if?
In that case, you should try the following
<div v-if="props.item[attribute] === data.key">
I have a div that will be created as many times as I specify, basing off of the length of a variable called totalQuestionsList. I want to select the innerHTML of all the <h5> elements inside each div.
<div *ngFor="let item of totalQuestionsList; let i = index">
<h5 class="question-num">Question #{{i+1}}</h5>
</div>
How do I do this? Any help is appreciated.
you can use a reference variable and use ViewChildren
<div *ngFor="let item of totalQuestionsList; let i = index">
<h5 #h class="question-num">Question #{{i+1}}</h5>
</div>
#ViewChildren('h') elements:QueryList<ElementRef>
You can also use a directive with selector class
#Directive({
selector:'.question-num'
})
export class QuestionDirective{
constructor(public elementRef:ElementRef){}
}
And use
#ViewChildren(QuestionDirective) elements:QueryList<QuestionDirective>
//e.g. console.log(elements.first.elementRef)
In the ts file. Inject ElemementRef into the constructor
On that class there is a nativeElement.innerHtml property
Use that to get your content
I'm developing a project using Angular 8.3.
I have a loop (using *ngFor) and I need that every div that I add has an unique reference name created dinamically).
This is my example code:
<div *ngFor="let item of list; let i = index;">
<div
cdkDropList
#done0="cdkDropList"></div>
</div>
Below I have another drag and drop zone that must receive these elements:
<div
cdkDropList
#donesList="cdkDropList"
[cdkDropListData]="DonesList"
[cdkDropListConnectedTo]="[done0, done1]"
class="movie-list"
(cdkDropListDropped)="onDrop($event)">
<div *ngFor="let itemList of DonesList" cdkDrag>{{itemList}}</div>
</div>
I need to change dynamically #done0, e.g. (#done0, #done1, #done2, #done3, etc).
How can I do it? I have tryed using #done{{i}}} but it doesn't work.
I don't know if I can use trackBy in this case and how to apply it.
Many thanks,
Reference a container:
<div *ngFor="let item of list; let i = index;" #doneContainer>
<div cdkDropList></div>
</div>
and in .ts you have different references in a NodeList:
const list = this.doneContainer.childNodes
or in a more Angular way, which is better, as it will update when necessary:
#ViewChildren('doneContainer') list: QueryList<any>;
I have an array of objects. i am iterating that in loop and passing each item's name to onclick which targets a function openIt(val) in app.js file which is in assets folder. ie
Angular Code:
<div *ngFor="let item of listArray">
<button class="tabopen" onclick="openIt(item.name)">{{item.name}}</button>
</div>
app.js Code:
function openIt(data) {
console.log(data);
}
In my openIt function in app.js file i am not getting item.name. In my console it displays error that item is not defined. But when i pass static data i.e onclick="openIt('sample_data')"it does not show any error.
Even though item.name also exists i am getting correct values against this as well. I am not getting that why i am not able to pass iterative data to the parameters.
If you're using Angular then you should go with (click) because when you declare an event handler you need to surround the DOM event name in parentheses and assign a template statement to it.
<button class="tabopen" (click)="openIt(item.name)">{{item.name}}</button>
event binding: varsion 1 on-click="function", version 2 (click)="function"
<div *ngFor="let item of listArray">
<button class="tabopen" on-click="openIt(item.name)">{{item.name}}</button>
</div>
<div *ngFor="let item of listArray">
<button class="tabopen" (click)="openIt(item.name)">{{item.name}}</button>
</div>
I'm new to AngularJS and having to work on an app that has a section of nested ngRepeats such as this below.
<div class="title-bar" ng-repeat="orderType in someObj.orderTypes">
<div class="inner-panel" ng-repeat="status in orderType.statuses">
<p>{{status.Name}}</p>
<div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
<p>{{order.Stuff}}</p>
</div>
<button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="loadMoreOrdersToList()">Load More</button>
</div>
</div>
The status.Orders list can be quite large at times so I limit it. When a user wants to view more data for that specific section (which is enumerated by status) I add 3 to the orderFilterLimit. The problem is when I do this it is adding 3 to every single .order-list in the .inner-pannel element. Is there a way I can change the orderFilerLimit variable based on an id or class of the element it's attached to?
For context here is a super simple snippet of what loadMoreOrdersToList() is doing.
https://jsbin.com/vapucixesa/1/edit?js
No need of declare the orderFilterLimit inside controller, You should have scope variable inside ng-repeat itself so that it ng-repeat element will have separate copy of orderFilterLimit because ng-repeat create a child scope on each iteration.
Markup
<div class="title-bar" ng-repeat="orderType in someObj.orderTypes" ng-init="orderFilterLimit = 3">
<div class="inner-panel" ng-repeat="status in orderType.statuses">
<p>{{status.Name}}</p>
<div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
<p>{{order.Stuff}}</p>
</div>
<button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="orderFilterLimit = orderFilterLimit + 3">Load More</button>
</div>
</div>