RSS in Angular 9+ (Integration with Your favourite blog, Facebook and Twitter)

Shubham

4 min readAug 14, 2020

In this story, we will see how to integrate RSS in Angular using ASP.net Core as BE.

First, we will integrate The Verge Blog in our Angular Application, you may integrate any of the your favourite blogs.

So let's go on https://www.theverge.com/

On their website, we can see an icon like this:

RSS icon on The Verge Blog

So, let’s click on it.

Now we can see you are directed to a new tab which shows XML code.

So we will just copy URL of that page, that's it.

So in my case, the URL is https://www.theverge.com/rss/index.xml. This will vary as per the selected blog.

Now, we can directly hit this URL to get XML of RSS using our existing Angular Application, but it gives CORS error. So to avoid this I am using ASP.net Core as my BE.

In this case, Back End is just a bridge between the hosted XML file and Angular Front End. We can use any BE like Spring Boot, Node JS, ASP.net Core.

Angular front end calls BE to get XML -> BE calls XML URL -> BE Returns XML Data to Angular.

So, Let’s create an API to get XML data.

In the controller, let's add a method to get The Verge Blog’s RSS Data.

[HttpGet("theVerge")]
public async Task<IActionResult> TheVerge()
{
string apiResponse;
using (var httpClient = new HttpClient())
{using (var response = await httpClient.GetAsync("https://www.theverge.com/rss/index.xml"))
{
apiResponse = await response.Content.ReadAsStringAsync();
Console.WriteLine("Response : ");
Console.WriteLine(apiResponse);
}
}return Ok(apiResponse);
}

Here I have just created an API (/theVerge). That returns XML data as a string. The function associated with API calls XML URL and sends XML data as a response.

Until now, we have an API like myBE.com/theVerge which returns XML data.

Now let’s integrate this API in our Angular Application.

Let's create a service for RSS calls.

In service, let’s integrate the newly created API.

theVerge(): Observable<any> {let url = myBEurl + "theVerge";return this.httpService.get(url, { responseType: 'text' });}

Let's create a model as per RSS’s coming data.

In our model's folder, create a file named RSSModel.ts

Add these classes in this newly created file:

export class RSSModel{
feed:FeedModel=new FeedModel();
}export class FeedModel{
title:string;
icon:string;
link:string;
entry:EntryModel = new EntryModel();
}export class EntryModel{
title:string;
content:ContentModel[]=new Array();
link:LinkModel[]=new Array();
}export class ContentModel{
_ : any;
}
export class LinkModel{
$ : DollerModel[]=new Array();
}export class DollerModel{
href:string;
}

Now its time to call BE function from our App

So let's create a component to show RSS feeds.

Add this code in the newly generated component.ts file:

import * as xml2js from "xml2js";
import { RSSModel } from '../Models/RSSModel';
import { RSSService } from '../services/rss.service';//under class
constructor( private rssService: RSSService) { }
ngOnInit(): void {
    this.GetRssFeedData()
}theVergeRssDara: RSSModel = new RSSModel();
isFeedDataArrived = false;
GetRssFeedData() {
this.rssService.theVerge().subscribe(
data => {
console.log("data : ");
let parseString = xml2js.parseString;
parseString(data, (err, result: RSSModel) => {
this.theVergeRssDara = result;
this.isFeedDataArrived = true;
}
)
});
}

In the above code, we have just called our BE API, read XML code, converted XML code into JSON and our created RSS model.

Add this code in the newly generated component.html file:

<b>Today's Feeds : </b>
<mat-accordion>
<div *ngIf="isFeedDataArrived">
<div *ngFor="let entry of theVergeRssDara.feed.entry">
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{getTrimmed(entry.title)}}
</mat-panel-title>
</mat-expansion-panel-header>
<div [innerHTML]="entry.content[0]._"></div>
</mat-expansion-panel>
</div>
</div>
</mat-accordion>

Hurray! Done!!!…

After the successful run of BE and FE, we can see all Updated feeds by The Verge Blog on our Angular application.

Now let’s see the procedure for Facebook and Twitter Feed integration.

Here, the procedure of integration of The Verge and Facebook feed is almost same. Just question is, How to get My Facebook/Twitter page’s RSS data?

The simple solution is FetchRSS.

Just visit and signup on http://fetchrss.com/

Go to your Facebook or Twitter public page which you want to integrate with your Angular Application. Copy URL.