Oct 5, 2021

5 min read

Angular 12 News Application

Welcome to a brand new Angular project. Here, we are going to build an Angular 12 News application from scratch.

Now, go to any folder in your computer and in the terminal type the below command to create the Angular project.

ng new news-app

It will ask us a bunch of questions. Let’s answer them as mentioned below.

Next, we will add bootstrap(version 5) in our project by add the CSS and JS file from the https://getbootstrap.com/ home page.

Now, we will add the CSS and JS file in out index.html file.

Now, make sure that ng serve is running. Create a top-news component with below command.

ng g c top-news

We will next take a cool navbar from bootstap site. We have edited it also a bit and kept the router-outlet in app.component.html file.

Now, we have a cool navbar on our site.

Now, we will first add the TopNewsComponent in our app-routing.module.ts file.

Next, we will also add the HttpClientModule in app.module.ts file.

Now, we are going to use services to do the api call. So, we will create a new service called newsapi.service.ts by below command.

ng g s service/newsapi

Now, let’s also include this service in app.module.ts file.

Now, we will go to the https://newsapi.org/ to get the API endpoint for the news. Once you logged in, go to Documentation and then Top headlines.

Now, we will add the api keys in our newsapi.service.ts file and also add an function to do the call through HttpClient.

Now, in the top-news.component.ts file, we will subscribe to this Observable and get the result.

Now, in localhost, we can see the data in the console.

Now, it’s time to show the data in our project. But before that we need to add a variable topHeadlinesData in top-news.component.ts file.

Now, we will add the html code in top-news.component.html file. Here, we are just looping through the topHeadlinesData variable and showing the image, title and the variable.

Also, notice that we have added a h4 tag and a marquee inside it.

Now, we will add a bit of global style in styles.css file.

Now, our project is looking awesome with rolling text.

There are two things which we need to change for these boxes to look better. First, some of the headlines are very big, whether others are small. So, we want all of them to be of same length.

We are going to create a custom pipe for it, which takes a limit and restricts the length.

So, create a pipe short with the below command.

ng g p short

Now, in the short.pipe.ts file, update the below content. It is taking a limit and with substr cutting it. After that it add the three dots.

Now, we will use this pipe in top-news.component.html file. Also, we have updated the img tag, by removing the width from it.

Now, we will make the img of equal height and responsive by adding the styles in styles.css file.

Now, the boxes are of equal size and looking awesome.

Now, in Home we are showing general news. But we also want to show Tech news in another path.

So, create a new component tech-news with the below command.

ng g c tech-news

Now in the newsapi.services.ts file, we will add new services for tech news.

Now, the tech-news.component.ts file will be exactly similar to the top-news.component.ts. The only difference is the service it calls and the array name.