Monthly Archives: January 2017

AngularCli – Passing Data In / Out of Angular2 Components

AngularCli – Passing Data In / Out of Angular2 Components

In this post how we can pass data in and out of an angular2 component. Here we are creating an app to increment the input number. We have a textbox to enter a number. We are also creating a component. The number entered in the textbox is supposed to be passed to the component. Clicking the component should increment the number and the data should be passed from the component to outside.

Let’s first create an angular2 app using Angular-Cli. Let’s name it Angular2PassingData.

ng new Angular2PassingData

Now let’s create a component incrementer.

ng generate component incrementer

The new component is a simple component with just a button. As the button is clicked, increment() method is called for the component.

AngularCli has also generated incrementer.component.ts. Since we are planning to pass data in and out, so let’s import Input and Output from @angular/core. We also need to import EventEmitter from the same package which is to be used for the Output.

We have decorated inputNum and @Input and incremented as @Output. The inputNum has number type. The incremented is an EventEmitter to be used to emit output data through events.

In app.component, we have a textbox to enter a number. We are binding incrementInputNum property from component’s code behind to the textbox. We are binding another property incrementInputNum to incrementer.component’s inputNum property. Additionally, the incremented event from incrementer.component would trigger increment method to be called with event’s data. We also see another property being used here, which is incrementedNum, which is just displayed in a label. It would show the incremented number in the user interface.

As we have seen above, we are expecting two number based properties in app.component’s code behind. They are incrementInputNum and incrementedNum. In the incrementNum() method, we are just assigning the data from the event to incrementedNum property.

Now let’s run the application using ng serve. The app runs on localhost:4200 by default. As we enter a number and click Increment button, the data is passed to the incrementer component. It is incremented there and an event is emitted. The app.component is subscribing to that event and updates its own variable, which is then shown on the UI.

Incrementer App

Incrementer App

Assigning event data in template

Now let’s try to make it a little simpler. We are simply assigning the event’s data to one of the property in app.component’s code behind (other than writing to the console). Angular2 can make it a little easier for us. We can make it simpler by directly assigning the event’s data the property. Here we are updating incrementedNum to the data emitted by the component’s incremented event.

Repository

Github repo

Github repo

Angular2 – Using 3rd Party Libraries

Angular2 – Using 3rd Party Libraries:

We always need third party libraries to build any application. The same is true for applications built using Angular2. In this post, we are going to discuss how we can use 3rd party libraries in an Angular2 app. We have discussed adding these libraries to an Angular2 app with RC version. There are a few changes so it’s better that we discuss a complete new example.

Let’s use NumeralJs. The library is used to format numbers in javascript. Here we will be using the library to format an arbitrary number.

Installing Package

npm install --save numeral

npm install numeral

npm install numeral

Installing type definitions
There is also a @typedefinition package available for NumeralJs. This would allow it to be used in our typescript code without any editor squigglies.

npm install --save @types/numeral

numerals type definition

numerals type definition

Let’s first import the numeral into our component:

import * as numeral from 'numeral';

Now we can use the numeral library. Here we are formatting numbers using numeral library.

result = numeral(10000).format('0,0');

Here is the definition of component-one.component.ts

And let’s add it to the component’s HTML.

Now let’s run it using ng serve again. Here is how our ComponentOne looks like now:

app works formatted

app works formatted

Of course, I have highlighted the formatted result.

Using CSS Styles and JS Scripts from Libraries

Now try using a package which is a little more complex than numeralJs. Here we are using Angular2 Bootstrap (ng2-bootstrap). In order to use bootstrap, we need to use CSS styles and javascript code files. Let's first install ng2-bootstrap, which allows bootstrap to be used in Angular2 typescript code.

npm install –save ng2-bootstrap

Here we are running the above command:

ng2 bootstrap install

ng2 bootstrap install

We also need to install bootstrap package.

npm install --save bootstrap

bootstrap install

bootstrap install

We need to use styles and js files from the installed bootstrap packages. Let’s add the following css file to styles section of angular-cli.json.

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
]

We also need to add java script file to the scripts section.

"scripts": [
   "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

And the whole angular-cli.json file is as follows:

app.module.ts

Now we need to import ng2-bootstrap module. Let’s add it to app module (app.module.ts)

import { TabsModule } from 'ng2-bootstrap';

We need to add TabsModule now to the imports section of AppModule.

imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(appRoutes),
  TabsModule.forRoot()
],

Now the app.module.ts has been updated as follows:

component-two.component.html

Now let’s add the tab to our component’s HTML. Here we are adding it to component-two.component.html

Now let’s run it. The tabs look as follows:

app works tabs

app works tabs

Angular2 Routes

Angular2 Routes:

In this post we are going to use how to use routes with Angular2 for your components. We are going to create two components and add routes for those components. Let’s first install angular-cli.

Install angular cli

Install angular cli

Let’s create a new project HelloWorld.

create project

create project

The command creates the following files:

files created

files created

The main folder structure looks like this:

main folder structure

main folder structure

The src folder looks like the following:

src folder structure

src folder structure

Let’s run the project using ng serve command:

ng serve

ng serve

And open the browser with http://localhost:4200

app works

app works

Adding Components

Let’s add components to our applications. Here we are adding two components ComponentOne and ComponentTwo.

>ng generate component ComponentOne
>ng generate component ComponentTwo


ng generate component

ng generate component

app.module.ts

Now we need to RouterModule from @angular/router. The good thing is angular-cli already adds the router when we created the project. First we need to import the RouterModule.

import { RouterModule, Routes } from '@angular/router';

Now let’s import the two components we created above i.e. ComponentOne and ComponentTwo.

import { ComponentOneComponent } from './component-one/component-one.component';
import { ComponentTwoComponent } from './component-two/component-two.component';

Now let’s add the routes to our components.

const appRoutes : Routes = [
  { path: "componentOne", component: ComponentOneComponent},
  { path: "componentTwo", component: ComponentTwoComponent}
]

We can add the routes to the RouterModule imported above. We also need to add the imported components to declarations section to the module. Please also notice that we are adding the routes to the imports section RouterModule.forRoot(appRoutes).

@NgModule({
  declarations: [
    AppComponent,
    ComponentOneComponent,
    ComponentTwoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Let’s update the app.module.ts as follows:

app.component.html

Now we just need add where we need to decide where we need to display the components. We just need to add to app.component.html.

Running the project

Now we can run the project and see the routes in action. Let’ run it using ng serve. The main url displays the app component - http://localhost:4200/

app works main

app works main

The ComponentOne route can be used as http://localhost:4200/componentOne. Just see the contents of the components are displayed in the section where we added .

app works component one

app works component one

Here we have ComponentTwo with the url: http://localhost:4200/componentTwo

app works component two

app works component two