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.

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

news app

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

Home page

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

index.html

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

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.

app.component.html

Now, we have a cool navbar on our site.

Navbar

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

app-routing.module.ts

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

app.module.ts

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.

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

app.module.ts

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.

Newsapi

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

newsapi.service.ts

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

top-news.component.ts

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

localhost

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.

top-news.component.ts

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.

top-news.component.html

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

styles.css

Now, our project is looking awesome with rolling text.

localhost

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.

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.

short.pipe.ts

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.

top-news.component.html

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

styles.css

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

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.

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

newsapi.services.ts

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.

tech-news.component.ts

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

tech-news.component.html

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

app-routing.module.ts

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.

app.component.html

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

localhost