How to use multiple components in angular 2.

In this article, We will discuss about How to use multiple components in angular 2.

First of all, Goto Visual Studio Code.

Open a Folder.

Create package.json file and the file looks like as below,

package.json
------------
{
    "name": "multiplecomponent",
    "description": "Example Of Multiple Components",
    "dependencies": {
        "@angular/core": "latest",
        "@angular/common": "latest",
        "@angular/compiler": "latest",
        "@angular/platform-browser": "latest",
        "@angular/platform-browser-dynamic": "latest",
        "rxjs": "6.0.0",
        "zone.js": "latest",
        "systemjs": "latest",
        "core-js": "latest"
    }
}

Goto Integrated Terminal and type "npm install".

Create systemjs.config.js file and the file looks like as below,

systemjs.config.js
------------------
System.config({
    map:{
        "app":"scripts",
        "@angular/core":"node_modules/@angular/core/bundles/core.umd.js",
        "@angular/common":"node_modules/@angular/common/bundles/common.umd.js",
        "@angular/compiler":"node_modules/@angular/compiler/bundles/compiler.umd.js",
        "@angular/platform-browser":"node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
        "@angular/platform-browser-dynamic":"node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
        "rxjs":"node_modules/rxjs"
    },
    packages:{
        "app":{main:"./app"},
        "rxjs":{}
    }
});

Create tsconfig.json file and the file looks like as below,

tsconfig.json
-------------
{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": false,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,        
        "lib": [
            "es2015","dom"
        ]
    }
}

Create "scripts" folder and add app.ts file in it and the file looks like as below,

app.ts
------
import {Component,NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";

//Component1
@Component({
    selector:"header",
    template:`
            <table>
            <tr>
            <td>
            <img src="./images/coverCopy.gif" height=50 width=80/>
            </td>
            <td>
            <h2> Microsoft </h2>
            </td>
            </tr>
            </table>
    `,
    styles:["h2{color:green}"]
})

class HeaderComponent{}

//Component2
@Component({
    selector:"bodyinfo",
    templateUrl:"./views/bodycontent.html",
    styleUrls:["./styles/componentstyle.css"]
})

class BodyComponent{}

//Module
@NgModule({
    declarations:[HeaderComponent,BodyComponent],
    imports:[BrowserModule],
    bootstrap:[HeaderComponent,BodyComponent]
})

class AppModule{}

platformBrowserDynamic().bootstrapModule(AppModule);

Create "images" folder and add those images which we were using in app.ts file.

Create "styles" folder and add "componentstyle.css" file (this css file we are using in app.ts file as styleurl) and the file looks like as below,

componentstyle.css
------------------
div{
    font-size: x-large;
}

Create "views" folder and add "bodycontent.html" file (this html file we are using in app.ts file as templateUrl) and the file looks like as below,

bodycontent.html
----------------
<div>
    Angular Rocks!!
</div>

Create index.html file andthe file looks like as below,

index.html
----------
<html>
    <head>
        <script src="node_modules/core-js/client/shim.js"></script>
        <script src="node_modules/systemjs/dist/system.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="systemjs.config.js"></script>
        <script>
            System.import("scripts").catch(function(ex){
                console.log("Error With SystemJS Loader File");
            });
        </script>
    </head>
    <body>
        <header>Loading Header...</header>
        <br>
        <bodyinfo>Loading Body...</bodyinfo>
    </body>
</html>

Goto Intergrated Terminal and type tsc

Again type http-server

Goto Browser and run with http://127.0.0.1:8080/index.html".

Saturday 28 April 2018

How to use multiple components in angular 2.

0 comments:

Post a Comment

Contact Form