Skip to content

Project is using Lazy Loading and Preloading Strategy. Using Angular Material, Angular Flex Layout, Material Icons, Ng2 Search Filter, Transloco Service and Angular Material components: Toolbar, Dialog, Tabs, Table, Expansion Panel, Menu, Selection List, Sidenav, Clipboard, Slide toggle, Card, Input, Progress spinner, Icon, Button. There is the …

MilosCemalovic/angularMaterial-news

Repository files navigation

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

About

Project is using Lazy Loading and Preloading Strategy. Using Angular Material, Angular Flex Layout, Material Icons, Ng2 Search Filter, Transloco Service and Angular Material components: Toolbar, Dialog, Tabs, Table, Expansion Panel, Menu, Selection List, Sidenav, Clipboard, Slide toggle, Card, Input, Progress spinner, Icon, Button. There is the …

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published