We Keep Coding

Creating a clickable div dynamically with Angular 6

I want the display the user an image, with a varying number of divs (depending on the number of faces detected) which should be clickable (a click on a face will show some attributes for that particular face).
So ideally I would like to create some divs (or buttons) around each face and have something like (click)="divClicked()" for each element.
However,(click) isn't a legit attribute, so, for example, trying something like
d3.select('button').attr('(click)','onClickMe()');
gives an error. onclick is a legit attribute, but by using it I think I should break the way Angular wants me to work (as putting the function inside the component's ts file gives the error onClickMe is not defined).
The very best workaround I could come up with is to assign an id to each div and then do something like
document.getElementById('b1').onclick=this.onClickMe;
but that feels like bad coding.
So, what's the clean way to do that?

I think you should create the div elements by adding a loop with ngFor to your template to display your divs. Of course they may be CSS-styled, based on some properties you have determined beforehand (in particular the CSS properties left and top are useful here). Of course you can add a (click)-event to those divs too.
To do this, your component should hold a list of objects to display which you may update when necessary. Furthermore it should offer a method which gets called when the user wants to see details of a particular face.
The template then only cares for turning those objects into a HTML structure and bind the callbacks.
Structurally something similar to the following will occur in your template:
<div
*ngFor="let face of faces; index as i"
(click)="showFaceDetails(i)"
[style.left.px]="face.x"
[style.top.px]="face.y"
></div>

Distinguish between elements in list of equal divs in JS

I'm learning HTML, CSS and JS with Angular and JQuery at the moment. I have a div "eventBoxes" where you can add as much divs called "eventBox" as you want. Therefore, I have one template of such an eventBox in my HTML file, which i clone, make displayed and add to the div "eventBoxes" when the user wants to add a eventBox.
I now want to get the inputs, that are made in the eventBoxes (one eventBox has several textfields), but obviously they all now have the same id.
What is a good practice in JS to differ between these same eventBoxes, sothat i can handle each eventBox separately? Do I really have to change the ID's before adding or is there a better way to do so?

If your templating a list then the individual list items should not carry an ID or the ID should also be templated as well in order to avoid duplicate IDs. Event handling on those elements should be performed using the event handler context element. For example if you handle click for an input, then the context of the click event handler would be the specific input that was clicked. Also the event object gives you access to specific context for the event like for example event.target carries a reference to the specific element the click was performed on.

What are the best practices for creating new elements of different type in Angularjs?

I have a list of elements of different types. Each has a toggle which toggles their visibility. Now there are two ways to hide an element either detach it from DOM or set the visibility to hidden.
As I understand Angular still updates hidden elements so this may impact the performance. Is this true? With jQuery one can detach the element from DOM and then attach it again when it needs to be visible. But is this approach even a good practice in Angular?
From reading Angular documentation and its API it gave me an impression that Angular prefers that all templates/HTML are declared at the start and their content is dynamically changed with controllers. So if you want to add/remove elements you'd use an ng-repeat directive and then by removing elements from an array in the scope you can add/remove elements from the template. This works well with primitive elements of the same type. However, how does this work if you have a list of elements of different type?
Edited:
http://jsfiddle.net/k26bA
An example here would be a list of tools which can be made available with a checkbox. In the example the first approach has a static list of elements which can not be dynamically changed. Which means you need to know in advance which tools will be available.
The second approach has a list in the controller to which you add and remove tools and in the template use ng-repeat to iterate over that list and create the tools. However, I'm stuck here as a tool can be a button, a text field, checkbox or even a complex div.
I find it a little hard to have a model first here because this is just a part that hides and shows available controls as opposed to displaying a domain model.
A good example of what I'm thinking would be Google Maps where you can hide or minimise various controls on the map.

You probably need to familiarize yourself with the ng-switch directive. The inactive items in an ng-switch are entirely unhooked from the DOM, as opposed to an ng-hide or ng-show, which simply set the CSS styles to show or hide.

Sequence divs using javascript onclick

Is there a way to click on a div and save this click sequence value in the db.
Say I have ten items in 10 small small divs and I want them to be sorted in the sequence i click on them. So clicking on the first one will be sorted first and the next and then next.
Want to be able to do this with Javascript. Have seen this happening in desktop application where form fields are sequenced for tab order as you click on the fields.

The easiest way to do this is to bind to the click event of the divs, and pushing the div elements onto an array whenever they're clicked. Then you can use .prepend() to the container array by popping the elements from the array. Here's an example..

I can give you a conceptual format, because a full-fledged deal will be quite long, and also because you've posted no code.
Ensure that each div has a unique id, and has at least one common CSS class e.g. sortable - this is critical, as it will allow you to query the DOM for those elements for further sorting. And, regarding ideas for the id of the divs, I have seen variations of usually some identifier like post id from a database;
You have a listening function is run when the window is loaded, that listens for when any div that has the class sortable is clicked. You override the default action, and use the class in tandem with the div id to keep a record of which elements were clicked and sort them accordingly by whatever criteria you deem fit (id, date, content). However, then you have to manipulate the DOM to be modified to properly represent your new ordering. This can be done in two further ways:
Your sort can be real-time (which is laborious and involves higher RAM usage and a lot of DOM manipulation, but it is doable).
Or, option 2: perform a static sort where this information is passed via a form to another page, which redirects to the same page or a new page with the reordered DOM. Another way of doing that is to purge the DOM tree and rebuild it in the same page with Javascript using the sorted information upon the submission of a form, or the click of a button.

is it possible to view one html element twice on the same page, or must I create a duplicate?

I am creating a site that allows viewing and editing the contents of the 'src-div' contents within the 'edit-div.' I am not editing the src-div directly, because its thumbnailed using css zoom property.
I have considered using knockout.js to bind both elements to an observable. Currently, I have implemented the feature with jquery .html() function: simply set edit-div innerhtml to src-div innerhtml on 'select', and reverse the process after changes are made to edit-div to update the src-div.
I am wondering if I really need 2 divs here, or if there is some way to actually view the same element twice on a page, and any changes made will automatically reflect in both 'views,' elimiating the need to copy innerhtml property back and forth between two elements.
essentially, this is like a mirror effect, without the flip.
the closest thing I found so far is:
http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Reflections/Reflections.html
Any recommended practices for performing this task are appreciated.

(Almost) everything you see on a page has a counterpart in the DOM. Everything in the DOM gets exactly rendered one time (apart from pseudo-classes). And every node in the DOM can only have one parent (no exclusions).
Unfortunately you'll have to clone the specific node and add changes to both, as there is no copy & translate mechanism in the current CSS documentation.

If you're using jquery you can use one div and "clone" it. You can read this for more information.
http://api.jquery.com/clone/
If you set the class of the div to the same thing, you can have changes propagated to both. Then you can apply .addClass to the second div to apply a "reflected" affect (if that's your final goal).