block ui with angular 2 on button click

Question

Below plunker link uses angular 2 beta version code, which works perfect,

<head>
<title>angular2 spinner</title>
<link rel="stylesheet" href="src/spinner.css" />
<script src="https://code.angularjs.org/2.0.0-beta.11/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="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/http.min.js"></script>
<script>
System.import('app')
  .catch(console.error.bind(console));

http://plnkr.co/edit/Y2ocRpbi2ORjbULrguDg?p=preview

Now I am trying to replicate the same with Angular version 2.0.X, but most of things are changed from RC version.

Below is my current plunker code link,

http://plnkr.co/edit/f6GBBQan7z4I9K1qBZOi?p=preview

I am very new to Angular 2, please help me to resolve it.

Thanks,

AT82 AT82 · Accepted Answer · 2016-12-23T14:40:32

I forked your plunker. You had some issues. As a future reference, provide necessary code in question, as links can change. Here is the plunker and I will point out errors. Errors are also marked in plunker. Plunker

You had some import issues. When importing from angular, it should be @angular/core, not @angular2/core

Providers in @Component are not needed anymore, as you provide them @NgModule

Your path was sometimes wrong in your imports of your created Component. You had marked them as ./src/spinner.component, remove the src/ from the imports.

You were missing the entryComponents: [SpinnerComponent] in your @NgModule

block ui with angular 2 on button click

1 Answers