Angular 2 and Bootstrap 3: The Ugly Parts

I like Angular 2, especially with the CLI.  In contrast to various online criticism, the angular 2 structure feels right to me, especially for larger projects.

However, I have encountered friction, especially when combining with other javascript libraries, most notably those powering the dynamic features in Bootstrap 3 (bootstrap.js).   Ideally, I would use Angular-UI (which I used with Angular 1), but it is still in alpha development for Angular 2, and it is being designed to work with Bootstrap 4  (which is also in alpha).  Angular material might someday be a good option, but it too is still in early development.  There are other options (ngBootstrap), but I have not had time to try these.

Some Boostrap simple dynamic tasks, such as collapse, can be implemented easily in Angular (using ngIf and animation).  But most of the Bootstrap javascript I call from within Angular.   Here are a few of my notes on integrating the 2, if even a bit messy.

 

Button-Group – RadioButton in place of a checkBox

Private?

Public
Private

</div>

Popovers

startPopover(e:MouseEvent) {
var e$ = $(e.target);
e$.popover({container: ‘body’})
e$.popover(‘show’);
}
endPopover(e:MouseEvent) {
$(e.target).popover(‘hide’);
}

<a (mouseover)=”startPopover($event)” (mouseleave)=”endPopover($event)” role=”button” class=”popover-link” data-toggle=”popover” title=”” data-html=”true”
[attr.data-content]=”‘your content here'”
[attr.data-original-title]=”‘your title here'”></a>

 

 

Typescript Enums as options in select box

export enum Category { Info =1, Warning =2, Error =3};

public categoryKeys = Object.keys(Category).filter(Number);
public categoryEnum :typeof Category = Category;

 

Category

{{categoryEnum[key]}}

 

 

Slideshow

 

@light-gray: rgba(0,0,0,0.4);

#slideshow {

border:solid 1px gray;
border-radius:5px;
position: relative;
.carousel {
width: 100%;
margin: 0 auto; /* center carousel if other than 100% */
}

.slideOuter {
height: 650px;
margin-top:20px;
}

img {
height:500px;
margin:0 auto;
}

.carousel-indicators {
li {
border-color: @light-gray;
}

.active {
background-color: @light-gray;
}
}

// .carousel-caption {
// color:#333;
// }

.carousel-indicators
{
bottom: -50px;
}
.carousel-indicators li
{
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0,0,0,0);
border: 1px solid @light-gray;
border-radius: 50%;
}
.carousel-indicators .active
{
width: 12px;
height: 12px;
margin: 0;
background-color: @light-gray;
}
.carousel-caption
{
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
background: rgba(0,0,0,0.4);
h4 {color:#fff}
}

}
.carousel .carousel-control,.carousel .carousel-caption { visibility: hidden; }
.carousel:hover .carousel-control, .carousel:hover .carousel-caption { visibility: visible; }

 

import { Component, OnInit, Input } from ‘@angular/core’;
import { DataService } from ‘../../services/data.service’;
import { ActivatedRoute, Params } from ‘@angular/router’;

@Component({
selector: ‘app-slideshow’,
templateUrl: ‘./slideshow.component.html’,
styleUrls: [‘./slideshow.component.less’]
})
export class SlideshowComponent implements OnInit {
public imageN = 0;
public imageLinks = [];
public active = 1;
public pagePath = “”;

constructor(private dataService: DataService,
private route: ActivatedRoute) { }

ngOnInit() {

this.imageN= Number(params[‘imageId’])-1; //imageN is 1 based

this.navigation.currentImageId = this.imageN;

this.imageLinks = result.ImageLinks;

_(this.imageLinks).forEach(function (value, index) {
value.id = index;
})
//set the current imageLink to active
if (_.isNumber(this.imageN)) {
var len = this.imageLinks.length;

if (this.imageN >= 0 && this.imageN < len) {
this.imageLinks[this.imageN].active = true;
this.active = this.imageN;
}

}

$(‘#slideshow’).on(‘slid.bs.carousel’, (e)=>{
var currentIndex = $(‘.carousel-inner div.active’).index()+1;
});

}

}

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.