Develop Reference

Cleaner way to add both static and variable class in html in Angular 2

It could be silly but how do I do something like this in angular 2 in a cleaner way? (Avoiding the string concatenation)
<div [class]="'indicator indicator-circle ' + colorClass"></div>
Explanation :
I want to add two static classes indicator & indicator-circle at all times but I also want the colorClass to be applied which is an input from the component class.

You could leverage the ngClass directive with an array:
<div [ngClass]="['indicator', 'indicator-circle', colorClass]"></div>
See this link for more details:
https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

You can use ngClass
<div class="indicator indicator-circle" [ngClass]="colorClass"></div>

You need to put only colorClass in [ngClass]/[attr.class]/[class] property binding
<div class="indicator indicator-circle" [ngClass]="colorClass"></div>

Angular fade in template

I have a template popup being loaded in via a controller function. Is there a way I can fade in the template. I have tried adding a separate class, hooking it to the ng-show class.
HTML:
<div class="contact-form">
<div ng-include="contactTemplate" class="fade"></div>
</div>
JS:
$scope.contactForm = function() {
$scope.contactTemplate = 'sections/popups/contact.html';
};

You could use ngAnimate and add simple css animations (there are a lot of good tutorials out there).
The available animations can be found in the ngInclude docs at "Animations".
PS: To nicely format code blocks insert a linebreak and indent code by four spaces

angular-slick attributes with capital case

I am making a carousel with angular-slick (https://github.com/vasyabigi/angular-slick).
Some of the slick settings for the carousel do not seem to work when used as attributes of the slick-directive. These attributes all have one or more capital case letters.
I had to change these attributes to lower case letters in slick.js and in the angular model for slick.js. For instance to get a custom button for next and previous I had to change prevArrow and NextArrow to prevarrow and nextarrow so i can use it in the following way:
<slick prevarrow='.btn-prev' nextarrow='.btn-next' arrows="true" data="windows">
<div ng-repeat="window in windows" class="slick-slide">
<a><img ng-src={{window.imageUrls[0]}}></a>
</div>
</slick>
<div class="slider-controls">
<button class="btn-next">customNext</button>
<button class="btn-prev">customPrev</button>
</div>
Changing the code in the libraries does not seem the right way to get it working. Is there some obvious mistake I made or is this just a limitation to the slick-settings one can use via the slick element ?

When you see directives with capital case like nextArrow, you must use them as
next-arrow
No need to change the library code. Angular follows same convention as CSS. When there is a capital cased directive prevArrow, in your HTML if you want to reference it, use prev-arrow.
Best example for it is:
ng-app
In your HTML you might have used it as ng-app but if you check it in the angular code, it will be ngApp

bootstrap popover content setting

bootstrap popover currrently expects this:
hover for popover
$("#example").popover({placement:'bottom'});
..expects you to define data-content in template or dynamically pass it in jquery.
Is there anyway it can support format like below:
..the point being able to define content/title in blocks
<div id="example">
<div class="original-title">
Twitter Bootstrap Popover
</div>
<div class="data-content">
It's so simple to create a tooltop for my website!
</div>
<a>hover for popover</a>
<div>
$("#example").popover({placement:'bottom'})

Currently, no, since the popover script is basically extending the functionally of the tooltip script, but nothing is impossible. You can modify the script and add custom data-attributes to support your markup yourself, but then when updates come around you will have to do it again if you want to support your edits, or not update at all.

I think that can be possible using a javascript code to give the content of this divs to the elements but is not recommended.
$("a").attr("data-title",$(".data-title").html()).attr(".data-content",$(".data-content").html());
$('a').popover({placement:'bottom'})

How to make a new parent class for an element w/ jquery?

So I have something like
<div>
<!-- other stuff then-->
<button>Hey</button>
</div>
and I'd like to make that (using Javascript/JQuery)
<div>
<!-- other stuff then-->
<div class="bw">
<button>Hey</button>
</div>
</div>
Is that possible? I couldn't find anything with material on it online…but, I'm a totally JS noob, so I'm probably not using the right terminology. Thanks!

You can use .wrap() for this:
$("button").wrap("<div class='bw'></div>");
You can test it here, for wrapping multiple elements, use .wrapAll(), here's a full list of the wrapping functions.