How do I make an RSS feed work in Angular 4?

Asked

Viewed 294 times

-2

The code below is working on a page HTML

  

  <html>
        <head>
            <title>Titulo da página</title>
            <meta charset="utf-8">
            <script type="text/javascript"> 
                rssfeed_url = new Array(); 
                rssfeed_url[0]="http://esporte.uol.com.br/ultimas/index.xml";  
                rssfeed_frame_width="300"; 
                rssfeed_frame_height="260"; 
                rssfeed_scroll="on"; 
                rssfeed_scroll_step="6"; 
                rssfeed_scroll_bar="off"; 
                rssfeed_target="_blank"; 
                rssfeed_font_size="12"; 
                rssfeed_font_face=""; 
                rssfeed_border="on"; 
                rssfeed_css_url=""; 
                rssfeed_title="on"; 
                rssfeed_title_name=""; 
                rssfeed_title_bgcolor="#3366ff"; 
                rssfeed_title_color="#fff"; 
                rssfeed_title_bgimage=""; 
                rssfeed_footer="off"; 
                rssfeed_footer_name="rss feed"; 
                rssfeed_footer_bgcolor="#fff"; 
                rssfeed_footer_color="#333"; 
                rssfeed_footer_bgimage=""; 
                rssfeed_item_title_length="50"; 
                rssfeed_item_title_color="#666"; 
                rssfeed_item_bgcolor="#fff"; 
                rssfeed_item_bgimage=""; 
                rssfeed_item_border_bottom="on"; 
                rssfeed_item_source_icon="off"; 
                rssfeed_item_date="off"; 
                rssfeed_item_description="on"; 
                rssfeed_item_description_length="120"; 
                rssfeed_item_description_color="#666"; 
                rssfeed_item_description_link_color="#333"; 
                rssfeed_item_description_tag="off"; 
                rssfeed_no_items="0"; 
                rssfeed_cache = "e90320463f8111afd3b519c711ff89e3"; 
            </script> 

            <script type="text/javascript" src="https://feed.surfing-waves.com/js/rss-feed.js"></script> 

        </head>

        <body>
            <div style="text-align:right; width:300px;">powered by <a href="http://www.surfing-waves.com" rel="noopener" target="_blank" style="color:#ccc;font-size:10px">Surfing Waves</a></div> 
        </body>
    </html>

How could I make it work in an angular design 4 ?

angular

  • What is the difficulty? Have you ever done an angular project?

  • yes, I’ve done it.

1 answer

2


You can download the document using HttpClient and can use the:

Basic example:

import { HttpClient } from '@angular/common/http';

...

title = '';
description = '';

constructor(private http: HttpClient) { }

...

downloadXml() {
    this.http.get("http://site.com/feed.rss").subscribe(res => {
         parseXml(res); //Baixo o XML
    }, err => {
         console.log(err);
    });
}

...

parseXml(data) {
    let parser = new DOMParser;
    let doc = parser.parseFromString(data, "application/xml");

    this.title = doc.querySelector("channel > title").text;
    this.description = doc.querySelector("channel > description").text;

    ...
}

And HTML would look something like:

<h1>{{title}}</h1>
<h2>{{description}}</h2>

To catch the items you will have to iterate with for and taking only the texts, for example:

title = '';
description = '';
items = [];

constructor(private http: HttpClient) { }

...

parseXml(data) {
    let parser = new DOMParser;
    let doc = parser.parseFromString(data, "application/xml");

    this.title = doc.querySelector("channel > title").text;
    this.description = doc.querySelector("channel > description").text;

    let items = doc.querySelectorAll("channel > item");
    let objs = [];

    for (let el of items) {
         let obj = {
             "link": el.querySelector("link"),
             "title": el.querySelector("title"),
             "description": el.querySelector("description")
         };

         objs.push(obj);
    }

    this.items = objs;
}

And in HTML it would look like this (using *ngIf to check if there is something and *ngFor to iterate the values in this.items):

<h1>{{title}}</h1>
<h2>{{description}}</h2>

<div *ngIf="items.length">
    <div *ngFor="let item of items">
        <h3><a href="{{item.link}}">{{item.title}}</a></h3>
        <p>{{item.description}}</p>
    </div>
</div>

  • i understood that you put the service class and the HTML page, but the component class as it will look?

  • @wladyband as well, you want a service in the background to be updating the data alone? This example I posted is the basics of how to do the "parse" of the RSS (which until then seemed to me its difficulty). Exactly where is your difficulty now?

  • I’m sorry, I just had a little patience with myself, I can understand your code, the codes so without saying where is component or is service, I can identify where is the pages. This is what I’m referring to: class Midiaexibircomponent class Midiaservice

  • @wladyband have you developed something in Angular? Is it for web or mobile (Ionic)? Because it is so, Angular you use "free way", create the class, create the template, in case the HTML there can go inside a document foo.html and load so in your .ts templateUrl: "foo.html", if you want to inject HTML into . ts would use https:/pastebin.com/4NASVzvSlike this

  • got it, I’ll take your code and run the tests, thank you very much

  • @wladyband but is a WEB project or is a hybrid application (Ionic for example) for mobile?

  • is an angular 4 web project

  • @wladyband and how did you structure the first page? Did you create any more pages, like a "page 2" or "contact page"? ps: just for the record ... in the code I posted above is an example, it is to say that there would be more codes, but the idea is that if you know the basics of Angular will understand where the construct is and where the methods go ;)

  • you answered my question right, it was I who asked the bad question asked, even so thank you very much, I will see if I make a new post and this time creating a more complete question.

  • @Guilhermenascimento how to catch the "img" of the content:encoded, which is where the src of the img?

  • 1

    @Braiansilva tá resposta https://answall.com/a/395784/3635, in future preferred comments put the link of your questions, if they already exist ;)

Show 6 more comments

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.