TypeScript example

TypeScript example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 <!-- Agular 2 -->
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
    
    <!-- Agular 2 Router -->
    <script src="https://code.angularjs.org/2.0.0-beta.7/router.dev.js"></script>
     <!-- Config Agular 2 and Typescript -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>


<div class="container">

	<ul class="tabs">
		<li (click)="myFunc()" class="tab-link current" data-tab="tab-1">Tab One</li>
		<li (click)="myFunc()" class="tab-link" data-tab="tab-2">Tab Two</li>
		<li (click)="myFunc()" class="tab-link" data-tab="tab-3">Tab Three</li>
		<li (click)="myFunc()" class="tab-link" data-tab="tab-4">Tab Four</li>
	</ul>

	<div id="tab-1" class="tab-content current">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	</div>
	<div id="tab-2" class="tab-content">
		 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
	<div id="tab-3" class="tab-content">
		Ut enim ad minim veniam,...

CSS

body{
			margin-top: 100px;
			font-family: 'Trebuchet MS', serif;
			line-height: 1.6
		}
		.container{
			width: 800px;
			margin: 0 auto;
		}



		ul.tabs{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		ul.tabs li{
			background: none;
			color: #222;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
		}

		ul.tabs li.current{
			background: #ededed;
			color: #222;
		}

		.tab-content{
			display: none;
			background: #ededed;
			padding: 15px;
		}

		.tab-content.current{
			display: inherit;
		}

TypeScript

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `<h1>Angular 2 Tutorial</h1>
               

               `,
    styles:[`
                        .angular-2-tutorial {
                           background-color:#D3F3F4;
                           font-weight:bold;
                        }
                         
                        h3 {
                         color:#07C6F7;
                        }
                        h4 {
                         color:#5894F0;
                         font-size:12px;
                        }
                        
           `],

})
export class Angular2TutorialComponent { }


/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {bootstrap} from 'angular2/platform/browser';
import {Angular2TutorialComponent} from "./angular-2-tutorial.component";


bootstrap( Angular2TutorialComponent); 
/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/ 
*/




class Student {
    fullname : string;
    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
}

interface Person {
    firstname: string;
    lastname: string;
}

myFunc(){
    console.log("function called");
    
     var tab_id = $(this).attr('data-tab');

                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');

                $(this).addClass('current');
                $("#"+tab_id).addClass('current');
  }

function greeter(person : Person) {
    return "Hello, " + person.firstname + " " + person.lastname;
    
    $(document).ready(function(){
    
            $('ul.tabs li').click(function(){
                var tab_id = $(this).attr('data-tab');

   ...