angular-vs | NET Web Api TypeScript - Single Page Application

ng-repeat with the filter recreats items DOM.

Thing that should not be done (As you can see from my code in HTML I'm using ng-repeat with track by book.contents.name and as far as I know in

that case angularjs would not recreat the dom. Otherwise, in case we use

ng-repeat without track by id angularjs would recreat the dom you could see THE_FOLOWING_LINK ).

It's quite pretty tough for me to understand exactely why the dom is

recreated in that case with ng-repeat with the filter !

A workaround that I've done is described in text below:

1- So In order to make the items draggable again, we must call .draggable() on every filter action.

The perfect solution is to do a DOM manipulation within an angular directive via the link function. but Here to make things much simple a workaround That I just included in the detectEmpty which is a scoped function .

2- added ng-change="detectEmpty()" to detect when the input is cleared

Here is a workaround that I implemented for that case.

It's not a perfect solution:

mainly (if we stop during our trip into the calendar) by avoiding a drop into the calendar, The external event should revert back to the external event Box. but for now it's still isolated out of the box.

The workaround: added a call on the triggered events: ondragstart,ondragend and make a call to ctrlstartDragging and ctrlendDragging on the controller namely this should be done in from outside the control of angularjs which means $scope object will not available in "Outside angular context". Whenever you want to access angular scope in JavaScript (Outside angular world) then you need to get the scope of by getting the DOM of that element & then access the scope of it like angular.element(this).scope()....

In your controller you iterate through each book and replace the value of the name field with the result of $sce.trustAsHtml(book.content.name) which is not the same as filtering over the strings.

I would probably err on the side of doing any html markup in the DOM and not using $sce.trustAsHtml but that's your choice.

You can bind the $sce.trustAsHtml to the scope in your controller like this $scope.trustAsHtml = $sce.trustAsHtml and then modify your DOM like I have below.

Something like this? https://stackblitz.com/edit/angular-zxeysz?file=src%2Fapp%2Fapp.component.ts

I've removed the ngmodel. You are already using a formgroup so ngmodel is not needed.

Then in your ts file , you do create the 'circle' control, but you assigned null value. I've altered it to empty string ''. This way the the select is pre-checked with the '' value.

The issue here actually has nothing to do with either of the app's framework choices. If you try both examples on a desktop, you'll find that they work just fine. The difference is how the apps respond to mobile devices.

The angular app includes this meta tag in the head: . This makes it so that the webpage sizes correctly on mobile devices, and removes the tap delay.

The react app lacks this completely, meaning the default scaling will be applied, and the click delay remains.

For more details on why this click delay exists, and why the tag changes this, see this article.