back to all posts

Angular 12 News Application

by Nabendu Biswas / February 2nd, 2022

#javascript #angular #webdev

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.

news appnews app

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

Home pageHome 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 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 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.


Again the tech-news.component.html file will be exactly similar to the top-news.component.html. The only difference is the array name.


Now, in the app-routing.module.ts file, we will add the path for the TechNewsComponent.


Lastly, we will add the new route in the app.component.html file in the navbar. We are also adding a routerLink in place of all hrefs.


Our app is complete and working great. The code for the same is in this github repo.


Nabendu Biswas