<!DOCTYPE html>
<html>

  <head>
    <title>Semantic-UI Labels</title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {
    
    app: './src',
    '@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/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule}   from '@angular/forms';
import {MyComponent} from './my-component';
@NgModule({
  imports: [ 
    BrowserModule, 
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
        MyComponent,
    ],
    bootstrap: [MyComponent]
})
export class AppModule {}
import {Component, OnInit, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
  <button class="ui primary button" (click)="openModal()">Okay</button>

  <div class="ui modal" role="dialog" aria-labelledby="modal-title" aria-modal="true">
    <div class="header" id="modal-title">
      Test modal
    </div>
    <div class="content">
        <div class="ui header">This is an information dialog</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tincidunt mauris. Ut justo purus, tempor et metus eu, rhoncus placerat risus. Aliquam laoreet tellus vitae massa tincidunt rhoncus ut vitae nulla.</p>
        <p>Phasellus id nibh odio. Fusce aliquet, est a luctus viverra, felis arcu varius felis, non sagittis arcu velit ac risus. Nunc euismod non quam eu scelerisque. Duis sit amet suscipit sem, vel laoreet mauris. Proin sodales, urna sed lacinia rhoncus, metus ante eleifend ipsum, commodo scelerisque libero nibh sit amet sem. Quisque tempus eget metus vitae volutpat. In ultrices cursus consequat.</p>
    </div>
    <div class="actions">
      <button class="ui deny button">Cancel</button>
      <button class="ui positive button">Confirm</button>
    </div>
  </div>
  `
})
export class MyComponent {
  ngOnInit(): void {
    $('.ui.modal').modal({
      closable: false
    });
  }
  
  openModal(): void {
    $('.ui.modal').modal('show');
  }
}