Angular 2 News Application

Job ID: 38312468

Budget: ₹600 – ₹1,500 INR

Components

The app has following components:
AppComponent: Main Component
HeaderComponent: Display the logo
SectionsComponent: Display different sections of news
NavbarComponent: Display sub-sections of news
NewsComponent: Will fetch the complete list of news and send to NewsItemComponent
NewsItemComponent: Display each news item

SectionsComponent
Subscribe and fetch the list of sections from store
Loop through the array and display each section name as routerLink
It should change the url as /section/sectionName
NavbarComponent
Display Subsections
Get the list of news from the store
Multiple news might be categorized in one subsection. Filter list of unique subsections from the list and display in the navbar
Filter News
When a user clicks on subsection, dispatch action and send the subsection name as a parameter to store
This action will update the filter variable in store

NewsComponent
Send the name of the selected section to Service and get the list of news.
Send this list of news to update store
Now subscribe store to get the news list and send it to NewsItemComponent

NewsItemComponent
Get news item from NewsComponent and display it
Show image and caption when clicked on "Read More"

Services
NewsService
The Service will have a function called getSectionNews().
This function will fetch news list of the selected section, from the NY Times API.
API url:
url = 'https://api.nytimes.com/svc/topstories/v2/' + sectionName + '.json?api-key=315a5a51483b469a918246dc2753b339'

Actions
Action
Implement the following two actions:
LOAD_SECTION_NEWS: Will be dispatched when the user wants to load a new section.
FILTER_SUBSECTION: Will be dispatched when one of the news sub-section is clicked.

Reducers
Reducer: Sections
Implement LOAD_SECTIONS action
When this action is dispatched, the reducer will return the state having list of sections.

Reducer: News
This reducer will implement two actions:
LOAD_SECTION_NEWS: This will load news from selected section to newsList in store.
FILTER_SUBSECTION: Sets the value of filter in store

Selector
This will get the news list and filter from the reducer
Return a new list of news, based on the selected subsection

GitHub URL for the source code - https://github.com/dheepthy23052009/angular-news-app
Related categories: JavaScript CSS HTML5 Node.js Angular