I'm wanting to access each row of my repeater after it's been rendered say from a button click or something similar. Whats the Angular 2 way of doing this?
Thank in advance
<section class="section">
<article class="article" *ngFor="let item of slides; let i = index">
<figure class="figure" *ngIf="item.show">
<img src="{{item.image}}" alt="{{item.description}}"/>
<figcaption>{{item.description}}</figcaption>
</figure>
</article>
<mySlideShow style="display:block;clear:both;" [aList]="slides">click me</mySlideShow>
</section>
Edit:
So I add a public boolean "show" and the initialised it during the ngOnInit() phase. I then have a click event which passes in the object and then I increment by index.
I know this sounds like an obvious one, but just pass the item as a parameter to your (click) method.
<div (click)="onDivClick(item)">Click me!</div>
If you change anything in that item, you probably have to manually call change detection though.
constructor(private changeDetectorRef: ChangeDetectorRef) {}
// ...
onDivClick(item: ISlide): void {
item.description = "some new description";
changeDetectorRef.detectChanges();
}
Related
I have implemented drag and drop feature referring to a youtube tutorial
I have *ngFor which will generate divs from existing roomsFloorZone array, now my objective is to generate divs using style attribute and value received from backend response provided to the same *ngFor, as all the divs from existing roomsFloorZone or from backend response needs to be under same parent div
I have tried with already existing elements present in roomsFloorZone
import {Component, OnInit, AfterViewInit, Input, SimpleChange,
SimpleChanges} from '#angular/core';
#Component({
selector: 'floor-zone',
templateUrl: './floorzone.component.html',
styleUrls: ['./floorzone.component.scss']
})
export class FloorZoneComponent{
urlFloorZoneIn: any;
roomsFloorZoneIn: any;
#Input() urlFloorZone;
#Input() roomsFloorZone;
#Input() currentBoxFloorZone;
ngOnChanges(changes: SimpleChanges) {
if (changes.urlFloorZone && changes.urlFloorZone.currentValue) {
this.urlFloorZoneIn = changes.urlFloorZone.currentValue;
}
if (changes.roomsFloorZone && changes.roomsFloorZone.currentValue) {
this.roomsFloorZoneIn = changes.roomsFloorZone.currentValue
}
}
dropzone1 = [];
currentBox?: string = this.currentBoxFloorZone;
move(box: string, toList: string[]): void {
box = this.currentBoxFloorZone;
this.removeBox(box, this.roomsFloorZoneIn);
this.removeBox(box, this.dropzone1);
toList.push(box);
}
removeBox(item: string, list) {
if (list.indexOf(item) !== -1) {
list.splice(list.indexOf(item), 1);
}
}
}
I have an array existing roomsFloorZoneIn , from which I drag and drop the elements in the below html and the *ngfor works for that
html
<div id="toget" class="dropzone" [ngStyle]="{'width':'100%','background-
image': 'url('+urlFloorZoneIn+')','background-repeat': 'no-repeat',
'background-position': 'center', 'background-size': '100% 100%',
'border':'1px solid black', 'height':'340px'}" appMovableArea
appDropzone (drop)="move(currentBox, dropzone1)">
<div class="box" *ngFor="let box of dropzone1" appDroppable
(dragStart)="currentBox = box" appMovable>
{{ box.dis }}
</div>
</div>
My objective is to provide style(transform attribute) and (abc or def) for {{box.dis}} taken from below snippet
[I have style and node values handy]
to *ngFor for placing the divs
`<div xmlns="http://www.w3.org/1999/xhtml">
<!--bindings={
"ng-reflect-ng-for-of": ""
}-->
<div _ngcontent-c5="" appdroppable="" appmovable=""
class="box draggable movable ng-star-inserted" touch-action="none"
style="transform: translateX(183.2%) translateY(56%);"> abc
<span _ngcontent-c5="">X</span>
</div>
<div _ngcontent-c5="" appdroppable="" appmovable=""
class="box draggable movable ng-star-inserted" touch-action="none"
style="transform: translateX(183.2%) translateY(56%);"> def
<span _ngcontent-c5="">X</span>
</div>
</div>`
So this *ngFor for should work for existing elements(roomsFloorZoneIn) as well as I should be able to insert some elements received from backend(using their style attribute and node value)
Note: I already have the style and node value handy
If the two lists can come one after the other, you can use two separate <div>'s, both with *ngFor's using the two Arrays:
<div class="myEnclosingDiv">
<div class="firstList" *ngFor="let element of firstArray">
{{ element.stuff }}
</div>
<div class="secondList" *ngFor="let element of secondArray">
{{ element.otherStuff }}
</div>
</div>
On the other hand, if the two lists need to be mixed somehow, you simply create a new Array in your TypeScript code and use a single *ngFor.
For some reason I can't get the value of the list element in the html despite using document.getElementByID and it has the same id. It claims that the element is undefined. Here is the code:
fileupload.component.ts:
ngOnInit() {
var x = document.getElementById('lemons');
if(x){
console.log('it does exits')
x.addEventListener('click', function(e:any){
console.log(x.innerHTML);
});
}
}
fileupload.component.html:
<div class="row" id="filesDisplay">
<div class="col-md-4" id="files">
<li *ngFor="let child of tree" id="lemons">
{{child}}
</li>
</div>
The *ngFor directive is processed after the OnInit hook, so if you want to get an element generated with the *ngFor you should use:
ngAfterViewInit() { }
Also you are duplicating the id, this means it only will select the first element.
lifecycle-hooks angular's guide
Edit: added angular guide
You can not repeat same html id for all the li's. You need to add index to id to diffrentiate.
<div class="row" id="filesDisplay">
<div class="col-md-4" id="files">
<li *ngFor="let child of tree" (click)="test(child)">
{{child}}
</li>
</div>
and in javascript you need to pull the id accordingly.
ngOnInit() {
test(res) {
// perform your logic here..
}
}
You no need to use jquery here where angular is providing all your need in DOM manipulation.
I have a rather sophisticated template for Kendo ListView using knockout-kendo.js bindings. It displays beautifully. My problem is that I need to use the visible and click bindings in parts of the template, but I can't get them to work. Below is a simplified version of my template. Basically, deleteButtonVisible determines whether the close button can be seen, and removeComp removes the item from the array.
<div class='template'>
<div >
<div style='display:inline-block' data-bind='visible: deleteButtonVisible, event: {click: $parent.removeComp}'>
<img src='../../../Img/dialog_close.png'></img>
</div>
<div class='embolden'>#= type#</div><div class='label1'> #= marketArea# </div>
<div class='label2'> #= address# </div>
<!-- more of the same -->
</div>
The view model:
function CompViewModel() {
var self = this;
self.compData = ko.observableArray().subscribeTo("compData");
self.template = kendo.template(//template in here);
self.removeComp = function (comp) {
//do something here
}
}
html:
<div class="row" >
<div class="col-md-12 centerouter" id="compDiv" >
<div class="centerinner" id="compListView" data-bind="kendoListView: {data: compData, template: template}"></div>
</div>
</div>
finally, sample data:
{
type: "Comparable",
marketArea: "",
address: "2327 Bristol St",
deleteButtonVisible: true
},
Take in count that the deleteButtonVisible must be a property on the viewModel linked to the view.You are not doing that right now. The click element can v¡be access from the outer scope of the binding and remove the $parent.He take the method from the viewmodel. Take in count that every thing that you take on the vie must be present on the view model for a easy access.
for example,
<div ng-repeat="item in items">
<p>item.title</p>
...
...
...
<p>item.up</p>
</div>
As i know ,anchor scroll need to specify an id for the anchor, but how can i do the anchor scroll without id, The situation is there's another loop wrap this item repeat. and i can't specify an id like
<div ng-repeat="item in items">
<p id="anchor{{$index}}">item.title</p>
...
...
...
<p>item.up</p>
</div>
So if the code is like below, there will be multi id="anchor{{$index}}"
<div ng-repeat="parent in parents">
<div ng-repeat="item in items">
<p id="anchor{{$index}}">item.title</p>
........
</div>
</div>
And i don't want to use two indexs to specify the id, or the code will be too complex.
How can i solve it .....Thanks
Without knowing your exact scenario, I would say that you are going to have to artificially create some kind of unique anchorId on the elements you care about.
Again, I don't know what your controller or model look like, but you could use a technique similar to this.
angular.forEach(this.parents, function(parent, i){
//Add unique anchorId to parent
parent.anchorId = "anchor-" + i;
angular.forEach(parent.children, function(child, j){
//Add anchorId to child as well
child.anchorId = "anchor-" + i + "-" + j;
});
});
This will basically give you something you can bind to in the DOM and then trigger a scroll with a click event. The bindings would be similar to what you have above.
<div data-ng-repeat="parent in ctrl.parents">
<h1 id="{{parent.anchorId}}">{{parent.name}}</h1>
<div data-ng-repeat="child in parent.children">
<h2 id="{{child.anchorId}}" class="child">
{{child.name}}
<small>
<a href="" ng-click="ctrl.scrollTo(parent.anchorId)">
| to {{parent.name}}
</a>
</small>
</h2>
</div>
</div>
And finally in your controller you could create a scrollTo method that looked something like this.
Ctrl.prototype.scrollTo = function(anchorId){
this.$location.hash(anchorId);
this.$anchorScroll();
};
This will basically do what you want and allow you to scroll around to your hearts content.
I've wrapped all this up in a jsFiddle example so you can see the full working example.
I want to build simple page where user can select one photo from list and modify some properties, so i had built the model:
model = {
newPhotos: [],
currentPhoto: {
id: 0,
description: ""
},
setCurrent: function (photo, e) {
ko.mapping.fromJS(ko.mapping.toJS(photo), viewModel.currentPhoto);
}
}
and markup:
<div class="content" data-bind="foreach: newPhotos">
<div class="photo" data-bind="click: $parent.setCurrent">
<div class="frame" data-bind="img: imageSrc">
</div>
</div>
</div>
<div class="edit-area" data-bind="with: currentPhoto">
<canvas id="image-edit" />
<textarea class="multi-line" name="PhotoDesc" data-bind="value: description"></textarea>
</div>
Main idea is that when user click on photo, setCurrent function called and there i can update currentPhoto with view model that click binding pass into setCurrent, but there is problem ko.mapping.fromJS(jsObj, viewModel) (as i can see from source) expecting that viewModel will be root model.
I know that i can manually go through all observables and refresh their values, or unmap rootModel, set property and then update root, but i belive that there is more complex and elegant way to do this.
Thank you.
Set up your current photo as an observable, and then you can use map to load the observable with JSON details.
self.currentPhoto(ko.mapping.fromJS(data));
Here's a working JSFiddle to demonstrate:
http://jsfiddle.net/jearles/wgZ59/7/