angularMaterial-news

This project was generated with Angular CLI version 11.0.1.

Run the project

• Run npm i to install packages

Development server

• Run ng s for a dev server
• Navigate to http://localhost:4200/

Build

• Run ng build to build the project
• The build artifacts will be stored in the dist/ directory
• Use the --configuration production flag for a production build
• The --prod flag is deprecated, and we must now use --configuration production flag

Description

• User is getting data from 3 APIs
• Navigation is displayed via Angular Material Toolbar
• User is able to switch between 2 News categories via Angular Material Tabs
• News articles contain: title, description, author, date of publish, image (if has one) and URL to original post
• User is able to search News articles by keywords via Ng2 Search Filter
• News articles are filtered by language & category
• News articles can be sorted - ASC or DESC
• News articles are displayed via Angular Material Card
• Original News articles can be seen via Angular Material Button
• User can view Reporters via Angular Material Table & Dialog on large screens and it's details via Angular Material Expansion Panel on mobile screens
• User can choose not to see Reporter details (pop-up) Dialog via Angular Material Slide toggle
• User can view Workers via Angular Material Selection List
• User can view Worker Flights via Angular Material Sidenav and Angular Material Card
• User can copy Worker Flights number via Clipboard
• Worker Flights are modified with custom and build-in Angular pipes
• User can switch between English and Serbian laguage via Angular Material Menu
• Content is translated via Transloco Service
• Project is using Angular Flex Layout and custom styles

Project is using APIs from

• https://mediastack.com/
• https://jsonplaceholder.typicode.com/
• https://interview-mock.herokuapp.com/

Installed packages

• Angular Material
• Angular Flex Layout
• Material Icons
• Ng2 Search Filter
• Transloco Service

Installed Angular Material components

• Toolbar
• Tabs
• Table
• Dialog
• Menu
• Expansion Panel
• Selection List
• Sidenav
• Clipboard
• Card
• Slide toggle
• Progress spinner
• Input
• Button
• Icon

There is the same project in PrimeNG on this GitHub account