Develop Reference

How to close a `div` box in Angular when I click outside of it.Without using jQuery

I am working on a site which has been created using Angular. On the homepage I have a Service Box that contains icons which redirects us to different pages. Currently when I click on service box icon it displays the service box:
Now Whenever I click outside of it, it does not close. I am not using jQuery in my project. I have seen many answers for AngularJs but none worked.
Here is my code for service-box.component.html:
<button mat-icon-button (click)="opened = !opened">
<mat-icon>apps</mat-icon>
</button>
<div class="box" [class.opened]="opened">
<div class="tip">
<div class="border"></div>
<div class="foreground"></div>
</div>
<div class="services">
<div class="row">
<a href="https://blog.fossasia.org">
<div class="col">
<div class="img">
<img src="assets/images/blog.png" alt="Fossasia">
</div>
<span>Blogs</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search">
<div class="col">
<div class="img">
<img src="assets/images/github.png" alt="Fossasia">
</div>
<span>Github</span>
</div>
</a>
<a href="https://github.com/fossasia/loklak_search/issues">
<div class="col">
<div class="img">
<img src="assets/images/bug.png" alt="Fossasia">
</div>
<span>Bug Report</span>
</div>
</a>
</div>
</div>
<hr />
<div class="services">
<div class="row">
<a href="https://fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
</div>
<span>FOSSASIA</span>
</div>
</a>
<a href="https://phimp.me">
<div class="col">
<div class="img">
<img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
</div>
<span>Phimpme</span>
</div>
</a>
<a href="https://susper.com/">
<div class="col">
<div class="img">
<img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
</div>
<span>Susper</span>
</div>
</a>
</div>
<div class="row">
<a href="https://chat.susi.ai/">
<div class="col">
<div class="img">
<img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
</div>
<span>Susi.AI</span>
</div>
</a>
<a href="https://pslab.fossasia.org/">
<div class="col">
<div class="img">
<img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
</div>
<span>PSLab</span>
</div>
</a>
<a href="https://eventyay.com/">
<div class="col">
<div class="img">
<img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
</div>
<span>Eventyay</span>
</div>
</a>
</div>
</div>
</div>
service-box.component.ts contains only a public variable opened set to false by default.
I have tried to wrap up whole code of service-box.component.html in a div and used (focusout) event like this:
<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>
But doing this disables the links in service box.
Any suggestion will be of great help.

You seem to be using #angular/material and therewith the CDK. You should try the CDK's Overlay package.
The overlay package provides a way to open floating panels on the screen.
By setting the attribute hasBackdrop, the overlay will create a backdrop element (= everything outside of your component) and with it a backdropClick #Output event, to which you could bind the closing of your "Service Box".

After duplicating an element the length property is incorrect using jquery

I have an unusual case and can't find a solution for this.
I'm trying to get the length of an column "Kontrolle".
The yellow background is the leader and is always on the first position and is duplicated from an other column.
This is the html code:
<div class="col-xl mr-2 py-0 content-kontrolle">
<div class="header header-kontrolle">
<h1 class="pl-2">Kontrolle</h1>
</div>
<div class="abt-kontrolle">
<div class="mt-2 panel-name panel-kontrolle duplicate" data-name="Name
Name" data-status="leader">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
// and so on....
</div>
</div>
if i check the length of this column i'm getting a wrong length.On the first photo there are 4 elements and i'm getting 3.
this is the jquery snippet:
var $abtLength = $('.abt-kontrolle .panel-name').length;
console.log($abtLength);
the length property is not counting the duplicate element.
if i check the childElementCount i get a correct length:
but when i console.log it i'm getting still wrong length.
var $childDepartmentNodes = $('.abt-kontrolle')[0].childElementCount;
console.log($childDepartmentNodes);
i'm getting also 3.
UPDATE 1
$("div[data-name='"+$name+"']")
.not(".duplicate")
.clone()
.prependTo(".abt-"+ $belongsToDepartment + ":first")
.attr("data-status", "leader")
.removeClass(function(index, element) {
return (element.match (/\bpanel-\S+/g) || []).join(' ');
})
.addClass("panel-name panel-" + $belongsToDepartment + " duplicate");
this is where i clone the leader from a column to another column

maybe your cloning/duplicating is not completely done at the moment when your log happens.
whats the count if you copy this
$('.abt-kontrolle .panel-name').length;
into dev console after everything is done?

Your code works, you can check attached snippet, but we need toi know how you duplicate the div maybe you get the size before duplacting the element
var len = $(".abt-kontrolle>.panel-name").length;
alert(len)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xl mr-2 py-0 content-kontrolle">
<div class="header header-kontrolle">
<h1 class="pl-2">Kontrolle</h1>
</div>
<div class="abt-kontrolle">
<div class="mt-2 panel-name panel-kontrolle duplicate" data-name="Name
Name" data-status="leader">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
<div class="panel-name panel-kontrolle mt-2" data-name="Name Name">
<div class="panel-img">
<img src="" width="120" height="120">
</div>
<div class="panel-text ml-3">
<p>
<span class="panel-vorname font-book">Name</span>
<br>
<span class="panel-nachname font-bold"><strong>Name</strong></span>
</p>
</div>
</div>
</div>

Issue with appending text area to a particular comment

I am trying to write a HTML code to be able to reply to comments. The issue I'm having in the code below is when I click the reply button it appends the reply text area to both comment 1 and comment 2. What can I do to make it only append the text area to only the relevant comment.
<script>
function reply2comment() {
$("div#reply").html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>'+
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
}
</script>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/yy.jpg" alt=""/></div>
<div class="userName_mP">Tim</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 1</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/xx.jpg" alt=""/></div>
<div class="userName_mP">David</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 2</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>

You have 2 divs with the same id "reply". This makes your $("div#reply").html(... command append it to the both of them.
IDs should be unique. You shouldn't have more than 1 element with the same ID attribute.
If a jQuery selector matches more than one element, it will call the html( methon on both of them.

Here is what something you could do.
$(document).ready(function() {
$(".reply").bind("click",
function reply2comment(event) {
var $replyContainer = $(event.currentTarget).siblings("#reply");
$replyContainer.html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>' +
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/yy.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">Tim</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 1</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/xx.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">David</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 2</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
I modified you user_reviews markup to group the reply div and the reviews together.
And changed the event handlers from markup to script, just to make it easier to bind events.

jquery slidetoggle template

I am using bootstrap and make one row with 2 column and one button , I want to do when i click on the button will show 4 column instead of 2 column.
JQuery
$('#more_service').on('click',function(){
$('.service_container').slideToggle('slow',function(){
var template = $('item_template').html();
$('.service_wrapper').html(template);
});
});
html
Creative Service
<div class="row">
<div class="span4">
<img src="img/web-developing.png" class="img-responsive center-block" alt="" />
<h3 class="red-text text-center">Creative Service</h3>
<p class="webdev text-center">aaaaaaaaaaaaa</p>
</div>
<div class="span4">
<img src="img/branding.png" class="center-block" alt="" />
<h3 class="red-text text-center">Branding</h3>
<p class="webdev text-center">aaaaaaaaaaaaaaaaaa</p>
</div> </div> <div class="row">
<div class="span4">
<img src="img/web-developing.png" class="img-responsive center-block" alt="" />
<h3 class="red-text text-center">Creative Service</h3>
<p class="webdev text-center">aaaaaaaaaaaaa</p>
</div>
<div class="span4">
<img src="img/branding.png" class="center-block" alt="" />
<h3 class="red-text text-center">Branding</h3>
<p class="webdev text-center">aaaaaaaaaaaaaaaaaa</p>
</div> </div>
</div> </script>

$('item_template').html(); is an element in your code like a class or an ID? If so, you need to add a dot or a hashtag like:
$('item_template').html();
becomes
$('#item_template').html(); or $('.item_template').html();

if item_template is id use # if it is class use . and use innerHTML:
var template = $('#item_template').innerHTML;

Display image only if it enter in some define position

I have one vertical slider page.
in every slide I have one image and I have iphone container.
like
now this page slides vertically show next slides comes in center and its also contains image on center.
now I want something like that image only displayed when its comes in iphone container.
as here in second image my images showing even out of iphone container so I dont want to do that
my code
<div style="display: block; position: fixed; top: 14.5px; left: 684px;" class="iphone_container"><img title="" src="/img/iphon.png"></div>
<div class="port_list">
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
</div>

You create a container div for your phone and put there a div for the sildes. with overflow:hidden you can hide the additional content.
<div id="phone">
<div id="slides">
<img src="pic1.png" />
<img src="pic2.png" />
<img src="pic3.png" />
</div>
</div>
<input type="button" value="slide up" onclick="slide('up')" />
<input type="button" value="slide down" onclick="slide('down')" />
Check this fiddle: http://jsfiddle.net/qfzBk/2/