Angular 5 Article Series

Ahmed Abdelsalam
Tue May 1, 2018 · 2 min read
Angular 

Being a Front-End (Angular5+) Developer gives you the power to build amazing things for the web. But sometimes you need to do some tricks that you might find hard to build or make. Building things using Angular is prone to a lot of errors and problems

So I created this series of articles to build a real-world app with some amazing features that we’re going to build. Together.

Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)

Table of Contents:

  1. Creating Angular 5 application with Angular-cli
  2. Using Angular Material with Angular 5
  3. Deploy Angular 5 Application to Netlify
  4. Build PWA with Angular 5 App
  5. Build Dynamic themes for Angular Material
  6. Using FlexLayout with Angular 5
  7. Building News App using Angular 5

Final Demo here

Let’s see what we’ll build at every part.

Building Angular5 App

At the beginning build just a simple Angular 5 app using Angular cli. We’ll start very simple then add anything we want.

Using Angular Material with Angular5

Angular Material is the best choice for Angular, so you have to add it to your app to give it some appearance. I love the material design by the way.

Deploy our application to Netlify

We’ll deploy our application to Netlify to make it ready for our next step.

Build PWA Angular 5 app

With the same app we built at the previous step we’ll turn it into a ( Progressive Web App). PWA is a trend in the web these days. Building website that can work offline and other options.

Build Dynamic theming for Angular Material

Building dynamic themes for our app would be amazing, toy can let your users choose their favorite theme. And you can create your own themes.

Using FlexLayout to make our app responsive

We’ll use FlexLayout to turn our app into responsive app as Angular Material does not have a grid-system.

Build News Application using Angular 5

We’ll use Angular Service to fetch data from newsapi to show some news on our application and control them.

That’s all, If you want me to update this series with any other article you can comment it below!

Some useful Links: