Create RSS Reader In Angular

Create an Angular RSS reader

We are going to create RSS reader in angular, let’s start.

Create angular project using below command.

$ npm install -g angular-cli (if not installed)
$ ng new angular-rss-reader

Now just select the app in your terminal.

$ cd angular-rss-reader
$ ng -o serve

Open http://localhost:4200 to see the app in action.

Now let’s add bootstrap to this project.

$ npm install bootstrap

Now, let’s create a new component:

$ ng g c news

1. Add Html in your component

<div class="row pt-2">
    <div class="col-ms-12">
        <div class="card">
        <div class="card-body text-left card-box p-0">
          <span class="card-text card-news-title display-5 p-3">Treading {{RssData?.rss.channel[0].title[0]}} News</span>
          <div *ngFor="let o of RssData?.rss.channel[0].item;">
            <div class="news-text-contain p-3">
                <span class="card-text card-contain d-block">{{o.title[0]}}</span>
                <span class="text-muted d-inline card-subtext"> CNBC: Top News <span class="dot"> </span> {{getDataDiff(o.pubDate)}}</span>
              </div>
          </div>
        </div>
      </div>
    </div>
</div>

2.  here are some CSS for proper design from my end.

.card-news-title{
    display: block;
    padding-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
    border-bottom: solid 1px #dee2e6;
}

.card-box{
    width: 22vw;
}
.card-contain{
    padding: 10px 0 5px 0;
    font-size: 16px;
    font-weight: 500;
}
.card-subtext{
    font-size: 14px;
}
.dot {
    height: 5px;
    width: 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transform: translateY(-50%);
}
.news-text-contain{
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

3. Now let’s create the function which will return the data calling API.

import { ActivatedRoute } from '@angular/router';
import { NewsRss } from './news-rss';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import * as xml2js from 'xml2js';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css'],
})
export class NewsComponent implements OnInit {
  RssData: NewsRss;

  constructor(private http: HttpClient,private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe((params: any) => {
      var symbol = params.params.q ?? 'AAPL';
    this.GetRssFeedData(symbol);
   });
  }

  GetRssFeedData(symbol) {
    const requestOptions: Object = {
      observe: 'body',
      responseType: 'text'
    }; 
    const _url = "https://gadgets.ndtv.com/rss/feeds";
    this.http 
      .get<any>(
        _url,
        requestOptions
      )
      .subscribe((data) => {
        let parseString = xml2js.parseString;
        parseString(data, (err, result: NewsRss) => {
          this.RssData = result;
        });
      });
  }

   getDataDiff(endDate) {
    let setDate= new Date(endDate).toISOString();
    var diff = (new Date()).getTime() - new Date(setDate).getTime();
    var days = Math.floor(diff / (60 * 60 * 24 * 1000));
    var hours = Math.floor(diff / (60 * 60 * 1000)) - (days * 24);
    var minutes = Math.floor(diff / (60 * 1000)) - ((days * 24 * 60) + (hours * 60));
    let dayString =  days == 0 ?  "" : days + "days ";
    let hoursString =  hours == 0 ?  "" : hours + "hr ";
    let minutesString =  minutes == 0 ?  "" : minutes + "m ";

    return dayString + hoursString + minutesString;
  }
}

Here is my DTO/interface, just create new files and add it into that file, and the import it in our ts file.

export interface NewsRss {
    rss: IRssObject;
  }
  
  export interface IRssObject {
    $: any;
    channel: Array<IRssChannel>;
  }
  
  export interface IRssChannel {
    "atom:link": Array<string>;
    description: Array<string>;
    image: Array<IRssImage>;
    item: Array<IRssItem>;
    language: Array<string>;
    lastBuildDate: Date;
    link: Array<string>;
    title: Array<string>;
  }
  
  export interface IRssImage {
    link: Array<string>;
    title: Array<string>;
    url: Array<string>;
  }
  
  export interface IRssItem {
    category: Array<string>;
    description: Array<string>;
    guid: any;
    link: Array<string>;
    pubDate: Date;
    title: Array<string>;
  }

_url is the API url. You can change it with your API.

Output: 

That’s it. Let me know if you face any difficulties.