We Keep Coding

View is Getting Change while using *ngIf or *ngSwitchCase in Angular 2

I need a help...
When i am using *ngIf or *ngSwitchCase view is getting changed. Custom javascript function is not working after change. Kindly kelp me to solve this issue.

NgIf and NgSwitchCase are inserting and removing a group of elements from the DOM. If you want to hide them visually but keep the space that they are occupying, do not use them.
Instead, you can toggle visibility CSS property.
<div [style.visibility]="condition ? 'hidden' : 'visible'"></div>

Ng-Show & Ng-Hide, what is the difference?

I'm teaching myself Angular-JS and I can't find any sort of definitive answer on what the difference between ng-show and ng-hide is. To me they appear to be functionally equivelant.
I understand the difference between them and ng-if as ng-if actually removes the watchers etc. whereas show and hide seem to serve the same purpose.
Is there any kind of performance gain using one over the other or is there situations where one is preferable over the other OR is it just two sides of the same coin and you use whichever makes more logical sense to you?
Apologies if this has been asked/answered elsewhere but I couldn't find it.

They do the opposite of each other and can be used as you want.
I think this comes down to coding preference, as some people like to write their code so that they use the method if the value is going to be true, instead of using not false!
<div ng-show="true">
instead of :
<div ng-hide="!true">

This directives differs in one row:
ngShowDirective:
$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
tempClasses: NG_HIDE_IN_PROGRESS_CLASS
});
ngHideDirective:
$animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, {
tempClasses: NG_HIDE_IN_PROGRESS_CLASS
});
Just opposite applying of ng-hide CSS class.
As you can see, there is NG_HIDE_IN_PROGRESS_CLASS.
It's ng-hide-animate css class which temporary applied in both cases.
You can use it to animate element appear/disappear.
You should use two selectors to implement bidirectional animation:
.animate-hide for appear
.animate-hide.ng-hide for hide

ng-show and ng-hide just set the display to 'None' but ng-if actually removes the element from DOM.
As for as performance is concerned, I think it does not make any huge difference but since ng-if removes all event handlers attached to this element and its children and also the DOM element so I think ng-show or ng-hide will be faster.

ng-show and ng-hide applies display: none !important to your html with one of these directives. There is no difference between ng-show and ng-hide: it is only semantic and your choice.
So, let's suppose you have next html:
<div ng-show='condition'><p>{{text}}</p></div>
<div ng-hide='condition'><p>{{text}}</p></div>
So the in this case if your condition is true then first line of code will shows your html and hides it if your condition is false. Second line with ng-hide will do the same things but with opposite conditions: it will hides your html if your condition is true and shows it if condition is false

Manually add ng animate to element

Is it possible to manually add NG animate to an element?
For example I want to add ng-enter and ng-leave when a ng-class is added or removed. But I also need ng-enter-active and ng-leave-active classes that gives me more control over the animation process.

Yes, you can. But you've to do some trick here like following.
Use https://daneden.github.io/animate.css/ for your application. It has nice animations by default. If you add this to your element, whenever the element inserted to the dom, there will be an animation.
But here in your scenario, add animate class whenever you add or remove class from your elements based on your condition. The sample code is below.
<div ng-class="AddClass?'yourClass animated fadeIn':'animated fadeOut removedClass'">
</div>

It is not possible to remove a directive based on a class change in ng-class. However since you are applying a class in ng-class based on a condition, you could use that same expression in ng-if to include ng-enter or ng-leave.

Using class with angular vs ng-class while using a mixed expression

I have a div that I want to give a dynamic class with AngularJS.
The div is withing an ng-repeat statement where lang.prefix is first en then sv
Using the following code works and sets the class to i-flag-en than i-flag-sv, but is it correct?
<div class="float-left flag i-flag-{{lang.prefix}}"></div>
I know there exist a ng-class directive which can be used to dynamically set the class of an element with AngularJS.
I think I read somewhere in a book, that the normal class directive not should be used to set the class property dynamically with AngularJS because of the way Angular manipulates the dom.
However, the following code does not work:
<div class="float-left flag" ng-class="i-flag-{{lang.prefix}}"></div>
and I rather want to set the class in this way instead of creating another scope variable.
Is it bad practice to use the class attribute with AngularJS to dynamically set the class? Does it work all the time even if it would be bad practice?

The book you have mentioned may have talked about the problems of using ng-class and class {{}} interpolations together wherein updates in the interpolation removes the ng-class classes, this problem has already been resolved, reference. Thus, using interpolation within class attributes is totally fine, and does not break good practice because both has its own quirks.
Your usage of ng-class however is incorrect, you have to concatenate the literal string value with your scope string variable:
<div class="float-left flag" ng-class="'i-flag-' + lang.prefix"></div>
but I think it is much preferable to use your first example instead:
<div class="float-left flag i-flag-{{lang.prefix}}"></div>

Change part of the CSS class using ngClass

I have multiple classes apply to an element. Is it possible to change only 1 class, not the all of the classes?
For example,
<span ng-class="{'result warning' : error, 'result passing' : !error}"></span>
As you can see, I have to duplicate result class in both of the conditions. Is there a way to not have to repeat it?
Thanks!

<span class="result" ng-class="{'warning': error, 'passing': !error}"></span>
ng-class can add/remove classes - it doesn't over-write existing classes unless they are specified in ng-class.