Skip to content

Latest commit

 

History

History
74 lines (58 loc) · 2.31 KB

README.md

File metadata and controls

74 lines (58 loc) · 2.31 KB
Raw

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