Develop Reference

Plugin not applying changes on ngFor directed div Angular 5.2

I've been searching for the solution for a few days but unable to find one that works. The issue is that this div which has a class ish-container-inner, is linked to a js plugin which works only with this code below:
<div class="ish-container-inner ish-product">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color9">Special Effects</span> <span class="ish-separator">/</span> <span>Ink</span></div>
</div>
<div class="ish-img">
<img src="assets/img/bniinks-003.jpg" alt="Project">
</div>
</div>
</div>
</div>
</div>
But as soon as I'll put *ngFor like below, it won't work. Even with ngIf present:
<div class="ish-container-inner ish-product" *ngIf="products">
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax">
<div class="ish-item" *ngFor="let product of products">
<div class="ish-item-container">
<div class="ish-caption-container">
<div class="ish-caption">
<span class="ish-h4 ish-txt-color7">{{ product.name }}</span> <span class="ish-separator">/</span> <span>Ink</span>
</div>
</div>
<div class="ish-img">
<a href="product-detail.html" class="ish-img-scale" [style.background]="'url('+product.thumbnail+')'">
<img src="{{product.thumbnail}}" alt="Project"></a>
</div>
</div>
</div>
</div>
</div>
I have valid data at this point in products but the plugin is not working for these div elements. I don't know why. Without the ngFor directive. Div is assigned some stylings automatically which are changed by the plugin on scroll i.e.
<div class="ish-main-content ish-pflo-gal ish-scroll-anim ish-2col ish-square ish-content-parallax" style="position: relative; height: 629px; margin-top: -99.5455px;" data-initial-top="0">
But if I put ngIf or ngFor directive. It doesn't work anymore and these stylings are not assigned automatically. Awaiting response :)

Angular 1.5 Component template with slot for child-dom

I'm attempting to make a reusable self contained angular 1.5 component that acts as a wrapper for other page content. When a value is changed it will toggle the child content. The solution of hiding and showing content is not in question but how to make a reusable component that can handle injecting the children into the components template and not over write the template.
page.html
<div class="some page">
<my-cmp value="false">
<p>this static content is toggled by my-cmp</p>
<div>more stuff</div>
<ul>
<li>no limits</li>
</ul>
</my-cmp>
</div>
When value is changed the component should change the content on the page.
<div class="some page">
<my-cmp value="true">
<div>
<h1>Content is hidden</h1>
<button>Show content</button>
</div>
</my-cmp>
</div>
I have been reading the angular 1.5 docs and haven't found any example that does this. The problem i'm having is that the child content is over writing the content in my components template and i have no way of telling the component the exact spot to place the child content. The component should be able to switch between the two states freely.
my-cmp.html
<div class="my-cmp">
<div ng-if="showContent">
<!--child content should be inserted here by the component -->
<!-- how do i tell the my-cmp template i want child elements injected here? -->
<!-- this is the only part i'm missing -->
</div>
<div ng-if="!showContent">
<h1>Content is hidden</h1>
<button>Show content</button>
</div>
</div>

(function() {
angular
.module('app.my-component')
.component('myCmp', {
transclude: true,
bindings: {
showContent: '='
},
templateUrl: 'my-cmp.html',
controller: 'MyCmpController'
});
})();
(function() {
angular
.module('app.my-component')
.controller('MyCmpController', MyCmpController);
/*#ngInject*/
function MyCmpController($scope) {
$scope.showHiddenContent = showHiddenContent;
function showHiddenContent() {
$scope.showContent = !$scope.showContent;
}
}
})();
In HTML:
<div class="some-page">
<my-cmp show-content="isHidden">
<p>this static content is toggled by my-cmp</p>
<div>more stuff</div>
<ul>
<li>no limits</li>
</ul>
</my-cmp>
</div>
my-cmp.html
<div class="my-cmp">
<div class="content" ng-if="showContent" ng-transclude> <!-- ng-show="showContent" -->
<!-- content is added by children passed in -->
</div>
<div ng-if="!showContent"> <!-- ng-hide="!showContent" -->
<h1>Content is hidden</h1>
<button type="button" ng-click="showHiddenContent()">Show content</button>
</div>
</div>

I managed to find some old documents showing how to do this. the transclude: true, in the component is needed.
my-cmp.js
(function() {
angular.module("app").component("my-cmp", {
templateUrl: "views/tmpl/components/my-cmp.html",
controller: [myCmp],
restrict: 'E',
transclude: true,
binding: {
show: '<',
}
});
function myCmp() {...}
})();
my-cmp.html
<div class="my-cmp">
<div class="content" ng-if="showContent" ng-transclude>
<!-- content is added by children passed in -->
</div>
<div ng-if="!hideContent">
<h1>Content is hidden</h1>
<button>Show content</button>
</div>
</div>
adding ng-transclude as an attribute to the element that is the target, will tell angular to inject the child DOM elements in this spot and not over write your template.

Hide parent div and show ui-view in Angular Js

How to hide the div "whole" when click on #clickit so that my setting page content won't show and .user page will show in ui-view
setting html page
<!-- page content -->
<div class="whole">
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit"> // <-- Click to hide "whole" class
<div class="col-md-12 col-sm-12 col-xs-12">
<a ui-sref=".user">Users & practitioners</a>
</div>
</div>
</div>
</div>
<div ui-view> // I HAVE TO SHOW THIS DIV AND HIDE SETTING DIV
</div>
<!-- /page content -->
I don't want a jquery solution.. all i need a angular of pure javascript solution

<div class="whole" ng-hide="hideWhole> // <-- assign a scope var dependency
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit" ng-click="hideWhole=1"> // <-- update scope var
Ideally you'll use a controller variable (ctrl.hideWhole in controllerAs syntax) so you can update the display of the element from elsewhere in the app.

Here is a JavaScript solution to your problem, attaching a function to the onclick event of your element which sets the css display attribute to none.
<div class="row" id="clickit" onclick="hideWhole()">
function hideWhole() {
var wholeDiv = document.getElementsByClassName(".whole");
wholeDiv.style.display = 'none';
}

Page flickering in chrome - bootstrap & jquery conflict

I am having an issue of my webpage flickering/blinking randomly, this happens in chrome, I have not yet tested other browsers.
I figured that this issue should be due to bootstrap.js & jQuery.js conflict because if I remove one of these then it does not blink no more, it doesn't matter which one I remove.
I tryed to use the jquery-noConflict() method but either I don't know how to use it properly or it did not wok for me.
But removing both any of them is not an option because some of the websites features are not working then.
I have recorded how it looks while it flickers:
removed
It is hard for me to describe the problem when I am limited to uploading images and links as I am a new member of stackoverflow, as I can only post 2 links, I'll post the link of the website, so if anybody can help me they can look over the source code there freely - http://removed
I am using jquery-1.11.0.min.js and bootstrap.min.js
This is one of the blocks that flickers:
<section id="privalumai" class="container">
<div class="row">
<div class="col-md-12 title">
<h2>Privalumai</h2>
<span class="underline"> </span>
</div>
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInLeft" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Draudimas</h3>
<div class="clearfix"></div>
<p class="service-content">Visos mūsų transporto priemonės yra apdraustos tiek KASKO, tiek privalomuoju ( TPVCA ) draudimu. Kasko draudimo galiojimo teritorija – geografinė Europa, o TPVCA – „žaliosios kortelės“ sistemos ribose.
Jums pageidaujant, galime pasiÅ«lyti ir vykstanÄių į užsienį kompleksinį kelionÄ—s draudimÄ… ( pvz. vykstant slidinÄ—ti ir pan.)<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInLeft" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Mobilumas</h3>
<div class="clearfix"></div>
<p class="service-content">Visos mūsų transporto priemonės yra naujos ir yra aprūpintos tiek pilna gamintojo garantija, tiek techninės pagalbos kelyje paslauga, todėl tiek avarijos ar techninio gedimo atveju Jums bus suteiktas pakaitinis automobilis ir pasirūpinta Jūsų kelionės pratęsimu.<br/><br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInRight" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Neribotas kilometrų kiekis</h3>
<div class="clearfix"></div>
<p class="service-content">Mes suprantame savo klientų poreikius, todėl neribojame jų nuvažiuoto kilometrų kiekio.<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInRight" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Nauji automobiliai</h3>
<div class="clearfix"></div>
<p class="service-content">Mūsų transporto priemonės yra naujos ir sukomplektuotos taip, kad Jums būtų patogu ir lengva keliauti.<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
</div>
</section>
I am really lost here and now sure how would I go about fixing this. I would really appreciate if somebody would point me at the right direction. If there aren't enough resources or anything else please comment and I will supply them and reply to all of your answers!

Does adding this to your flickering element solve it?
.flickeringElementFix {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
It could be that there's some element manipulation going on in one or both of your scripts that are arguing
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

How to use AngularJS features to insert multiple divs in one div (i.e. some kind of multi-element template)

In my AngularJS application, I would like to make some kind of directive that inserts multiple HTML elements to an HTML element.
Basically, I want Angular to build this result:
<div class="maindiv">
<!-- Below are some divs common to all "maindiv" -->
<div> ..XXX.. </div>
<div> ..YYY.. </div>
<!-- Below are some elements specific to maindiv1 -->
<div> ..ABCD.. </div>
<div> ..EFGH.. </div>
<div> ..IJKL.. </div>
</div>
<div class="maindiv">
<!-- Below are some divs common to all "maindiv" -->
<div> ..XXX.. </div>
<div> ..YYY.. </div>
<!-- Below are some elements specific to this particular maindiv -->
<div> ..1235.. </div>
<div> ..5678.. </div>
</div>
... from HTML that looks like this :
<div class="maindiv" generate-common-stuff>
<!-- Below are some elements specific to maindiv1 -->
<div> ..ABCD.. </div>
<div> ..EFGH.. </div>
<div> ..IJKL.. </div>
</div>
<div class="maindiv" generate-common-stuff>
<!-- Below are some elements specific to this particular maindiv -->
<div> ..1235.. </div>
<div> ..5678.. </div>
</div>
... or like this:
<div class="maindiv">
<generate-common-stuff></generate-common-stuff>
<!-- Below are some elements specific to maindiv1 -->
...
When I tried to make my own directive, Angular complained about having multiple root elements in my template.
Note that because of incompatibilities with other libraries (JQueryMobile), I cannot regroup <div> ..XXX.. </div><div> ..YYY.. </div> under a div and use it in the template. They must be inserted just under the maindiv
Do you have any idea on how to implement that ?

Try write a directive called generate-stuff and pass common and specific stuff as attributes, binded from the scope.
<generate-stuff common="commonStuffInScope" specific="specificStuffInScope"></generate-stuff>
...and in your directive
myModule.directive('', function() {
return {
...
scope: {
common: "=common",
specific: "=specific"
}
...
};
});
so in the link function you have a bidirectional binding either to the common and the specific variables on the scope.
Releated documentation fragment: http://docs.angularjs.org/guide/directive#directivedefinitionobject