/*import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
public translatedText: string;
public supportedLanguages: any[];
constructor() { }
ngOnInit() {
// standing data
this.supportedLangs = [
{ display: 'English', value: 'en' },
{ display: 'Español', value: 'es' },
{ display: '华语', value: 'zh' },
];
}
}
*/
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgModel } from '@angular/forms'
import { Angular2Carousel } from 'app/Angular2Carousel.component';
import { Carousel } from 'app/carousel.component';
import { Slide } from 'app/slide.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ Angular2Carousel,Carousel,Slide ], // Inject Translate Pipe here
bootstrap: [ Angular2Carousel ],
providers: [ NgModel ]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<title>Handle different form controls</title>
<!--optional bootstrap for faster styling-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<app-root>Loading...</app-root>
</body>
</html>
/**
* PLUNKER VERSION
* (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
// paths serve as alias
'npm:': 'https://unpkg.com/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: './app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
<!--div class="container">
<h4>Translate: Hello World</h4>
<div class="btn-group">
</div>
<div style="margin-top: 20px">
<p>
Translate With Pipe: <strong>{{ 'hello world' }}</strong>
</p>
<p>
Translate with Service: <strong>{{ translatedText }}</strong>
</p>
<p>
Translate <strong class="text-muted">Hello, %0 %1!</strong>:
<br>
<strong>{{ 'hello greet' }}</strong>
</p>
<p>
Translate <strong class="text-muted">Well done %0</strong>:
<br>
<strong>{{ 'well done' }}</strong>
</p>
<p>
Translate <strong class="text-muted">Good bye (fallback)</strong>:
<br>
<strong>{{ 'good bye' }}</strong>
</p>
</div>
</div-->
import {Component, OnDestroy, Input} from '@angular/core';
import {Slide} from './slide.component';
export enum Direction {UNKNOWN, NEXT, PREV}
@Component({
selector: 'carousel',
template: `
<div (mouseenter)="pause()" (mouseleave)="play()" class="carousel slide">
<ol class="carousel-indicators" [hidden]="slides.length <= 1">
<li *ngFor="let slidez of slides" [class.active]="slidez.active === true" (click)="select(slidez)"></li>
</ol>
<div class="carousel-inner"><ng-content></ng-content></div>
<a class="left carousel-control" (click)="prev()" [hidden]="!slides.length">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" (click)="next()" [hidden]="!slides.length">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
`
})
export class Carousel {
private slides: Array<Slide> = [];
private currentInterval: any;
private isPlaying: boolean;
private destroyed: boolean = false;
private currentSlide: Slide;
private _interval: number;
@Input() public noWrap: boolean;
@Input() public noPause: boolean;
@Input() public noTransition: boolean;
@Input() public get interval(): number {
return this._interval;
}
constructor() {
console.log("Carousel created");
}
public set interval(value: number) {
this._interval = value;
this.restartTimer();
}
public getInstance() {
return this;
}
public select(nextSlide: Slide, direction: Direction = Direction.UNKNOWN) {
let nextIndex = nextSlide.index;
if (direction === Direction.UNKNOWN) {
direction = nextIndex > this.getCurrentIndex() ? Direction.NEXT : Direction.PREV;
}
// Prevent this user-triggered transition from occurring if there is already one in progress
if (nextSlide && nextSlide !== this.currentSlide) {
this.goNext(nextSlide, direction);
}
}
private goNext(slide: Slide, direction: Direction) {
if (this.destroyed) {
return;
}
slide.direction = direction;
slide.active = true;
if (this.currentSlide) {
this.currentSlide.direction = direction;
this.currentSlide.active = false;
}
this.currentSlide = slide;
// every time you change slides, reset the timer
this.restartTimer();
}
private getSlideByIndex(index: number) {
let len = this.slides.length;
for (let i = 0; i < len; ++i) {
if (this.slides[i].index === index) {
return this.slides[i];
}
}
}
private getCurrentIndex() {
return !this.currentSlide ? 0 : this.currentSlide.index;
}
private next() {
let newIndex = (this.getCurrentIndex() + 1) % this.slides.length;
if (newIndex === 0 && this.noWrap) {
this.pause();
return;
}
return this.select(this.getSlideByIndex(newIndex), Direction.NEXT);
}
private prev() {
let newIndex = this.getCurrentIndex() - 1 < 0 ? this.slides.length - 1 : this.getCurrentIndex() - 1;
if (this.noWrap && newIndex === this.slides.length - 1) {
this.pause();
return;
}
return this.select(this.getSlideByIndex(newIndex), Direction.PREV);
}
private restartTimer() {
this.resetTimer();
let interval = +this.interval;
if (!isNaN(interval) && interval > 0) {
this.currentInterval = setInterval(() => {
let nInterval = +this.interval;
if (this.isPlaying && !isNaN(this.interval) && nInterval > 0 && this.slides.length) {
this.next();
} else {
this.pause();
}
}, interval);
}
}
private resetTimer() {
if (this.currentInterval) {
clearInterval(this.currentInterval);
this.currentInterval = null;
}
}
public play() {
if (!this.isPlaying) {
this.isPlaying = true;
this.restartTimer();
}
}
public pause() {
if (!this.noPause) {
this.isPlaying = false;
this.resetTimer();
}
}
public addSlide(slide: Slide) {
slide.index = this.slides.length;
this.slides.push(slide);
if (this.slides.length === 1 || slide.active) {
this.select(this.slides[this.slides.length - 1]);
if (this.slides.length === 1) {
this.play();
}
} else {
slide.active = false;
}
}
}
import {Component, OnInit, OnDestroy, Input, HostBinding } from '@angular/core';
import {Carousel, Direction} from './carousel.component';
@Component({
selector: 'slide',
template: `
<div [class.active]="active" class="item text-center">
<ng-content></ng-content>
</div>
`
})
export class Slide implements OnInit, OnDestroy {
@Input() public index:number;
@Input() public direction:Direction;
@HostBinding('class.active')
@Input() public active:boolean;
@HostBinding('class.item')
@HostBinding('class.carousel-item')
private addClass:boolean = true;
constructor(private carousel:Carousel) {
}
public ngOnInit() {
this.carousel.addSlide(this);
}
public ngOnDestroy() {
this.carousel.removeSlide(this);
}
}
/**
* Created by Tareq Boulakjar. from angulartypescript.com
* Edited by Ved Prakash
*/
import {Component} from '@angular/core';
/*Angular 2 Carousel - Gallery*/
@Component({
selector: 'app-root',
templateUrl: 'app/Angular2carousel.html'
})
export class Angular2Carousel {
//The time to show the next photo
private NextPhotoInterval:number = 3000;
//Looping or not
private noLoopSlides:boolean = false;
//Photos
private slides:Array<any> = [];
constructor() {
this.addNewSlide();
}
private addNewSlide() {
this.slides.push(
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car1.jpg',text:'BMW 1'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car2.jpg',text:'BMW 2'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car3.jpg',text:'BMW 3'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car4.jpg',text:'BMW 4'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car5.jpg',text:'BMW 5'},
{image:'http://www.angulartypescript.com/wp-content/uploads/2016/03/car6.jpg',text:'BMW 6'}
);
}
private removeLastSlide() {
this.slides.pop();
}
}
<carousel [interval]="NextPhotoInterval" [noWrap]="noLoopSlides">
<slide *ngFor="let slidez of slides; let index=index"
[active]="slidez.active">
<img [src]="slidez.image" style="margin:auto;">
<div class="carousel-caption">
<h3 style="background-color: transparent;color: white;">Slide {{index + 1}}</h3>
<p style="background-color: transparent;color: white;">{{slidez.text}}</p>
</div>
</slide>
</carousel>