CODEWITHSUNDEEP
javascriptangularjs
Prachil Tambe
Prachil Tambe

Reputation: 115

Angular2 Component communication in JS

I am unable to communicate between two component in Angular 2 using JS. This is link for tutorial. I think I am missing something with directives. I tried to change it with declarations as well

This is app.main.js

(function () {

var Component = ng.core.Component
var bootstrap = ng.platformBrowserDynamic.bootstrap

var RandomComponent = Component({
    selector: 'random-component',
    template: `
        <h2> Hsdsdffdsdfi <h2>
        `
}).Class({
    constructor: function() {
        //empty
    }
});

var AppComponent = Component({
    selector: 'main-app',
    directives: [RandomComponent],
    template: `
        <h1> Hi {{username}}<h1>
        <random-component></random-component>
        `
}).Class({
    constructor: function() {
        //empty
        this.username = "Username"
    }
});

document.addEventListener('DOMContentLoaded', function(){
    bootstrap(AppComponent);
});

})();

and this is index.html

<html>
   <head>
    <title>Angular 2 QuickStart JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <main-app>Loading....</main-app>
  </body>

</html>

I am currently using Angular 2 RC5, and do not wish to go to ts. I also could not find any documentation regarding JS as well. If anyone knows a good documentation link for 'JS' (not ts), please help with that as well.

Upvotes: 0

Views: 376

Answers (1)

Stanimira Vlaeva
Stanimira Vlaeva

Reputation: 81

NgModules

Angular2 RC5 introduced NgModules. According to the documentation,

Angular Modules help organize an application into cohesive blocks of functionality.

You need to define at least one module in your Angular application. You also should bootstrap that (root/main) module instead of a component (AppComponent in your case).

Another change is the way you declare your components and directives. Instead of using the directives property in every component, now you list them in the module using the declarations property.

Here's the working solution:

(function () {
    var Component = ng.core.Component
    var NgModule = ng.core.NgModule;
    var BrowserModule = ng.platformBrowser.BrowserModule;
    var bootstrap = ng.platformBrowserDynamic;

    var AppComponent = Component({
        selector: 'main-app',
        template: `
            <h1>Hi {{username}}</h1>
            <random-component></random-component>
            `
    }).Class({
        constructor: function() {
            this.username = 'Username';
        }
    });

    var RandomComponent = Component({
        selector: 'random-component',
        template: `
            <h2>Random title<h2>
            `
    }).Class({
        constructor: function() { }
    });

    AppModule = NgModule({
        imports: [
            BrowserModule
        ],
        declarations: [
            RandomComponent,
            AppComponent
        ],
        bootstrap: [
            AppComponent
        ]})
        .Class({
            constructor: function() { }
        });

    document.addEventListener('DOMContentLoaded', function() {
        bootstrap.platformBrowserDynamic()
            .bootstrapModule(AppModule);
    });
})();


Tutorials

Unfortunately, the Angular 2.0 docs about Javascript are definitely not as rich as the docs about Typescript. You can check the QuickStart Guide (there's and appendix regarding NgModule) or the corresponding Typescript chapter.

Upvotes: 2

Related Questions