Ionic 2: Custom Newsfeed Component Part 1

In Ionic 2, ionicFramework by semeLeave a Comment

A lot has happened in the Ionic landscape, especially in Ionic 2. We’re weeks away from a final build, and while many would take the plunge when its been finalized, now seems as good a time as any to start learning Ionic in a real world context.

As Components are one of the major building blocks in Ionic, the time will come when you will need to create a custom component. In this multipart series, we’ll end up creating a functional feed item with extra options, fetching remote data, and a pull to refresh mechanism that factors in cached data.

Its part of our Ionic Starter Magaza, but the resources for this tutorial are free.

What you need

  • A certain familarity with Ionic 2
  • Familarity with command line
  • IDE (I use Atom but you can use your preferred)

Lets go!

Run a new installation of ionic. We’ll be calling it newsfeed

ionic start newsfeed sidemenu --v2

Now lets start our project

ionic-serve

We should have the following image below:

Pretty standard. The next thing we’ll want to do is create our component. A component  encapsulates all our functionality of a singlular concept and will provide us a means of inputing our data and a set of methods for usability.

Let’s create our Component

  • Create folder in src/app/feed-component
  • Create a our typescript file feed.component.ts

We’re going to create our component in this feed.component.ts. I’ve added the starting code below and will explain line by line.

import {Component} from '@angular/core';

Component ({
  selector: 'feed',
  template: `<div>
    our feed component
  </div>`
})

export class FeedComponent {
  
}

What did we just do?

import {Component} from '@angular/core';

We need to import the core function of angular, specifically Component. This way we’ll be able to define our Component Meta Data

Next, we defined the Component Meta Data:

@Component ({
  selector: 'feed',
  template: `<div>
    our feed component
  </div>`
})

Our component meta tells angular that when this component is imported and tag <feed> is used, it is to the be replaced with the html content defined in our template, with any related functions in a class.

Nice and all, but we need to import this component into our app.ts so it gets compiled at launch.

Adding to NgModule

From Angular rc5 components have to be imported/declared at app.module.ts.  Open your src/app/app.module.ts file and import our FeedComponent (last line)

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { FeedComponent } from './feed-component/feed.component';

Next we get to declare our imported FeedComponent into our declarations and entryComponent arrays. We do this so we’ll be able to use this component app wide without having to manually import our component everywhere we need it.

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2,
    // Our Imported Component
    FeedComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2,
    // Our Imported Component
    FeedComponent
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

Open src/app/pages/page1/page1.html and lets add our component.

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <feed></feed>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

when you’re done, run ionic serve. you should see our newly created component.

Its bland at the moment, but we’ll get to part 2: Styling our component