Building News App using Angular 5

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using Angular Services and how to turn your Angular 5 application into a News app.

I’m going to turn the application We created in the 6 previous articles, so you have to check them first!
No, you must check all of them!

Our News app will be:

In the previous articles We created a component named posts. I'll use it to show our news posts.

First Let’s discuss the layout of our posts component.
I want to build two things: part for filtering the news and part for displaying the news itself

I’ll use newsapi.org's API to get the news, so you have to signup and get a key.

Next, we have to create new angular service to get the news from the API. I'll name it news service.
Now, in your application's root directory open your terminal and run:

This command will create our news service and will update our app.module.ts.

We need to add something first in our app.module.ts to use it in new.service.ts

and add it to the imports
Now your app.module.ts should look like

Next we need to build the functions to call the api from our news.service

We’ll build 3 functions getTopHeadLines(), getNewBySource() and getSources().
getTopHeadLines: will get the Top Headlines news. and this will be displayed as the default news.
getSources: it will give us all the news sources, we'll use them to filter our news.
getNewBySource: We'll use the previous function to get the sources to use it in this function.

Here’s the code of our service

Now we need to edit our posts.component.ts. As we created 3 functions in our servicewe'll use them here in posts.component.ts

you have to import new.service.ts.

create 2 variable:
1st: will be news= {articles:[]}
2nd: will be newsSources= {sources:[]}

I’ll display articles from getTopHeadLines in ngOnInit and the new resources also.

Here’s the code of our src/posts/posts.component.ts

For the view of this component in posts.component.html
I made 2 parts as I said at the beginning of this article:
one for filtering the news and one to show them. I used Flex-Layout also.
I added two things for the posts:

You might noticed that there are some images that does not load correctly, to solve this problem I added this attribute onError="this.src='/assets/blank.png';"
It will display default image for damaged images.

Also I added a spinner to been displayed while our application fetching the data from the api, I used the Angular Material module MatSpinnerModule.

Here’s the code of posts.component.html

I did some small styling in src/app/posts/posts.component.scss

and I added some styling for the loader in src/styles.scss

For our home screen I want to make it dynamic, so let’s display our Top Hot-lines there.
We’ll use the same code and service:
Open src/app/home/home.component.html
and add the following code:

And replace the code into src/app/home/home.component.ts with

Finally let’s add some styling open src/app/home/home.component.scss

Now our application is done! Here’s the final result

Before you go, check me out the next useful Links: 👀

🤑️ No Stripe? How To Get Paid With Payoneer ⇒ $25 + $10 Sign UP Bonus

Related posts:

There are a number of animal shelters who help needy and poor animals. Every day these animal shelters take in lots of homeless dogs and cats to these shelters that with expectation wait for their…

I try not to have too many pet peeves, but unnecessary e-mails are one of them. In the last weeks I have had to interface more often than usual with law and accounting firms. At those firms, reply…

This COVID-19 situation is getting crazy. We are two months inside of this pandemic and it feels mighty gloomy. Everyone around the world is locked inside their homes, wearing masks making everyone…