angular4 example

by Shirly Manor

HTML

<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<my-app>
  <script src="https://media-library.cloudinary.com/global/all.js"></script>
/my-app>

TypeScript

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	<h1>Hello, {{ name }}</h1>
    <button (click)="increment()">open</button>
  `,
})

class HomeComponent {
		increment(){
    cloudinary.openMediaLibrary({
   cloud_name: 'shirly',
   api_key: '243651824887721',
   button_class: 'myBtn',
   button_caption: 'Select Image or Video',
 }, {
     insertHandler: function (data) {
       data.assets.forEach(asset => { console.log("Inserted asset:",
       JSON.stringify(asset, null, 2)) })
       }
    },
    document.getElementById("open-btn")
)
}
}
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);