Ionic 2: Custom Newsfeed Component Part 2 – Styling our component

In Ionic 2, ionicFramework by semeLeave a Comment

In our previous post, we created our simple, bland component. In this part, we’ll add our html makeup and styling in css. If you’re already familiar with css or want to go straight to functionality, you can download the files at the end of this part and go to part 3.

Our component will consist of the following:

  • an image
  • some header text
  • a text for defining the category of the feed

Let’s begin

In our src/app/feed-component/feed.component.ts file, let’s change the template to what’s shown below:

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

@Component ({
  selector: 'feed',
  template: `<div class="feed-component">
    <img src="http://placehold.it/750x750/ffcc33">
    <h1>From Russia with Love</h1>
    <h6>Film</h6>
  </div>`,
  styles: [`
        .feed-component {
          
        }
    `]
})

export class FeedComponent {

}

You’ll notice we have added an extra entry in our component meta data called styles. Here we can define all the styles specific to this component. Note the .feed-component class defined in styles[] is what we are using in the template content. We can put these styles in another file but for this tutorial we’ll leave it here.

Lets remove the introductory text in src/pages/page1/page1.html to reflect the following:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <feed></feed>
</ion-content>

Now run Ionic serve (Or wait for it to build new changes if already running) and you should see your component.

I’ll use this image below to explain what we’re going to do with the css

Adding the styles

Edit our src/app/feed-component/feed.component.ts to the following code. I’ve added a remote image as well.

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

@Component ({
  selector: 'feed',
  template: `<div class="feed-component">
    <img src="https://audacitus.com/site/wp-content/uploads/2017/01/feed-img-3.jpg">
    <h1 class="feed-title">From Russia with Love</h1>
    <h6 class="feed-category">Film</h6>
  </div>`,
  styles: [`
        .feed-component {
          position: relative;
        }

        .feed-component img {
          display: block;
        }

        .feed-component:before {
          position: absolute;
          width: 100%;
          height: 100%; min-height: 100%;
          background: rgba(67,67,67,0.4);
          content: ''
        }
        .feed-component .feed-title {
          position: absolute;
          bottom: 15px;
          padding: 0 20px;
          color: white;
        }
        .feed-component .feed-category {
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
          position: absolute;
          top: 45%;
          width: 100%;
          left: -45%;
          color: white;
          text-transform: uppercase;
          text-align: right;
          padding-right: 10px;
          padding-top: 20px;
          letter-spacing: 5px;
        }
    `]
})

export class FeedComponent {

}

Updating Ionic serve should show you this:

Now that we have something fancy, we can move on to making our component receive and output data.

Download Component Code