Step-by-step Procedure to Design a News App with Ionic4 and Angular!
In today’s era when people are always curious about what’s happening in the world, it is definitely a great business idea to build a News application. If you are looking for the procedure to create such an app, then this article is all about that. Here you will get a glimpse of the step-by-step process to design a simple News app. We will be using Ionic4 and Angular for this project along with a third-party News API. As Ionic CLI only supports the generation of Ionic projects that are based on the Angular framework, we prefer Angular with Ionic.
The top reasons to go for Ionic app development along with Angular development are the combined technical advantages that these technologies offer. Click here to get more insight into the benefits of using these technologies.
Now let’s get back to the topic for which this article is meant for. Let’s dive into the steps involved in building the News Application.
Essential Considerations
First, install Node.js and npm. If that isn’t possible, simply visit the official website and download the required binaries for your development machine. Node.js is required for Ionic along with Ionic CLI and Angular CLI as well. Also, the developers need to have basic knowledge of TypeScript.
Installation of Ionic CLI4
Install version Ionic CLI4 by opening a terminal and running the command “$ npm install -g @ionic/cli” on your system.
In case you are using macOS or a Debian-based system, you will need to add “sudo” before this command. This is done for installing the packages globally.
If you face permission errors for Windows, try using a command prompt with administrator access.
Also, it is possible to get rid of npm permission errors in all the systems by applying any of the following two methods:
• By reinstalling npm using a node version manager
• By changing npm’s default directory manually
Developing the News App
By running the command- “$ ionic start” generate a simple project based on Angular. Then the CLI will ask you to enter essential information such as the name of the project, the starter template, etc.
Now press Enter for directing the CLI to start the generation of files and installation of dependencies from npm.
After this, go to the root folder of your project and run the below-given command for beginning a live-reload development server.
$ cd ./newsapp
$ ionic serve
You will see your application from the “http://localhost:8100” address.
This project will show two pages- home and list, out of which you need to delete the list page.
Now, delete the “src/app/list” folder and then open the file “app-routing.module.ts” file. Also, for the list page, you need to remove the route entry. Now there will be three routes available as given below:
• an empty path that redirects to the /home route
• /home route that displays the home page
• /list route that displays the list page
Remove the last one. Also, from the side menu, remove the link for the list page. For this, open the file- “src/app/app.component.ts” and then locate the app Pages array. Now delete the necessary objects.
Creating Pages
The next step is to create an about page for the application. Run the necessary command for creating “about” folder. This will also update the “src/app/app-routing.module.ts” file to include a route for the page that is generated now.
Now go to the side menu for adding a link to the about page. Update the app Pages array by opening the “src/app/app.component.ts” file.
Then open “the src/app/about/about.page.html” for adding a menu icon to the toolbar of the page. This enables users to open the side menu.
Adding Themes
First, open the “src/app/about/about.page.html”. Now add a dark color to the content section and a primary color to the menu toolbar.
For adding a theme to the homepage, open the “src/app/home/home.page.html” file and, accordingly modify the code. Also, open the “src/app/home/home.page.scss” file to add the required code. Finally, add a basic color to the menu toolbar by opening the “src/app/app.component.html” file.
Fetching News Data
Use third-party News API from NewsAPI.org/ for this. On this platform, register for an API key, fill the form and submit it. Not you will be redirected to a page where you will be able to copy the API keys.
Adding Services
We now need to add a service that fetches data from the News API. Run the below-mentioned command in your terminal.
“$ ionic generate service api”
Then open the file- “src/app/app.module.ts” to import “HttpClientModule” and adding it to the “imports array”.
Now open the file- “src/app/api.service.ts” and through the service constructor, inject HttpClient.
Then define an API_KEY variable as given below, for holding your API key from the News API.
export class ApiService {
API_KEY = ‘YOUR_API_KEY’;
Now you need to add a method for sending a GET request to an endpoint for news.
For holding the retrieved news, add an articles variable by running the command-
“export class HomePage {
articles;”
Lastly, let’s see how to display the news on the homepage of the app.
Open the “src/app/home/home.page.html” file once again and add the appropriate code to it.
Here, for looping through the articles variable, use the ngFor directive. Then, display the title, description, image, and URL of every article inside a card component.
Done! Your News app is ready!
Wrap-up:
So we have seen how a News app can be built from scratch using Ionic4 and Angular. This app can be modified by embedding new features for giving it a more professional feel and look. Do experiment and share your experiences with us.
If you are willing to develop a lucrative News application, hire highly experienced Ionic developers and Angular app developers from Biz4Solutions. We are a leading Angular and Ionic app development company delivering top-notch services to diverse clients globally. Reach out to us at sales.enquiry@biz4solutions.com .
