My Personal Blog, I post about tech, personal, and cool stuff.

Using 'Angular Material' with Angular 5

<span class="first-letter">T</span>his is the second part in a seven-part [series](https://blog.wb.gy/angular-5-article-series/) about the JavaScript framework, `Angular 5`.
In this part, we'll go over adding `Angular Material` to our application.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know `Angular Material` and how to use it with `Angular 5`.

## Article Series:

1.  [Creating Angular 5 application with Angular-cli](https://blog.wb.gy/build-angular-5-app-with-angular-cli/)
2.  Using `Angular Material` with `Angular 5` (<span class="highlighted">You are here</span>)
3.  [Deploy Angular 5 Application to Netlify](https://blog.wb.gy/deploy-angular-5-application-to-netlify/)
4.  [Build `PWA` with Angular 5 App](https://blog.wb.gy/build-pwa-angular-5-application/)
5.  [Build Dynamic themes for `Angular Material`](https://blog.wb.gy/build-dynamic-themes-for-angular-material/)
6.  [Using `FlexLayout` with Angular 5](https://blog.wb.gy/angular-5-material-and-flex-layout/)
7.  [Building `News` App using `Angular 5`](https://blog.wb.gy/building-news-app-using-angular-5/)

Final [Demo here](https://angular-5-article-series.netlify.com/)

---

## Installing Angular Material

I'll assume that you checked the previous article in this [series](https://blog.wb.gy/angular-5-article-series/) and now you have an angular application with routes and sass styling, so let's get into how to install `Angular Material`.
In your terminal `cd` to your application directory and run this line:

```bash
npm install --save @angular/material @angular/cdk
```

Some of the material components use the Angular animation library, which is also installed separately

```bash
npm install --save @angular/animations
```

Now we have to integrate these animations
Open `src/app/app.module.ts`
Now import the animations and add it to `imports` in `@NgModule`.
Here's the code

```javascript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { AppRoutingModule } from "./app-routing.module";

import { ServiceWorkerModule } from "@angular/service-worker";
import { AppComponent } from "./app.component";

import { environment } from "../environments/environment";
import { PostsComponent } from "./posts/posts.component";

@NgModule({
  declarations: [AppComponent, PostsComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    ServiceWorkerModule.register("/ngsw-worker.js", {
      enabled: environment.production
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

## Creating Material Module

Now, we have to import the material components we want to use. and import them into the imports array of ngModule.
But the material components are too much, so I prefer creating a custom module specifically for our material component imports. Name it `material.module.ts`
Create a new file `src/app/material.app.ts` and paste the following code.

```javascript
import { NgModule } from "@angular/core";

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatGridListModule,
  MatSidenavModule,
  MatSortModule,
  MatTableModule,
  MatInputModule,
  MatSelectModule,
  MatSliderModule,
  MatRadioModule,
  MatListModule,
  MatProgressSpinnerModule,
  MatChipsModule,
  MatTooltipModule,
  MatExpansionModule,
  MatDialogModule,
  MatAutocompleteModule,
  MatTabsModule,
  MatSlideToggleModule
} from "@angular/material";

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatGridListModule,
    MatSidenavModule,
    MatSortModule,
    MatTableModule,
    MatInputModule,
    MatSelectModule,
    MatSliderModule,
    MatRadioModule,
    MatListModule,
    MatProgressSpinnerModule,
    MatChipsModule,
    MatTooltipModule,
    MatExpansionModule,
    MatDialogModule,
    MatAutocompleteModule,
    MatTabsModule,
    MatSlideToggleModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatGridListModule,
    MatSidenavModule,
    MatSortModule,
    MatTableModule,
    MatInputModule,
    MatSelectModule,
    MatSliderModule,
    MatRadioModule,
    MatListModule,
    MatProgressSpinnerModule,
    MatChipsModule,
    MatTooltipModule,
    MatExpansionModule,
    MatDialogModule,
    MatAutocompleteModule,
    MatTabsModule,
    MatSlideToggleModule
  ]
})
export class MaterialModule {}
```

Here, we only including most of the components in `Angular Material` I know that it's not the best practice to include all these components. But I prefer to include most of material components so I don't have to add them myself later. I know that I'm too lazy 😎.
Next, we have to import `material.module.ts` into our `app.module.ts`.

```javascript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MaterialModule } from "./material.module";

import { AppRoutingModule } from "./app-routing.module";

import { ServiceWorkerModule } from "@angular/service-worker";
import { AppComponent } from "./app.component";

import { environment } from "../environments/environment";
import { PostsComponent } from "./posts/posts.component";

@NgModule({
  declarations: [AppComponent, PostsComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule,
    ServiceWorkerModule.register("/ngsw-worker.js", {
      enabled: environment.production
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

## Theming

Next, we want to add a theme to our material.
Open `/src/styles.scss` and paste the following line

```css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
```

Now, we need to include `*HammerJS` for gesture support.
In your terminal, type:

```bash
npm install --save hammerjs
```

We have to include it, open `/src/main.ts`

```javascript
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import "hammerjs";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));
```

## Material Design Icons

One last thing to go, we have to add the <span class="highlighted">Material Design Icons</span>
in `/src/index.html` add the following line before `</head>`

```html
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>
```

## Simple Material Example

Let's edit our previous html code, open `/src/app/app.component.html` and edit it like the following code.

```html
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>Wb.Gy</span> <span class="example-spacer"></span>
    <a routerLink="/" mat-button>Home</a>
    <a routerLink="/posts" mat-button>Posts</a>
  </mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>
```

I just added some material components like (toolbar, button etc..)
You can check the documentation [here](https://material.angular.io/)

We have to add some css to make our page look better,
open `/src/styles.scss` and add the following code:

```css
body {
  margin: 0;
}
```

also `/src/app/app.component.scss`

```css
.example-link {
  padding: 0 14px;
}
.example-spacer {
  flex: 1 1 auto;
}
```

Check your page now, it should look like this:
![angular-material](/images/download--1-.png)

Let's make it more complex and create a component for our home page to display some material components.

But this time I have to mention something as I know you might face a problem while using it.

Now we have <span class="highlighted">2 modules</span> in our application ( `app.module.ts` and `material.module.ts`), so if you want to create new component or service you have to mention where do you want to add your new component.
Let's see a practical example.
in your terminal run( make sure you're in your root directory first):

```bash
ng g component home --module app.module.ts
```

This will create new component named `home` and will add it to `app.module.ts`.

First let's add new route for our `home component`.
Open `/src/app/app-routing.module.ts`. You have to import `home component` and add it to routes.

```javascript
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { PostsComponent } from "./posts/posts.component";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "posts",
    component: PostsComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
```

Now you should see <span class="highlighted">home works!</span> in your browser.

Next I want to add some cool material components.
Open `/src/app/home/home.component.html`

```html
<div class="container">
  
  <div class="mycard">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img
        mat-card-image
        src="https://material.angular.io/assets/img/examples/shiba2.jpg"
        alt="Photo of a Shiba Inu"
      />
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz
          breeds of dog from Japan. A small, agile dog that copes very well with
          mountainous terrain, the Shiba Inu was originally bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button> <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>
```

I removed the repeated code for brevity you can add it yourself.
and to create the grid I added the following code in `/src/app/home/home.component.scss`

```css
.container {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .container > .mycard {
    flex-basis: calc(100% / 4);
  }

  .mycard {
    padding: 10px;
  }
  .example-header-image {
    background-image: url("../../assets/shiba1.jpg");
    background-size: cover;
  }

  @supports (display: grid) {
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .container > .mycard {
      flex: 1;
    }
  }
}
```

Here's the result

![angular-series-material](/images/download--2-.png#full)

Next: [Deploy Angular 5 Application to Netlify](https://blog.wb.gy/deploy-angular-5-application-to-netlify/)

Angular 5 Article Series


<span class="first-letter">B</span>eing 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](https://blog.wb.gy/angular-5-article-series/) of articles to build a real-world app with some amazing features that we're going to build. Together.

<span class="highlighted">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 :)</span>

> ## Table of Contents:
>
> 1.  [Creating Angular 5 application with Angular-cli](https://blog.wb.gy/build-angular-5-app-with-angular-cli/)
> 2.  [Using `Angular Material` with `Angular 5`](https://blog.wb.gy/angular-5-angular-material/)
> 3.  [Deploy Angular 5 Application to Netlify](https://blog.wb.gy/deploy-angular-5-application-to-netlify/)
> 4.  [Build `PWA` with Angular 5 App](https://blog.wb.gy/build-pwa-angular-5-application/)
> 5.  [Build Dynamic themes for `Angular Material`](https://blog.wb.gy/build-dynamic-themes-for-angular-material/)
> 6.  [Using `FlexLayout` with Angular 5](https://blog.wb.gy/angular-5-material-and-flex-layout/)
> 7.  [Building `News` App using `Angular 5`](https://blog.wb.gy/building-news-app-using-angular-5/)

**Final [Demo here](https://angular-5-article-series.netlify.com/)**

---

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!


Using FlexLayout with Angular 5

<span class="first-letter">T</span>his is the sixth part in a seven-part [series](https://blog.wb.gy/angular-5-article-series/) about the JavaScript framework, `Angular 5`.
In this part, we'll go over adding `Flex-Layout` to our application to make it responsive.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know `Flext-Layout` and how to use it with `Angular 5 Material`.

> ## Article Series:
>
> 1.  [Creating Angular 5 application with Angular-cli](https://blog.wb.gy/build-angular-5-app-with-angular-cli/)
> 2.  [Using `Angular Material` with `Angular 5`](https://blog.wb.gy/angular-5-angular-material/)
> 3.  [Deploy Angular 5 Application to Netlify](https://blog.wb.gy/deploy-angular-5-application-to-netlify/)
> 4.  [Build `PWA` with Angular 5 App](https://blog.wb.gy/build-pwa-angular-5-application/)
> 5.  [Build Dynamic themes for `Angular Material`](https://blog.wb.gy/build-dynamic-themes-for-angular-material/)
> 6.  Using `FlexLayout` with Angular 5 (**You are here**)
> 7.  [Building `News` App using `Angular 5`](https://blog.wb.gy/building-news-app-using-angular-5/)

> Final [Demo here](https://angular-5-article-series.netlify.com/)

---

If you want to add a touch styling to your `Angular` application you have to use one of the `CSS Libraries`, but Angular Material is specially designed for `Angular`. But it does not have a `grid system`, so we need to add one or build it ourself.

In the `Angular Material` article I created a simple grid using flex, but you can use `Flex-Layout` for more complex uses.
Some people won't like `Flex-Layout` and would prefer using `css flex`. It's up to you.
But in this article I'll talk about how to use `Flex-Layout` with `Angular Material` and we'll turn our previous posts into grid using `Flex-Layout`.

In our application root run:

```bash
npm install @angular/flex-layout@latest --save
```

Now we have to import `FlexLayoutModule` into our `app.module.ts`
Here's my `app.module.ts`

```javascript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MaterialModule } from "./material.module";
import { FlexLayoutModule } from "@angular/flex-layout";

import { AppRoutingModule } from "./app-routing.module";

import { ServiceWorkerModule } from "@angular/service-worker";
import { AppComponent } from "./app.component";

import { environment } from "../environments/environment";
import { PostsComponent } from "./posts/posts.component";
import { HomeComponent } from "./home/home.component";
import { NavbarComponent } from "./navbar/navbar.component";
import { ThemeService } from "./services/theme.service";

@NgModule({
  declarations: [AppComponent, PostsComponent, HomeComponent, NavbarComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    AppRoutingModule,
    ServiceWorkerModule.register("/ngsw-worker.js", {
      enabled: environment.production
    })
  ],
  providers: [ThemeService],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

Let's use `Flex-Layout` with our home posts.
I'll use the next code to create our grid

```html
<div
  class="container"
  fxLayout="wrap row"
  fxLayout.xs="column"
  fxLayoutGap="0.5%"
  fxLayoutAlign="center"
>
  <div fxFlex="20%"></div>
</div>
```

To create 4 posts in one row I'll make `fxFlex`= 20%. and put your post code instead of the comment, and repeat this part as you want.
Open `src/app/home/home.component.html`

```html
<div
  class="container"
  fxLayout="wrap row"
  fxLayout.xs="column"
  fxLayoutGap="1%"
  fxLayoutAlign="center"
>
  <div fxFlex="20%">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img
        mat-card-image
        src="/assets/shiba2.jpeg"
        alt="Photo of a Shiba Inu"
      />
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz
          breeds of dog from Japan. A small, agile dog that copes very well with
          mountainous terrain, the Shiba Inu was originally bred for hunting.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button> <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>
```

Check the flex-layout [documentation](https://github.com/angular/flex-layout/wiki/API-Documentation#containers) for more complex uses.

Now you can remove our `css` code in `home.component.scss`.

Next: [Building `News` App using `Angular 5`](https://blog.wb.gy/building-news-app-using-angular-5/)

Angular 6 Article Series


<span class="first-letter">I</span> published article series days ago about angular 5 and I covered some interesting tutorials like using  `Angular Material`, `FlexLayout`, building `PWA`, `dynamic themes` and `deploying` our angular app to Netlify You can check the series here.

But for this series:
Angular Team just announced `Angular 6` and the new amazing features, so I can't wait to build amazing things with `Angular 6`.

In the previous series, I made it "Seven-Part" series with 7 articles for every part.
But  I want to make this series n-part Series. I don't want to stop this series. I want to add more articles later, so If you're interested in Angular. You can check this series later for more updates.


The reason why I created this series of articles is that it's the series I wish I had when I was first learning `Angular`. I know that there's a lot of tutorials out there that explain every part of my series alone. But the problem is gathering all these tutorials together sometimes gives conflicts and errors, so I wanted to save my own time and your time also to avoid all these problems.
Each part in this series is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know how to collect things together and understand what the framework has to offer.

## Article Series

1. Angular 6 Article Series (**You're here**)
2. [Building Angular 6 Application](https://blog.wb.gy/building-angular-6-application/)
3. [Using Angular Material with Angular 6](https://blog.wb.gy/using-angular-material-with-angular-6/)
4. [Deploy Angular 6 to Netlify](https://blog.wb.gy/deploy-angular-6-application-to-netlify/)
5. Creating PWA with Angular 6 (**Soon**)
6. Dynamic themes in Angular 6 Material (**Soon**)
7. Angular 6 with GSAP (**Soon**)
8. Angular 6 with Firebase (**Soon**)


## New Features of Angular 6
Angular 6 was just released with new amazing features and a lot of changes.

### ng update
Running `ng update <package>` the CLI will analyze you `package.json` and update your packages. Updating an Angular application is just a command away.


### ng add
It's the same as `ng update` but it allows you to add and configure libraries.
For exampel if you want to install Angular Material you have to run:
```bash
ng add @angular/material
```

### Other Changes
`.angular-cli.json` now renamed to `angular.json` with a new structure
You can check the other changes here in the [official announcement](https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4)


## Upgrading
Angular Team created a great tool to upgrade you old angular app
[Angular Update Guide](https://update.angular.io). use it to migrate your angular apps.
Once you choose your current app version and the complexity of your app. It'll show you the steps you need to upgrade your app.
I won't repeat their steps just follow them and watch the step that named `Before updating` as it must be made correctly.
That's all for now.

Next: [Building Angular 6 Application](https://blog.wb.gy/building-angular-6-application/)

Creating Angular 5 application with Angular-cli


<span class="first-letter">T</span>he reason why I created this [series](https://blog.wb.gy/angular-5-article-series/) of articles is that it's the series I wish I had when I was first learning `Angular`. I faced many problems while building `Angular` apps and really I wish I had every part of this series before, that would have saved a lot of time wasted on solving silly problems.

This is the first part in a seven-part series about the JavaScript framework, `Angular 5`.
This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know `Angular 5+` and understand what the framework has to offer.

> ## Article Series:
>
> 1.  Creating Angular 5 application with Angular-cli (<span class="highlighted">You are here</span>)
> 2.  [Using `Angular Material` with `Angular 5`](https://blog.wb.gy/angular-5-angular-material/)
> 3.  [Deploy Angular 5 Application to Netlify](https://blog.wb.gy/deploy-angular-5-application-to-netlify/)
> 4.  [Build `PWA` with Angular 5 App](https://blog.wb.gy/build-pwa-angular-5-application/)
> 5.  [Build Dynamic themes for `Angular Material`](https://blog.wb.gy/build-dynamic-themes-for-angular-material/)
> 6.  [Using `FlexLayout` with Angular 5](https://blog.wb.gy/angular-5-material-and-flex-layout/)
> 7.  [Building `News` App using `Angular 5`](https://blog.wb.gy/building-news-app-using-angular-5/)

> Final [Demo here](https://angular-5-article-series.netlify.com/)

---

## Generating Angular 5 Application

I'll assume that you know what `npm` is.
First we need to install a command-line tool named `angular-cli`. You can do that using the following command in your terminal.

```bash
npm install -g @angular/cli
```

If you're on **`Linux`** like me and you're using `non-root` user. You might need to add `sudo` before the command. It'll be like

```bash
sudo npm install -g @angular/cli
```

Now, we installed `angular-cli`, so we can use it to generate our application.

From your terminal change your directory where you want to build your app, I'll name our app `wb-gy` as my own domain wb.gy :3
`Before running the next line read the quote after it first.`

```bash
ng new wb-gy
```

> - If you prefer using `sass` instead of `css`
> - If you know what `routes` are and don't want to build them yourself
> - If You want to complete this article series and build `PWA` at the end
> - If you want to `skip test` files and don't want them in your app
>
> The next line will generate your application with `sass` styling instead of `css` and with `routing` and `service-worker` (for our PWA) and also it'll skip generating `test` files

BTW, I'm going to use this one.

```bash
ng new wb-gy --routing --style=scss --skip-tests --service-worker
```

You should see this message after many lines of installing steps.

<span class="highlighted">Project 'wb-gy' successfully created.</span>

Let's explain every part:
I mentioned before the use of every part but I'll show what each argument does

- `--routing` : It'll create some files for you to build your routes in the app, so you don't have to build them yourself. What you have to do next is only adding your routes.
- `--stlye=scss` : It tells our cli to change styling from `css` to `sass`. In case you forgot this argument you'll have to change every file's extension in the file name itself and for every code-line that has it's name.
- `--skip-tests` : it doesn't need any explain it will skip creating test files.
- `--service-worker` : This part will save us time if you're looking into turning your `Angular` application into `PWA`.

I know that you might be afraid of using the previous line with all these options. But really If I were you I'd use most of them. There might be some people would argue with me about the `test` part. I know, but I prefer not using them in the beginning.

Now change the directory to our application

```bash
cd wb-gy
```

and let's run our server

```bash
ng serve
```

and open http://localhost:4200 in your browser to see your app.
But, If you want to run the server and open the application in the browser immediately run:

```bash
ng serve --open
```

You should see the next page in your browser

![angular5 preview](/images/ng5-1-1.png)

Open your application in any `text editor`. BTW I'm using `VSCODE` and I'm a big fan of it, If you're looking for learning how to generate components and services in your application. You can check the documentation of [`angualr-cli`](https://github.com/angular/angular-cli/wiki).

But I can give you some quick explanation,
If you want to generate new components you can run

```bash
ng g component posts
```

This will generate a component named <span class="highlighted">posts</span>
and you'll find that a new directory named posts is created in your application.
It contains 3 files ( `posts.component.html` , `posts.component.scss` , `posts.component.ts` ) 

![angular-new-component](/images/angular-new-component.png)

We'll use it later to display some posts using any `api`.

## Routes

Now we can add this component to our routes
Open `app-routing.module.ts`
You'll find it like

```javascript
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
```

We have to add some code in this file:
First we have to add the component itself, so I'll import the `posts component`.
Second we have to add this component to routes. and choose the path.
The code must be like this

```javascript
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { PostsComponent } from "./posts/posts.component";

const routes: Routes = [
  {
    path: "posts",
    component: PostsComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
```

Now how to make our routes work!

Open `src/app/app.component.html` and remove all the code and add this simple code

```html
<ul>
  <li><a routerLink="/">Home</a> <a routerLink="/posts">Posts</a></li>
</ul>
<router-outlet></router-outlet>
```

Let's explain every part of our code:
First in the `a` tag there is an attribute `routerLink` this attr is used instead of `href` in angular routes, it tells our application that this url is a route.
Second the html tag `<router-outlet></router-outlet>` it displays the view of the component.

Now check the changes in your browser, you'll find list, try to click any link to check if our routes work or not!

I know that it's very simple code but I just want you to understand the concept behind it and we'll make it more complex later in the following articles of the series 😉.

## Angular Directives

I won't explain what directives are, I'll leave this part for you to check the documentation.
We can test some directives like ng-for by creating an array of items and display them on our view.

## Display list of items

In the `posts` component:
Open `src/app/posts/posts.component.ts`. We'll add any array of posts, here's the result:

```javascript
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.scss"]
})
export class PostsComponent implements OnInit {
  posts = [
    {
      title: "Hello world",
      details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
    },
    {
      title: "Second post",
      details:
        "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    }
  ];
  constructor() {}

  ngOnInit() {}
}
```

to display these posts, open `src/posts/posts.component.html` and replace the code in it with

```html
<div *ngFor="let post of posts">
  <h2>{{post.title}}</h2>
  <p>{{post.details}}</p>
  <hr />
</div>
```

Let's explain the code: I just added `ngFor` directive, which acts like a `for loop`.
Save changes and check your browser and navigate to `posts` route to see the result.

You can build more components and edit them as you wish for more practice but I'll stop here, so our application would be simple and easy to understand.

---

In the next article we'll take our application to more advanced level and use `angular material` to give our application a touch of styling.
Visit it now [Using `Angular Material` with `Angular5]()


Build Dynamic Themes for Angular Material


<span class="first-letter">T</span>his is the fifth part in a seven-part [series](https://blog.wb.gy/angular-5-article-series/) about the JavaScript framework, `Angular 5`.
In this part, we'll go over building `Dynamic Themes` for our application.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know `Dynamic Themes` and how to use it with `Angular Material 5`.

> ## Article Series:
>
> 1.  [Creating Angular 5 application with Angular-cli](https://blog.wb.gy/build-angular-5-app-with-angular-cli/)
> 2.  [Using `Angular Material` with `Angular 5`](https://blog.wb.gy/angular-5-angular-material/)
> 3.  [Deploy Angular 5 Application to Netlify](https://blog.wb.gy/deploy-angular-5-application-to-netlify/)
> 4.  [Build `PWA` with Angular 5 App](https://blog.wb.gy/build-pwa-angular-5-application/)
> 5.  Build Dynamic themes for `Angular Material` (**You are here**)
> 6.  [Using `FlexLayout` with Angular 5](https://blog.wb.gy/angular-5-material-and-flex-layout/)
> 7.  [Building `News` App using `Angular 5`](https://blog.wb.gy/building-news-app-using-angular-5/)

> Final [Demo here](https://angular-5-article-series.netlify.com/)

---

This article is based on the four previous articles so you have to read them first.

We'll turn our application to have dynamic themes, actually 2 themes ( light and dark one). Besides changing the theme dynamically, without having to refresh the page.

In the first article I used the argument `--style scss` to select `SCSS` as our default styling extension.
Now, create a file `src/assets/styles/material-theme.scss` with the following code:

```css
@import "~@angular/material/theming";

@include mat-core();

$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
```

Now, we have to import this `material-theme.scss` in `styles.scss`
If you were following me and did what I did in the previous articles your `styles.scss` file should have `import` for `Angular material theme`. But now we'll replace it with our new `material theme`
It should look like:

```css
@import "./src/styles/material-theme";
body {
  margin: 0;
}
```

Next, I want to put the controller of the dynamic theme in the `navbar`, so I'll create a component for our `navbar`. and a service to control the theme.

## Navbar Component

In your application root run:

```
ng g component navbar --module app.module.ts
```

and don't forget the argument `--module app.module.ts` I mentioned why in the previous articles.
We need to do several things

1. Move the navbar code from `app.component.html` to `src/app/navbar/navbar.component.html`
2. Move the css styling of the `navbar` from `app.component.scss` to `src/app/navbar/navbar.component.scss`.
3. Put the tag `<app-navbar></app-navbar>` in `app.component.html`
4. Add a `material slide toggle` to our navbar component

Here's the code of each file

`src/app/navbar/navbar.component.html`

```html
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>Wb.Gy</span> <span class="example-spacer"></span>
    <a class="example-link" routerLink="/" mat-button>Home</a>
    <a class="example-link" routerLink="/posts" mat-button>Posts</a>
    <mat-slide-toggle>Dark theme</mat-slide-toggle>
  </mat-toolbar-row>
</mat-toolbar>
```

---

`src/app/navbar/navbar.component.scss`

```css
.example-link {
  padding: 0 14px;
}
.example-spacer {
  flex: 1 1 auto;
}
```

---

`app.component.html`

```html
<app-navbar></app-navbar> <router-outlet></router-outlet>
```

---

and `app.component.scss` should be empty now.

Next we need to add our dark theme to `material-theme.scss`
Now it should look like:

```css
@import "~@angular/material/theming";

@include mat-core();

$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

// Our dark theme
.dark-theme {
  color: $light-primary-text;
  $dark-primary: mat-palette($mat-yellow);
  $dark-accent: mat-palette($mat-amber, A400, A100, A700);
  $dark-warn: mat-palette($mat-red);
  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}
```

Let's check if our theme works or not
Open `app.component.html`, we'll add two `divs` and put all the code into them:

```html
<div class="dark-theme">
  <div class="mat-app-background">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
  </div>
</div>
```

Check your page now you should see the dark theme works!
![dark-theme](/images/dark-theme.png)

Now let's create the `theme service`

```bash
ng g service services/theme --module app.module.ts
```

this will create new folder under `src/app` and new service named `theme`

To make our `theme service` publish changes to our components we have to use `rxjs`.
Let's edit our service:
`src/app/services/theme.service.ts`

```javascript
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ThemeService {
  private _themeDark: Subject<boolean> = new Subject<boolean>();
  isThemeDark = this._themeDark.asObservable();

  setDarkTheme(isThemeDark: boolean) {
    this._themeDark.next(isThemeDark);
  }
}
```

Now let's import our `theme service` to our `navbar`
`src/app/navbar/navbar.component.ts`

```javascript
import { Component, OnInit } from '@angular/core';
import { ThemeService } from '../services/theme.service';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  isThemeDark: Observable<boolean>;

  constructor(private themeService: ThemeService) { }

  ngOnInit() {
    this.isThemeDark = this.themeService.isThemeDark;
  }

  toggleDarkTheme(checked: boolean) {
    this.themeService.setDarkTheme(checked);
  }
}
```

and In `navbar.component.html`

```html
<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>Wb.Gy</span> <span class="example-spacer"></span>
    <a class="example-link" routerLink="/" mat-button>Home</a>
    <a class="example-link" routerLink="/posts" mat-button>Posts</a>
    <mat-slide-toggle
      [checked]="isThemeDark | async"
      (change)="toggleDarkTheme($event.checked)"
      >Dark theme</mat-slide-toggle
    >
  </mat-toolbar-row>
</mat-toolbar>
```

The last thing is to add our `theme service` to our `app.component.ts`

```javascript
import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs/Observable";

import { ThemeService } from "./services/theme.service";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  isThemeDark: Observable<boolean>;

  constructor(private themeService: ThemeService) {}

  ngOnInit() {
    this.isThemeDark = this.themeService.isThemeDark;
  }
}
```

One last thing in our `app.component.html`

```html
<div [ngClass]="{'dark-theme': isThemeDark | async}">
  <div class="mat-app-background">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
  </div>
</div>
```

![dynamic-angular-theme](/images/dynamic-angular-theme.gif)

Next: [Using `FlexLayout` with Angular 5](https://blog.wb.gy/angular-5-material-and-flex-layout/)


Build PWA Angular 5 Application


<span class="first-lett">T</span>his is the fourth part in a seven-part [series](https://blog.wb.gy/angular-5-article-series/) about the JavaScript framework, `Angular 5`.
In this part, we'll go over turning our application into a `PWA` (Progressive Web Application).

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know `Progrissive Web Applications` and how to turn your `Angular 5` application into it.
I'm going to turn the application We created in the 3 previous articles, so you have to check them first!
No, you must check specifically the last one!

> ## Article Series:
>
> 1.  [Creating Angular 5 application with Angular-cli](https://blog.wb.gy/build-angular-5-app-with-angular-cli/)
> 2.  [Using `Angular Material` with `Angular 5`](https://blog.wb.gy/angular-5-angular-material/)
> 3.  [Deploy Angular 5 Application to Netlify](https://blog.wb.gy/deploy-angular-5-application-to-netlify/)
> 4.  Build `PWA` Angular 5 app (**You are here**)
> 5.  [Build Dynamic themes for `Angular Material`](https://blog.wb.gy/build-dynamic-themes-for-angular-material/)
> 6.  [Using `FlexLayout` with Angular 5](https://blog.wb.gy/angular-5-material-and-flex-layout/)
> 7.  [Building `News` App using `Angular 5`](https://blog.wb.gy/building-news-app-using-angular-5/)

**Final [Demo here](https://angular-5-article-series.netlify.com/)**

---

In the last article we deployed our application to `Netlify`.
I won't explain what `PWA` is you have to google this.

## Lighthouse tool

But to get the score of any `PWA` you can use tool named [LightHouse](https://developers.google.com/web/tools/lighthouse/)

I deployed our app in the last article to use it in this step, so I can test the score of the hosted application
Let's check our current page's score
![Screenshot_2018-04-25_20-02-18](/images/Screenshot_2018-04-25_20-02-18.png)

Our `PWA` score in this screen-shot is <span class="highlighted">18</span>

## Adding `<noscript>` Tag

Open `/src/index.html` add the `<noscript>` tag like

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WbGy</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>

  <body>
    <app-root></app-root>
    <noscript>
      <h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
        Sorry, but app is not available without javascript
      </h3>
    </noscript>
  </body>
</html>
```

This tag will tell the user that he must have `JavaScript` to run our page.
Deploy our edit to `Netlify` by just deploying it to `Github`

```
git add -A
git commit -m "adding <noscript> tag"
git push
```

As `Netlify` uses Continuous Deployment your commit will be published automatically.

Let's check the score now!

![pwa-score-2](/images/pwa-score-2.png)

Now our `PWA` score is <span class="highlighted">55</span>

55 points is a good score but I want to make it a perfect score (100)

If you remember in the first article We added some arguments while creating our `Angular` application, one of these arguments was `--service-worker`. If you didn't use it you have to. This argument will save you a lot of time. you won't have to add the service-worker yourself and edit many files. It'll do everything for you.

All what you have to do now is just creating `manifest_app.json` file. you can name it anything and add the following code:

`/src/manifest_app.json`

```json
{
  "name": "Wb-Gy Angular5 PWA",
  "short_name": "Wb-Gy",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/app_home_icon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "background_color": "#c4473a",
  "theme_color": "#c4473a"
}
```

Change `name`, `short_name`, `background_color`, `theme_color` and the icons path to you favorite choices.
Next want to automate moving `manifest_app.json` to our `dist` folder while deploying, so We'll add it to our `.angular-cli.json`
Open `.angular-cli.json` in your application root, under `apps` then `assets` you'll need to add `manifest_app.json`, the code should look like:

```json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "wb-gy"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "manifest_app.json"
      ],
```

This is not the whole file I removed the code after our edit for brevity.
Now, Open `/src/index.html` and add the following line before `</head>`

```html
<link rel="manifest" href="manifest_app.json" />
```

If you tried to check the `Lighthouse` score now It'll be between 90 to 95.
To make it perfect we have to add Theme color to our meta tags.
add the following line to `/src/index.html` after the previous line

```html
<meta name="theme-color" content="#00FF00" />
```

Now your `/src/index.html` should look like

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WbGy</title>
    <base href="/" />

    <link rel="manifest" href="manifest_app.json" />
    <meta name="theme-color" content="#00FF00" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
  </head>
  <body>
    <app-root></app-root>
    <noscript>
      <h3 style="color: #673ab7; font-family: Helvetica; margin: 2rem;">
        Sorry, but app is not available without javascript
      </h3>
    </noscript>
  </body>
</html>
```

Now you should get 100 points, I had 91 and that's why my application `Does not redirect HTTP traffic to HTTPS`. If I were using a custom domain, I'd redirect all `HTTP` to `HTTPS` and get 100 points.

There are more details about `PWA` that need more articles to talk about. But for now I'll stop here to start something cool in the next article.

Next: [Build Dynamic themes for `Angular Material`](https://blog.wb.gy/build-dynamic-themes-for-angular-material/)


Building Angular 6 Application


This is the second part in an n-part [series](https://blog.wb.gy/angular-6-article-series/) about the JavaScript framework, `Angular 6`.
In this part, we'll go over build new Angular 6 Applicatin.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using `Angular CLI` and how to build your `Angular 6` application using it.

---

## Article Series

1. [Angular 6 Article Series](https://blog.wb.gy/angular-6-article-series/)
2. Building Angular 6 Application (**You're here**)
3. [Using Angular Material with Angular 6](https://blog.wb.gy/using-angular-material-with-angular-6/)
4. [Deploy Angular 6 to Netlify](https://blog.wb.gy/deploy-angular-6-application-to-netlify/)
5. Creating PWA with Angular 6 (**Soon**)
6. Dynamic themes in Angular 6 Material (**Soon**)
7. Angular 6 with GSAP (**Soon**)
8. Angular 6 with Firebase (**Soon**)

---

## Upgrading Angular-CLI

I assume that you have `nodejs` and `npm` installed. If not you have to install them first. Just Google it.

First we need to upgrade our CLI or install it for the first time. The next command will install it or upgrade your current version.

```bash
npm i -g @angular/cli
```

## Creating new Angular App

Now We want to use CLI to create new Angular 6 Application. Change your directory where you want to create the new app, then run

```bash
ng new angular6-series --routing --style=scss --skip-tests --service-worker
```

Where `angular6-series` is our application's name. But we have some arguments here.
Let's Explain each argument of our command

- `--routing`: It builds our routes so I won't have to build them myself
- `--style=scss`: It changes our styling extension from `css` to `scss` as I prefer sass.
- `--skip-tests`: to skip creating tests files. But You may need them in this case you have to remove this argument.
- `--service-worker`: In this article series we'll turn our application into `PWA` and this argument is important for this step.

But If you want to build your application normally without all these options, just run:

```bash
ng new angular6-series
```

After creating our new app. Move the app directory and run the server.

```bash
cd angular6-series
ng serve --open
```

`ng serve` will run the server of our app and the argument `--open` will open it in the default browser.
Now you should see this in your browser
![angular6app](/images/angular6app.png)

## Creating Components

Let's create new component named `home` and make it our home page with some content.

```bash
ng g c home
```

This will create the component files. But you'll see no change in your app. Let's modify our `src/app/app.component.html`
Remove all the code and leave the last tag. It should look like

```html
<router-outlet></router-outlet>
```

Now open `/src/app/app-routing.module.ts`
I want to add the new component as the home page.
We need to import the `HomeComponent` and add the route to `routes` array.

```javascript
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
```

Now you should see your home component content in your home page.
Let's edit our `HomeComponent` open `/src/app/home/home.component.html`

```html
<h1>Welcome to our Angular 6 Application</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda repudiandae
  repellat perferendis corrupti, harum provident ipsam illo laudantium magni
  deleniti corporis modi error aperiam iure molestiae eligendi quo voluptatem
  minus?
</p>
```

Let's create another component named `posts`

```bash
ng g c posts
```

First we need to add new route for our `posts component`
open `/src/app/app-routing.module.ts` and do like we did to the `home component`
our file should look like

```javascript
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { PostsComponent } from "./posts/posts.component";

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "posts",
    component: PostsComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
```

Now open `/src/app/posts/posts.component.html`
and add some html

```html
<div class="post">
  <h1>Post title here</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima
    soluta harum fugit neque accusamus non fuga blanditiis quam enim nemo, quia
    dolores iure explicabo officia, cumque expedita quis sint.
  </p>
</div>
<div class="post">
  <h1>Post title here</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima
    soluta harum fugit neque accusamus non fuga blanditiis quam enim nemo, quia
    dolores iure explicabo officia, cumque expedita quis sint.
  </p>
</div>
```

You can see our new component in the browser by visiting: http://localhost:4200/posts

That's all for now.

Next: Using Angular Material with Angular 6 (**soon**)


Building News App using Angular 5


<span class="first-letter">T</span>his is the seventh part in a seven-part [series](https://blog.wb.gy/angular-5-article-series/) about the JavaScript framework, `Angular 5`.
In this part, we'll go over turning our application into a `News Application`.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using `Angular Services` and how to turn your `Angular 5` application into a `News app`.

> ## Article Series:
>
> 1.  [Creating Angular 5 application with Angular-cli](https://blog.wb.gy/build-angular-5-app-with-angular-cli/)
> 2.  [Using `Angular Material` with `Angular 5`](https://blog.wb.gy/angular-5-angular-material/)
> 3.  [Deploy Angular 5 Application to Netlify](https://blog.wb.gy/deploy-angular-5-application-to-netlify/)
> 4.  [Build `PWA` with Angular 5 App](https://blog.wb.gy/build-pwa-angular-5-application/)
> 5.  [Build Dynamic themes for `Angular Material`](https://blog.wb.gy/build-dynamic-themes-for-angular-material/)
> 6.  [Using `FlexLayout` with Angular 5](https://blog.wb.gy/angular-5-material-and-flex-layout/)
> 7.  Building `News` App using `Angular 5` (**You are here**)

**Final [Demo here](https://angular-5-article-series.netlify.com/)**

---

I'm going to turn the application We created in the 6 previous articles, so you have to check them first!
No, you must check all of them!

Our `News app` will be:

- a Progressive web application (**`PWA`**)
- With **`Angular Material`** Design
- with a grid-system using **`Flex-Layout`**
- Deployed to **`Netlify`**
- With 2 dynamic themes
- Later we can improve it with more option <span class="highlighted">you can suggest or ask me what you want in the next article</span>

## Build News Service

In the previous articles We created a component named `posts`. I'll use it to show our news posts.

First Let's discuss the layout of our `posts component`.
I want to build <span class="highlighted">two</span> things: part for filtering the news and part for displaying the news itself

I'll use `newsapi.org`'s api to get the news, so you have to signup and get a `key`.

Next, we have to create new `angular service` to get the news from the `API`. I'll name it `news service`.
Now, in your application's root directory open your terminal and run:

```bash
ng g service services/news --module app.module.ts
```

This command will create our `news service` and will update our `app.module.ts`.

We need to add something first in our `app.module.ts` to use it in `new.service.ts`

```javascript
import { HttpModule } from "@angular/http";
```

and add it to the `imports`
Now your `app.module.ts` should look like

```javascript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MaterialModule } from "./material.module";
import { FlexLayoutModule } from "@angular/flex-layout";
import { HttpModule } from "@angular/http";
import { AppRoutingModule } from "./app-routing.module";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { ServiceWorkerModule } from "@angular/service-worker";
import { AppComponent } from "./app.component";

import { environment } from "../environments/environment";
import { PostsComponent } from "./posts/posts.component";
import { HomeComponent } from "./home/home.component";
import { NavbarComponent } from "./navbar/navbar.component";
import { ThemeService } from "./services/theme.service";
import { NewsService } from "./services/news.service";

@NgModule({
  declarations: [AppComponent, PostsComponent, HomeComponent, NavbarComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    ServiceWorkerModule.register("/ngsw-worker.js", {
      enabled: environment.production
    })
  ],
  providers: [ThemeService, NewsService],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

First Let's explain what we're going to do, I know that this part is so boring but you have to know it, so you can handle things later yourself.
Next you have to replace `your-key-here` with your `API key` you got from your account here > https://newsapi.org/account

---

## Details of News Service

Next we need to build the functions to call the `api` from our `news.service`

We'll build 3 functions `getTopHeadLines()`, `getNewBySource()` and `getSources()`.
`getTopHeadLines`: will get the Top Headlines news. and this will be displayed as the default news.
`getSources`: it will give us all the news sources, we'll use them to filter our news.
`getNewBySource`: We'll use the previous function to get the sources to use it in this function.

Here's the code of our `service`

```javascript
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { environment } from '../../environments/environment';

@Injectable()
export class NewsService {
  key = 'your-key-here';
  constructor(private http: Http) { }
  getTopHeadLines(){
    return this.http.get('https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey='+this.key);
  }
  getNewBySource(source){
    return this.http.get('https://newsapi.org/v2/top-headlines?sources='+source+'&apiKey='+this.key);
  }
  getSources(){
    return this.http.get('https://newsapi.org/v2/sources?apiKey='+this.key);
  }
}
```

---

## Adding `News Service to posts.component.ts

Now we need to edit our `posts.component.ts`. As we created 3 functions in our `service` we'll use them here in `posts.component.ts`

### First

you have to import `new.service.ts`.

### Second

create 2 variable:
1st: will be `news= {articles:[]}`
2nd: will be `newsSources= {sources:[]}`

### Third

I'll display `articles from getTopHeadLines` in `ngOnInit` and the `new resources` also.

Here's the code of our `src/posts/posts.component.ts`

```javascript
import { Component, OnInit } from "@angular/core";
import { NewsService } from '../services/news.service';

@Component({
  selector: "app-posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.scss"],
  providers:[NewsService]
})
export class PostsComponent implements OnInit {
  news= {articles:[]};
  newsSources= {sources:[]};
  filterSource='google-news';

  constructor(private newsService: NewsService){}

  ngOnInit() {
    this.newsService.getTopHeadLines()
  		.subscribe(
  			response => this.news = response.json()
    );
    this.getnewsSources();
  }


  filterNews(source) {
    this.news={articles:[]};
    this.newsService.getNewBySource(source)
    .subscribe(
      response => this.news = response.json()
    );
  }

  getnewsSources() {
    this.newsService.getSources()
      .subscribe(
        response => this.newsSources = response.json()
      );
  }
}
```

---

For the view of this component in `posts.component.html`
I made 2 parts as I said at the beginning of this article:
one for filtering the news and one to show them. I used `Flex-Layout` also.
I added two things for the posts:

## Fix damaged images

You might noticed that there are some images that does not load correctly, to solve this problem I added this attribute `onError="this.src='/assets/blank.png';"`
It will display default image for damaged images.

## Spinner loader

Also I added a spinner to been displayed while our application fetching the data from the `api`, I used the `Angular Material` module `MatSpinnerModule`.

Here's the code of `posts.component.html`

```html
<div
  class="container margin-top"
  fxLayout="wrap row"
  fxLayout.xs="column"
  fxLayoutGap="1%"
  fxLayoutAlign="center"
>
  <mat-card class="filter">
    <form #filternewsForm="ngForm">
      <mat-form-field>
        <mat-select
          placeholder="News Source"
          [(ngModel)]="filterSource"
          name="source"
          required
        >
          <mat-option
            *ngFor="let source of newsSources.sources"
            [value]="source.id"
          >
            {{source.name}} - {{ source.language }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <button
        mat-raised-button
        color="primary"
        (click)="filterNews(filterSource)"
        [disabled]="!filternewsForm.form.valid"
      >
        Filter News to
        <span style="text-transform: capitalize; ">{{filterSource}}</span>
      </button>
    </form>
  </mat-card>
</div>

<div class="loader" *ngIf="!((news.articles)?.length > 0)">
  <mat-spinner></mat-spinner>
</div>
<div
  class="container"
  fxLayout="wrap row"
  fxLayout.xs="column"
  fxLayoutGap="1%"
  fxLayoutAlign="center"
>
  <div *ngFor="let post of news.articles" fxFlex="20%">
    <mat-card class="singleNews">
      <img
        mat-card-image
        src="{{post.urlToImage}}"
        onError="this.src='/assets/blank.png';"
      />
      <div class="cardbody">
        <mat-card-title>{{post.title}}</mat-card-title>
        <mat-card-content> <p>{{post.description}}</p> </mat-card-content>
      </div>

      <mat-card-actions align="end">
        <a href="{{post.url}}" target="_balnk" mat-raised-button color="accent"
          >Read More</a
        >
      </mat-card-actions>
    </mat-card>
  </div>
</div>
```

I did some small styling in `src/app/posts/posts.component.scss`

```css
.singleNews {
  margin-bottom: 15px;
  img {
    height: 200px;
  }
  mat-card-title {
    font-size: 16px;
    font-weight: bold;
  }
  .cardbody {
    height: 100px;
    overflow-y: auto;
    margin: 0 -15px;
    padding: 10px;
  }
}
.filter {
  margin-top: 100px;
  margin-bottom: 50px;
}
```

and I added some styling for the loader in `src/styles.scss`

```css
@import "./assets/styles/material-theme";
body {
  margin: 0;
}
.loader mat-spinner {
  margin: 10px auto;
}
```

## Change homepage content to Top News

For our home screen I want to make it dynamic, so let's display our Top Hot-lines there.
We'll use the same code and service:
Open `src/app/home/home.component.html`
and add the following code:

```html
<div
  class="homebtn"
  fxLayout="wrap row"
  fxLayout.xs="column"
  fxLayoutGap="1%"
  fxLayoutAlign="center"
>
  <a routerLink="/posts" mat-raised-button color="primary"
    >Choose News Source</a
  >
</div>
<div class="loader" *ngIf="!((news.articles)?.length > 0)">
  <mat-spinner></mat-spinner>
</div>
<div
  class="container"
  fxLayout="wrap row"
  fxLayout.xs="column"
  fxLayoutGap="1%"
  fxLayoutAlign="center"
>
  <div *ngFor="let post of news.articles" fxFlex="20%">
    <mat-card class="singleNews">
      <img
        mat-card-image
        src="{{post.urlToImage}}"
        onError="this.src='/assets/blank.png';"
      />
      <div class="cardbody">
        <mat-card-title>{{post.title}}</mat-card-title>
        <mat-card-content> <p>{{post.description}}</p> </mat-card-content>
      </div>

      <mat-card-actions align="end">
        <a href="{{post.url}}" target="_balnk" mat-raised-button color="accent"
          >Read More</a
        >
      </mat-card-actions>
    </mat-card>
  </div>
</div>
```

And replace the code into `src/app/home/home.component.ts` with

```javascript
import { Component, OnInit } from '@angular/core';
import { NewsService } from '../services/news.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  providers:[NewsService]

})
export class HomeComponent implements OnInit {
  news= {articles:[]};


  constructor(private newsService: NewsService){}

  ngOnInit() {
    this.newsService.getTopHeadLines()
  		.subscribe(
  			response => this.news = response.json()
    );
  }
}
```

Finally let's add some styling open `src/app/home/home.component.scss`

```css
.singleNews {
  margin-bottom: 15px;
  img {
    height: 200px;
  }
  mat-card-title {
    font-size: 16px;
    font-weight: bold;
  }
  .cardbody {
    height: 100px;
    overflow-y: auto;
    margin: 0 -15px;
    padding: 10px;
  }
}
.homebtn {
  margin: 40px 0;
}
```

Now our application is done! Here's the final result

![angular-5-pwa-material-netlify-dynamic-theme-flexlayout-services-news-ng-cli-app](/images/angular-5-pwa-material-netlify-dynamic-theme-flexlayout-services-news-ng-cli-app.gif)

And you can find the <span class="highlighted">[demo here](https://angular-5-article-series.netlify.com/)</span>


Best "tweet size" CSS Snippets ever


<span class="first-letter">D</span>ays ago I saw a tweet on Twitter `Michael Scharnagl` asking people, What's you favorite CSS snippets which you use again and again?
Rules:

- Has to fit in one tweet
- Has to be vanilla CSS (not Sass, Less...)
- You don't have to include vendor prefixes

Here's the original Tweet

![justmarkup-tweet](/images/2019/1/tweet-css.png)

Actually most of the snippets I used once or more, and I found some interesting snippets too. I thought about writing a blog post displaying all these snippets in a better way than `Twitter tweets` as I don't like the view of tweets and replies,
So I'll try to add each useful snippet from the replies of the tweet.

One last thing I'll try to mention the names of every snippet's publisher but. I might not be able to mention all the names so you can Back to the tweet and check it.

## Let's start:

`@justmarkup`

```css
img,
video {
  max-width: 100%;
  height: auto;
}
```

```css
::selection {
  color: #000;
  background: #fbd404;
}
```

```css
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
```

```css
html {
  box-sizing: border-box;
}
```

```css
*,
*::before,
*::after {
  box-sizing: inherit;
}
```

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
```

---

`@anandgraves`

```css
a {
  color: inherit;
}

label,
button,
input,
select {
  cursor: pointer;
}
```

---

`@M_J_Robbins`

> Email client isolation;

```css
.★:not(#★) {
  /* for targeting AOL */
}
@media yahoo {
  /* for targeting Yahoo */
}
u + .body .foo {
  /* for targeting Gmail */
}
#MessageWebViewDiv .foo {
  /* for targeting Samsung mail */
}
[OWA] .foo {
  /* for targeting http://Outlook.com  */
}
```

---

`@machtdesign`

> Tel-Link - to avoid error

```css
a[href^="tel"] {
  white-space: nowrap;
  pointer-events: none;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 30em) {
  a[href^="tel"] {
    pointer-events: auto;
    text-decoration: underline;
  }
}
```

---

`@DasSurma`

> Reminded to put `alt` on your images:

```css
img:not([alt]),
img[alt=""] {
  outline: 5px solid red;
}
```

---

`@justmarkup`

```css
img[alt*=".jpg"],
img[alt*=".jpeg"],
img[alt*=".gif"],
img[alt*=".webp"],
img[alt*=".png"],
img[alt*="Photographer:"],
img[alt*="Image of:"],
img[alt*="Photo of:"],
img:not([alt$="."]) {
  outline: 5px solid orange;
}
```

---

`@Chrisedmo`

> A grid system in a tweet:

```css
.fukol-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.5em;
}
.fukol-grid > * {
  flex: 1 0 5em;
  margin: 0.5em;
}
```

---

`@radibit`

> Vertically centering everything:

```css
.🦄 {
  display: flex;
  align-items: center;
  justify-content: center;
}
```

---

`@tajdidr`

> You can also use the grid layout 🙂

```css
body {
  display: grid;
  place-items: center;
  height: 100vh;
}
```

---

`@ChrisJPatty`

> I use these material design box shadows constantly.
> box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
> [Source](https://codepen.io/sdthornton/pen/wBZdXq)

```css
.classname {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
```

---

`The next tweet will save you a lot of time if you faced this problem before 😄`

`@noncototient`

> When you have that on element causing horizontal scroll on the page and you don’t know what it is.

```css
* {
        border: 1px solid red:
}
```

---

`@tzzoo`

> Target every child except the last one:

```css
li:not(:last-child) {
  border-bottom: 1px solid;
}
```

`@laryro` replied to the previous tweet

> Or you could just do this (in case you just want to add a line between elements)

```css
li + li {
  border-top: 1px solid;
}
```

---

`@jim_savage`

> scaling base value:

```css
:root {
  font-size: 12px;
}
@media (min-width: 768px) {
  :root {
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  :root {
    font-size: 16px;
  }
}
@media (min-width: 1200px) {
  :root {
    font-size: 18px;
  }
}
```

---

`@ojrask`

```css
label[for] {
  cursor: pointer;
}
```

---

`@niksy`

```css
abbr[title],
acronym[title],
dfn {
  cursor: help;
}

img {
  font-style: italic;
}

textarea {
  resize: vertical;
}

[disabled] {
  cursor: default;
}

[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.no-js button[type="button"] {
  display: none;
}
```

---

`@snitramordep`
Vertical & center align

```css
.foo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate (-50% -50%);
}
```

> @michaelpumo Use flexbox for that instead!

```css
.foo {
  display: flex;
  align-items: center;
  justify-content: center;
}
```

---

`@machtdesign`

```css
a[href^="https://"]:hover:before {
  content: "\f023"; /* fa-lock */
}
```

---

`@diegoeis`

/_ better css reset of all time _/

```css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
```

---

@ralfhoffmeister

```css
p {
  max-width: 38em;
}
```

---

@holger1411

```css
.class {
  font-size: calc(1em + 1vw);
}
```

---

@jenlampton

```css
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
```

---

@jordanmoore

```css
.class {
  display: flex;
  justify-content: space-between;
}
```

It still feels like cheating, it’s so easy.

---

@brunotron3000

```css
.square {
  height: 0;
  padding-bottom: 100%;
}
```

Since padding % is related to the element's width, with this code you can have a responsive square, adjust the % for different aspect ratios (56% for 16:9).

---

@Danno19008

```css
.ellipsis {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```

---

@\_caseyjacobson

```css
svg {
  fill: currentColor;
}
```

---

@kg_creative

```css
.wrapper {
  /* 16:9 */
  --ratio-h: 16;
  --ratio-v: 9;

  height: 0;
  overflow: hidden;
  padding-top: calc(var(--ratio-v) / var(--ratio-h) * 100%);
  position: relative;
}

.wrapper > .element {
  height: auto;
  position: absolute;
  width: 100%;
}
```

---

@amiegrrl

```css
* {
  -webkit-font-smoothing: antialiased;
}
```

---

@ralfhoffmeister

```css
input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}
//don’t forget to vendor-prefix
```

---

@bkastl

```css
sub,
sup {
  line-height: 0;
}
```

---

@mdstaicu

I'm not as cool as the CSS grid kids, I still use this for vertical alignment:

```css
.parent:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.child {
  display: inline-block;
  vertical-align: middle;
}
```

---

@ShaneHudson

I rely on

```css
input:checked + label {
}
```

for a lot of things

---

@gerardkcohen

```css
.visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
```

---

@innovati

Print external URLS:

```css
@media print {
  a {
    text-decoration: underline;
  }
  [href]:not([href^="#"]):after {
    content: " (" attr(href) ") ";
  }
}
```

Demo:
https://t.co/QfxHSRbtL7

---

@RussellSkaggs

```css
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100%;
  right: 100%;
  opacity: 0;
  transition: left 0s linear 0.5s, right 0s linear 0.5s, opacity 0.5s linear;
}
.modal-open {
  left: 0;
  right: 0;
  opacity: 1;
  transition: left 0s linear, right 0s linear, opacity 0.5s linear;
}
```

---

@RussellSkaggs

```css
.btn {
  display: inline-flex;
  align-content: center;
  align-items: center;
}
```

---

@IschaGast

```css
@media (inverted-colors) {
  img,
  video {
    filter: invert(100%);
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}
```

---

@keithjgrant

Space out children of a box

```css
.box {
  padding: 1em;
}

.box > :first-child {
  margin-top: 0;
}

.box > :last-child {
  margin-bottom: 0;
}

.box > * + * {
  margin-top: 1em;
}
```

---

@jim_savage

Giving a DIV a custom sized ratio.

```css
div {
  --ratio-x: 16;
  --ratio-y: 9;
  position: relative;
}

div::before {
  display: block;
  content: "";
  padding-top: calc(var(--ratio-y) / var(--ratio-x) * 100%);
}
```

---

@Eramdam

```css
.easyCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
```

who said centering in CSS was still hard? 😛

---

@MichaelWhyte

Get list ready for navigation:

```css
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
```

---

@adamtomat

````css
img {
  vertical-align: middle;
}
```
  Removes
  that
  bit
  of
  white
  space
  under
  an
  image
  --------
  @TobiReif
  ```css
  body {
  overscroll-behavior: none;
}
````

---

@nice2meatu

```css
.svg-inline {
  position: relative;
  top: 0.125em;
  height: 1em;
  width: 1em;
  flex-shrink: 0;
}
```

(last line only relevant when used inside a flex-container)

---

@LucP

```css
::root {
  --min-col-width: 250px;
}

.overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr));
}
```

---

@MattWilcox

```css
.calmUppercase {
  font-size: 0.9em;
  letter-spacing: 0.05em;
} /* No need to shout, just because you’re uppercase */
```

---

@pxandbeyond

```css
p {
  max-width: 75ch;
}
```

limits the max-width to 75 characters

```css
.foo {
  margin-right: 1ch;
}
```

adds 1 character space where needed

---

@antikris77

```css
picture {
  position: relative;
  overflow: hidden;
}

picture:before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

picture img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

---

@argyleink

```css
@keyframes present-yourself {
  to {
    opacity: 1;
    transform: translated(1, 1, 1);
  }
}
```

Used like:

```css
button {
  opacity: 0;
  transform: translateX(1rem);
  animation: present-yourself 0.2s ease forwards;
}
```

Node presents itself when attached to DOM

---

@GustavoRSSilva

```css
absolute-center: {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
```

---

@FPresencia

Magic container responsiveness for all screen sizes:

```css
.container {
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
}
```

---

@selbekk

Great way to sync media queries with your javascript:

```css
body::before {
 content: ‘small’,
 display: none;
}
@media all and (min-width: 1000px) {
 body::before {
  content: ‘medium’;
 }
}
@media all and (min-width: 1200px) {
 body::before {
  content: ‘large’;
 }
}
```

---

@stephenmurdoch

```css
// remove default styles
button {
  appearance: none;
}

// poor man's no-js checkbox toggler
input[type="checkbox"] ~ div {
  visibility: hidden;
}
input[type="checkbox"]:checked ~ div {
  visibility: visible;
}
```

I usually pair the above with a label, and then hide the checkbox.

---

@wwwulkan

Makes any text that is too long have 3 dots after it. It's awesome for when you're tight on horizontal space.

```css
.truncated {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 15rem;
}
```

---

@gups

```css
.transition-everything {
  transition: 300ms ease-in;
}
```

---

I know that I did nothing I just copy/paste the tweets content, But I think code here is much better than twitter and I want to use all the new snippets later. If you have any snippets Just comment below and I'll add it soon with your name.
We can make this post as a great resource for `css` snippets


Deploy Angular 5 Application to Netlify


<span class="first-letter">T</span>his is the third part in a seven-part [series](https://blog.wb.gy/angular-5-article-series/) about the JavaScript framework, `Angular 5`.
In this part, we'll go over deplying our `Angular 5` application to `Netlify`.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know `Deployment on Netlify` and how to deploy your `Angular 5` application to it.
I'm going to deploy the application We created in the 2 previous articles, so you have to check them first!

> ## Article Series:
>
> 1.  [Creating Angular 5 application with Angular-cli](https://blog.wb.gy/build-angular-5-app-with-angular-cli/)
> 2.  [Using `Angular Material` with `Angular 5`](https://blog.wb.gy/angular-5-angular-material/)
> 3.  Deploy Angular 5 Application to Netlify (**You are here**)
> 4.  [Build `PWA` with Angular 5 App](https://blog.wb.gy/build-pwa-angular-5-application/)
> 5.  [Build Dynamic themes for `Angular Material`](https://blog.wb.gy/build-dynamic-themes-for-angular-material/)
> 6.  [Using `FlexLayout` with Angular 5](https://blog.wb.gy/angular-5-material-and-flex-layout/)
> 7.  [Building `News` App using `Angular 5`](https://blog.wb.gy/building-news-app-using-angular-5/)

> Final [Demo here](https://angular-5-article-series.netlify.com/)

---

## Deploy our application to github

First we need to deploy our application to our github account.
You have to create new repository from [here](https://github.com/new)

![download--3-](/images/download--3-.png)

After creating your repository you should see a page like this but the name of the repo would be different

![download--4-](/images/download--4-.png)

Now open you terminal and change your current directory to our app's directory.
and run the next lines of code <span class="highlighted">but</span> you have to change the `repo` name to your `repo`'s name.
To add all our changes:

```bash
git add -A
```

then we have to commit these changes:

```bash
git commit -m "First commit before deployment"
```

You can change the commit title as you want.
Next we have to run:
<span class="highlighted">but please don't forget to change the repo-name and the username </span>

```bash
git remote add origin git@github.com:your-username-here/your-repo-name-here.git
```

~ Change `your-username-here` and `your-repo-name-here` in the previous code to yours first.
Now let's push our changes:

```bash
git push -u origin master
```

## Netlify

`Netlify` is one of the most beautiful things I've seen lately, Actually I hope that I knew it before. It's offer a lot of amazing features.
I deployed my own [Portfolio](http://wb.gy) on it. you can check it from here [wb.gy](https://wb.gy).

It offers hosting for `Front-End` Projects with many options. I can't count them in this article you have to check them yourself.

## Deploying to Netlify

Let's back to our deployment, you have to create an account on [`Netlify`](https://app.netlify.com) first using [Github, Gitlab, Bitbucket or Email] Choose what you want.
After that you'll be redirected to create your site
![create-site](/images/create-site.png)

Click on `New site from Git`

![step1](/images/step1.png)

Now choose `Github`, if you're using another git system choose it.

Next, choose your repo. I'll deploy a repo named `angular-5-article-series`

![choose-repo](/images/choose-repo.png)

Next we have to set some settings for our deployment.

1. For branch choose `master`, If you're using different branch choose it.
2. For Build command type
   ```
   ng build system --prod
   ```
   This command I'll explain it later in our series
3. For Publish directory, type: `dist`
   Why `dist` exactly, it's the directory angular creates when you run `ng build` so it's our application's directory.
   ![buildoptions](/images/buildoptions.png)

Then click `Deploy site`
It'll take a minute to deploy our site and give us the `URL`.

Here's my deployment `URL` https://angular-5-article-series.netlify.com/

I know that the explanation with images in this article might be silly, but I really wanted it to be understood, so the next articles would be more simple and anyone with little experience would be able to build the final application with us.

In the next article we'll use our deployed application to turn it into a `PWA`. It's amazing right?

Next: [Build `PWA` with Angular 5 App](https://blog.wb.gy/build-pwa-angular-5-application/)


Deploy Angular 6 Application to Netlify


<span class="first-letter">T</span>his is the fourth part in an n-part [series](https://medium.com/@geeksamu/angular-6-article-series-8add9a89e91f) about the JavaScript framework, `Angular 6`.
In this part, we'll go over deploying our `Angular 6` application to `Netlify`.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know `Deployment on Netlify` and how to deploy your `Angular 6` application to it.
I'm going to deploy the application We created in the 3 previous articles, so you have to check them first!

---

## Article Series

1. [Angular 6 Article Series](https://medium.com/@geeksamu/angular-6-article-series-8add9a89e91f)
2. [Building Angular 6 Application](https://medium.com/@geeksamu/building-angular-6-application-4bd7b19a66ab)
3. [Using Angular Material with Angular 6](https://blog.wb.gy/using-angular-material-with-angular-6/)
4. Deploy Angular 6 Application to Netlify (**You're here**)
5. Creating PWA with Angular 6 (**Soon**)
6. Dynamic themes in Angular 6 Material (**Soon**)
7. Angular 6 with GSAP (**Soon**)
8. Angular 6 with Firebase (**Soon**)

---

## Deploy our application to github

First we need to deploy our application to our github account.
You have to create new repository from [here](https://github.com/new)

![create-github-repo](/images/create-github-repo.png)

After creating your repository you should see a page like this but the name of the repo would be different

![github-repo](/images/github-repo.png)

Now open you terminal and change your current directory to our app's directory.
and run the next lines of code <span class="highlighted">but</span> you have to change the `repo` name to your `repo`'s name.
To add all our changes:

```bash
git add -A
```

then we have to commit these changes:

```bash
git commit -m "First commit before deployment"
```

You can change the commit title as you want.
Next we have to run:
<span class="highlighted">but please don't forget to change the repo-name and the username</span>

```bash
git remote add origin git@github.com:your-username-here/your-repo-name-here.git
```

~ Change `your-username-here` and `your-repo-name-here` in the previous code to yours first.
Now let's push our changes:

```bash
git push -u origin master
```

## Netlify

`Netlify` is one of the most beautiful things I've seen lately, Actually I hope that I knew it before. It's offer a lot of amazing features.
I deployed my own [Portfolio](http://wb.gy) on it. you can check it from here [wb.gy](https://wb.gy).

It offers hosting for `Front-End` Projects with many options. I can't count them in this article you have to check them yourself.

## Deploying to Netlify

Let's back to our deployment, you have to create an account on [`Netlify`](https://app.netlify.com) first using [Github, Gitlab, Bitbucket or Email] Choose what you want.
After that you'll be redirected to create your site
![create-site](/images/create-site.png)

Click on `New site from Git`

![step1](/images/step1.png)

Now choose `Github`, if you're using another git system choose it.

Next, choose your repo. I'll deploy a repo named `angular-6-article-series`

![netlify-choose-repo](/images/netlify-choose-repo.png)
Next we have to set some settings for our deployment.

1. For branch choose `master`, If you're using different branch choose it.
2. For Build command type
   ```
   ng build --prod
   ```
   This command I'll explain it later in our series
3. For Publish directory, type: `dist`
   Why `dist` exactly, it's the directory angular creates when you run `ng build` so it's our application's directory.
   ![netlify-build-options](/images/netlify-build-options.png)

Then click `Deploy site`
It'll take a minute to deploy our site and give us the `URL`.

<span class="highlighted">This should work and your application will be deployed successfully, But mines does not work. I don't know why! I see no errors. No problems. So I tried to deploy it using any method</span>
If your application gives you `404` page. You can deploy your final `dist` folder only to `Nelify`.
Just run:

```
ng build --prod
```

It'll create `dist` folder. Just drag it and drop it on this part of page in `Netlify
![deploystatic](/images/deploystatic.png)

This solution will work but it's not the best. We won't be able to use `Netlify`'s continuous development

Here's my deployment `URL` https://angular6-series.netlify.com

I know that the explanation with images in this article might be silly, but I really wanted it to be understood, so the next articles would be more simple and anyone with little experience would be able to build the final application.

Next: Creating PWA with Angular 6 (**Soon**)


Esp32 Espruino Linux Popos

## Get stats of board


```bash
stat /dev/ttyUSB0
```

```bash
screen /dev/ttyUSB0 115200
```

```bash
sudo esptool.py --chip esp32 --port /dev/ttyUSB0 write_flash --flash_mode dio --flash_size detect 0x0 esp32-idf3-20191231-v1.12-35-g10709846f.bin
```

sudo esptool.py --chip esp32 --port /dev/ttyUSB0 write_flash --flash_mode dio --flash_size detect 0x1000 esp32-idf3-20191231-v1.12-35-g10709846f.bin

rst:0x10 (RTCWDT_RTC_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
flash read err, 1000
ets_main.c 371 
ets Jun  8 2016 00:22:57


esptool.py --chip esp32 -p /dev/ttyUSB0 erase_flash




esp-idf/components/esptool_py/esptool/esptool.py --chip esp32 --port /dev/ttyUSB0  --baud 921600  --after hard_reset write_flash -z --flash_mode dio --flash_freq 40m --flash_size detect  0x1000 bootloader.bin  0x8000 partitions_espruino.bin 0x10000 espruino_esp32.bin





/dev/ttyUSB0




Serial port /dev/ttyUSB0
Connecting........_
Chip is ESP32D0WDQ6 (revision 1)
Features: WiFi, BT, Dual Core, Coding Scheme None
Crystal is 40MHz
MAC: 30:ae:a4:42:2a:9c
Uploading stub...
Running stub...
Stub running...
Erasing flash (this may take a while)...
Chip erase completed successfully in 6.3s
Hard resetting via RTS pin...


esptool.py --chip esp8266 --port /dev/ttyUSB0 write_flash --flash_mode dio --flash_size detect 0x0 esp32-idf3-20191231-v1.12-35-g10709846f.bin

esp32-idf3-20191231-v1.12-35-g10709846f.bin


Connecting........_
Chip is ESP32D0WDQ6 (revision 1)
Features: WiFi, BT, Dual Core, Coding Scheme None
Crystal is 40MHz
MAC: 30:ae:a4:42:2a:9c
Uploading stub...
Running stub...
Stub running...
Configuring flash size...
Auto-detected Flash size: 4MB
Compressed 1247104 bytes to 787735...
Wrote 1247104 bytes (787735 compressed) at 0x00000000 in 69.5 seconds (effective 143.5 kbit/s)...
Hash of data verified.


Flashing Espruino on esp32-woroom




```bash
sudo chmod a+rw /dev/ttyUSB0
```
## Download the files

http://www.espruino.com/Download

## Start flashing

```bash
esptool.py --chip esp32 \
    --port "/dev/ttyUSB0" \
    --baud 115200 \
    write_flash \
    -z \
    --flash_mode "dio" \
    --flash_size 4MB \
    --flash_freq "40m" \
    0x1000 bootloader.bin \
    0x10000 espruino_esp32.bin \
    0x8000 partitions_espruino.bin
```


tried both

```bash
esptool.py --chip esp32                                \
        --port /dev/ttyUSB0                         \
        --baud 115200                               \
        --after hard_reset write_flash              \
        -z                                          \
        --flash_mode dio                            \
        --flash_freq 40m                            \
        --flash_size detect                         \
        0x1000 bootloader.bin                       \
        0x8000 partitions_espruino.bin              \
        0x10000 espruino_esp32.bin
```

How I Built My Blog New Theme


<span class="first-letter">T</span>his year I started with creating a new theme for my blog. besides publishing the post [2018 Into 2019](https://blog.wb.gy/my-2018/). I wanted to do something neat and cool at the beginning of this year.


How to use UIkit with angular-cli

<span class="first-letter">I</span>n this post, I’ll talk about the best way to use `UIkit` with `angular 2` or 4 using `angular-cli`
I wrote this post just to use it later as I forgot too much.
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 :)
First I’ll assume that you already have an `angular` Project
or you can create a new one using `angular-cli` command

```bash
ng new new-project-name
```

then move to the project folder

```bash
cd new-project-name
```

next we have to add dependency to `jquery` and `uikit`

```bash
npm install jquery — save
```

```bash
npm install uikit — save
```

Now we have to edit the file `.angular-cli.json` and add some `jquery` and `UIKit` scripts
scroll to the part of scripts then add the scripts of `jquery`, `UIkit` and `UIkit icons`

```json
"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/uikit/dist/js/uikit.min.js",
        "../node_modules/uikit/dist/js/uikit-icons.min.js"
      ],
```

Now we can use `UIKit` wherever we want, next I’ll show simple way to use `UIKit alert`
First I prefer to use sass instead of css, So in the file `.angular-cli.json`
change the end of it to be like the next lines
I just changed `styleExt` from `css` to `scss`

```json
"defaults": {
    "styleExt": "scss",
    "component": {}
 }
```

and then you have to rename two files `styles.css` to `styles.scss` and in the app folder change `app.components.css` to `app.components.scss`
and in the file `app.components.ts` it should look like this

```javascript
import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "app";
}
```

then to use the `UIKit alert` the same file will be like this

```javascript
import { Component } from "@angular/core";
declare var UIkit: any;
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "app";
  showAlert(): void {
    UIkit.modal.alert("UIkit alert!");
  }
}
```

now we have to change the `app.component.html` file to add the `alert`, add the next code

```html
<div (click)="showAlert()">alert</div>
```

next we have to add `UIKIT` styling so in the `styles.scss` file add the next line

```javascript
@import "../node_modules/uikit/src/scss/variables-theme.scss";
@import "../node_modules/uikit/src/scss/mixins-theme.scss";
@import "../node_modules/uikit/src/scss/uikit-theme.scss";
```

That's all you can find this post on my medium account too [here](https://medium.com/@geeksamu/how-to-use-uikit-with-angular-cli-9641a868758e)


Challenge to change something I dislike in my Uni

Inovbot and 22 Years Old

The MERN Stack Series: React,

2018 Into 2019


<span class="first-letter">A</span>t the beginning of 2018, I created the next `Mind Map`. To clear the things that I wanted to do this year.

![my 2018](/images/2019/1/my-2018.jpg)

I blurred some items in the image because they're personal 🙄. Anyway, I created this list of things to achieve most of them and let's check what I achieved in 2018 of this list.

Starting from the right:

## Skills (English)

I'm writing this article in English and I'm afraid of making any grammar mistakes. I might have made a grammar mistake in the previous phrase LOL 😆. I know my English is not perfect but I'm doing my best. 2018 was the first year for me to write a lot of English Technical Articles.

Writing articles in English might be a slow way to enhance it, but I want to share more tech content with other developers and the main point of enhancing my English is using it in writing and learning more. I hope that I can be better next year.
From what I did in 2018, I can say that I achieved this point.

## Skills (Angular, JS) ⚔️

Most of the Articles I wrote in 2018 was about Angular, so yes I killed Two birds with a stone. 2018 was the year I refined JS, built more and more JS app for Front-End and Back-End. Most of them are not public :D but I had a lot of experience building them.

## Writing ✍️

I covered most of this point earlier. I wrote an article about [my 24th Birthday here](https://blog.wb.gy/rio-and-the-24-yrs-challenge/).
Here's my [medium profile](https://medium.com/@geeksamu).
At that time I didn't have the chance to start something like that.

However, I had this email on 10 Dec 2018 from `Packt` company, and this was the most amazing things that happened to me at the end of 2018. Let's hope that I will do it and start writing this book 😉.
![write-a-book](/images/2019/1/write-a-book.png)

## Training 👨‍💻

`Offline training` was the most common training I gave, I thought of trying to give `online` training but I still can't find the chance and time for it. I hope that I can achieve this point in 2019.

## Sport 🏅

It's so hard to gather sport and coding together I know that, but I wanted to feel good about my body and to make something different, so I got back to the gym. I feel much better now. What I miss at this point is to learn a new sport. I might find time for it in 2019.

## Contribution 🌱

Helping other people is an amazing thing, especially in the field you master. I wanted to help more people on `StackOverflow`. I answered some questions there but It's not the amount that I wanted to answer. Maybe in 2019, I will be more helpful there.
For `Github`, I only shared the code of small apps that I built in the Angular article series.

## Traveling ✈️

Traveling and visiting new places is a great hobby. I can't spend most of my time doing it though. But I'm trying to make some time for it.
I visited `Dahab` this year and it was like <span class="highlighted">WOW</span>. Everything is amazing about `Dahab` I really want to visit it again soon 💗.
For meeting online friends that I knew on Social networks. I met some of them this year and I hope that I can meet all of them in 2019.

## Tech Meetups

I did nothing at this point, I want to attend more web conferences and more meetups but the complexity of managing time and traveling to attend those conferences is the hardest thing that prevents me.

<span class="first-letter">I</span>n general, I achieved most of the points that I wanted to achieve in 2018 and I'm going to create a new mind map for 2019 hoping that I can achieve most of it like this year.

I'm writing this post just to remind myself that I can do what I want. And to encourage you guys to put your list of things that you want to achieve in 2019 and let's meet at the end of it to discuss what we did.
I really hope that we can be more productive dreamers ❤️


Anchors for headings in React-Markdown

This article is just a solution for a problem that I faced building the blog in my [portfolio](https://wb.gy)
> `The problem`: React-Markdown doesn't render the heading with anchors for each heading.


React Markdown is used to render Markdown as a React Component. I used it to render my writings on most of the pages in my portfolio like the blog and projects part.

The main problem I faced with React-Markdown is that I can't add anchors to Headings.
If you can't understand what I mean, I want the Headings in my blog post to be like that
![react markdown heading anchor](/imgs/2020/6/heading-anchor.png)

I wanted every heading in my article to have an anchor before it refer to an `id`. After many hours of searching an trying many solutions most of them didn't work. I found some solutions that solve only part of the problem.
I found this answer on [Github](https://github.com/rexxars/react-markdown/issues/69#issuecomment-289860367)

RIO & The 24 yrs Challenge - ريو وتحدي العام الـ 24

Why I Transferred My Domains From Godaddy to Namesilo


```
2 Gifts at the end of the Article.
```

I have been using Godaddy for more than 6 years, I bought more than 100 domains on it. Before I left I had 10+ domains on Godaddy.
Here's the receipt of the first domain I bought from Godaddy

![godaddy-first-domain-ever](/images/2019/11/godaddy-first-domain-ever.png)

It's 6 years and 2 months ago. That Domain cost me about `$1` at that time with a coupon (about 8EGP in my country's currency at that time).

At the time of this receipt, the regular price of a `.com` domain was `$10` and the same for the renewal.
I noticed that Godaddy is increasing the renewal price of domains every year but It didn't matter to me till I found it was increasing by %20 over the 2018 price of `$14.99`.

In February 2019 I renewed a `.org` domain for `$21.17`, I thought It was expensive because it's a 3 letters domain. But when I tried to renew my `.com` normal domains I found that it would cost me `$18.17`.

I made a google search and found out that only GoDaddy was increasing their prices.

So I had to look for a better and cheaper provider after checking many reviews I found that [NameSilo](https://bit.ly/349Ra8U) is the best one and cheaper than Godaddy and even other providers.
Check the prices at NameSilo here: [NameSilo Pricing](https://bit.ly/35rF7Ea)

Here are some comparisons between [NameSilo](https://bit.ly/349Ra8U) and Godaddy:

## Pricing

| #                                       | NAMESILO                            | GODADDY                             |
| --------------------------------------- | ----------------------------------- | ----------------------------------- |
| Everyday .com registration price        | $8.99                              | $15.17                             |
| Everyday .com renewal price             | $8.99                              | $15.17                             |
| Lifetime FREE WHOIS Privacy             | {{{yes}}} | {{{no}}}    |
| No ICANN or transaction fees            | {{{yes}}} | {{{no}}}    |
| Offers 2-factor authentication          | {{{yes}}} | {{{yes}}} |
| Offers free advanced account security   | {{{yes}}} | {{{no}}}    |
| Elite web site encryption               | {{{yes}}} | {{{no}}}    |
| Email encryption                        | {{{yes}}} | {{{yes}}} |
| Uses own domain registrar platform      | {{{yes}}} | {{{yes}}} |
| 30D period for renewing expired         | {{{yes}}} | {{{no}}}    |
| Allows immediate outbound transfers     | {{{yes}}} | {{{yes}}} |
| Offers registration refunds             | {{{yes}}} | {{{yes}}} |
| One-Click DNS templates                 | {{{yes}}} | {{{yes}}} |
| Customizable DNS templates              | {{{yes}}} | {{{yes}}} |
| Sub-account management                  | {{{yes}}} | {{{yes}}} |
| Offers hosting                          | {{{no}}}    | {{{yes}}} |
| Offers DNSSEC                           | {{{yes}}} | {{{yes}}} |
| Free API                                | {{{yes}}} | {{{no}}}    |
| Customizable parking pages              | {{{yes}}} | {{{no}}}    |
| Customer service phone number           | {{{yes}}} | {{{yes}}} |
| Customer service chat                   | {{{yes}}} | {{{no}}}    |
| Accepts major credit cards              | {{{yes}}} | {{{yes}}} |
| Accepts PayPal                          | {{{yes}}} | {{{yes}}} |
| Accepts unverified PayPal accounts      | {{{yes}}} | {{{no}}}    |
| Accepts Bitcoin                         | {{{yes}}} | {{{no}}}    |
| Accepts Skrill                          | {{{yes}}} | {{{yes}}} |
| Accepts AliPay                          | {{{yes}}} | {{{yes}}} |
| Afternic Premium Partner                | {{{yes}}} | {{{yes}}} |
| SedoMLS Partner                         | {{{yes}}} | {{{no}}}    |
| Affiliate program                       | {{{yes}}} | {{{yes}}} |
| Free Customizable WHOIS records         | {{{yes}}} | {{{no}}}    |
| Private-labeled reseller site           | {{{no}}}    | {{{yes}}} |
| WHMCS module                            | {{{yes}}} | {{{yes}}} |
| HostBill module                         | {{{yes}}} | {{{no}}}    |
| Clientexec module                       | {{{yes}}} | {{{no}}}    |
| Blesta module                           | {{{yes}}} | {{{no}}}    |
| Boxbilling module                       | {{{yes}}} | {{{no}}}    |
| POP accounts available                  | {{{no}}}    | {{{yes}}} |
| Free email forwarding                   | {{{yes}}} | {{{yes}}} |
| Multi target/catch-all email forwarding | {{{yes}}} | {{{no}}}    |

What really matters to me from this comparison:

- Price of registration.
- Price of renewal.
- WHOIS Privacy.
- 30 Days period for renewing expired domains.
- Accepts Bitcoin

This will save me about 40% of the cost for each year as I pay for many domains renewal.

## The First Gift

The good part here and the gift for you guys is that you can transfer your domain at that low price and a `$1` discount for each domain all you need is to use one of these coupons

`medium1usd`
or
`mediumcoupon`

So now If you are going to buy a `.com` domain from [NameSilo](https://bit.ly/349Ra8U) you will save \$7 per domain with the discount coupons `medium1usd` , `mediumcoupon`

## The Second gift

If you're looking for free hosting for your websites here's a [\$50 in FREE Hosting Credit on DigitalOcean](http://bit.ly/2B5ReJR)


Stuff I use

Using Angular Material with Angular 6


<span class="first-letter">T</span>his is the third part in an n-part [series](https://blog.wb.gy/angular-6-article-series/) about the JavaScript framework, `Angular 6`.
In this part, we'll go over using `Angular Material` with Angular 6 Applicatin.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using `Angular Material` and how to use it with our `Angular 6` application.

---

## Article Series

1. [Angular 6 Article Series](https://blog.wb.gy/angular-6-article-series/)
2. [Building Angular 6 Application](https://blog.wb.gy/building-angular-6-application/)
3. Using Angular Material with Angular 6 (**You're here**)
4. [Deploy Angular 6 to Netlify](https://blog.wb.gy/deploy-angular-6-application-to-netlify/)
5. Deploy Angular 6 Application to Netlify (**Soon**)
6. Creating PWA with Angular 6 (**Soon**)
7. Dynamic themes in Angular 6 Material (**Soon**)
8. Angular 6 with GSAP (**Soon**)
9. Angular 6 with Firebase (**Soon**)

---

<span class="first-letter">F</span>irst you must check the previous article in this series to create new `Angular6` Application.
Now using the new `ng add` in Angular-CLI let's install the `Angular Material`. In your application root directory run:

```bash
ng add @angular/material @angular/cdk
```

It updated the `package.json` and `angular.json`
Added `BrowserAnimationsModule` to your `app.module.ts` file
Added `Material Icons,Roboto Font` to `index.html`

You can generate a starter component including a toolbar and a side navigation.
Run:

```bash
ng generate @angular/material:material-nav --name=navbar
```

This will generate a component named `navbar` and will add some material components to `app.module.ts`.

Let's add our navbar to `app.component.html`
Open `/src/app/app.component.html` and add the navbar tag, your code should look like

```html
<navbar></navbar> <router-outlet></router-outlet>
```

If you're running a server for our app check your browser or run

```bash
ng serve --open
```

to see the changes we made.

But I think there's something wrong with our menu. I fixed it and changed the links of the menu by adding our home and posts routes.
Here's the final code of `/src/app/navbar/navbar.component.html`

```html
<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'"
    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches"
  >
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item routerLink="/">Home</a>
      <a mat-list-item routerLink="posts">Posts</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
      >
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>
```

You can also generate a starter dashboard component containing a dynamic grid list of cards.
Run:

```bash
ng generate @angular/material:material-dashboard --name=dash
```

You can see the result by adding `<dash></dash>` tag to your `app.component.html`
Your final `/src/app/app.component.html` should look like

```html
<navbar></navbar> <dash></dash> <router-outlet></router-outlet>
```

![angular6-material](/images/angular6-material.png)

You can generate a starter data table component that is pre-configured with a datasource for sorting and pagination.
Run:

```bash
ng generate @angular/material:material-table --name=data-table
```

And add it like the previous one to see the results.

This new features of Angular 6 are cool but I prefer to put all the `Material Modules` in separated file named `material.module.ts` and I prefer to import most of the modules once. I don't like importing one by one. I know that it's not the best practice
So Let's edit our `app.module.ts`:

```javascript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { HomeComponent } from "./home/home.component";
import { PostsComponent } from "./posts/posts.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MaterialModule } from "./material.module";

import { NavbarComponent } from "./navbar/navbar.component";
import { LayoutModule } from "@angular/cdk/layout";
import { DashComponent } from "./dash/dash.component";
import { DataTableComponent } from "./data-table/data-table.component";

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PostsComponent,
    NavbarComponent,
    DashComponent,
    DataTableComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

and create new file `/src/app/material.module.ts` and add the following code:

```javascript
import { NgModule } from "@angular/core";

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule,
  MatGridListModule,
  MatSidenavModule,
  MatSortModule,
  MatTableModule,
  MatInputModule,
  MatSelectModule,
  MatSliderModule,
  MatRadioModule,
  MatListModule,
  MatProgressSpinnerModule,
  MatChipsModule,
  MatTooltipModule,
  MatExpansionModule,
  MatDialogModule,
  MatAutocompleteModule,
  MatTabsModule,
  MatSlideToggleModule,
  MatPaginatorModule
} from "@angular/material";

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatGridListModule,
    MatSidenavModule,
    MatSortModule,
    MatTableModule,
    MatInputModule,
    MatSelectModule,
    MatSliderModule,
    MatRadioModule,
    MatListModule,
    MatProgressSpinnerModule,
    MatChipsModule,
    MatTooltipModule,
    MatExpansionModule,
    MatDialogModule,
    MatAutocompleteModule,
    MatTabsModule,
    MatSlideToggleModule,
    MatPaginatorModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatGridListModule,
    MatSidenavModule,
    MatSortModule,
    MatTableModule,
    MatInputModule,
    MatSelectModule,
    MatSliderModule,
    MatRadioModule,
    MatListModule,
    MatProgressSpinnerModule,
    MatChipsModule,
    MatTooltipModule,
    MatExpansionModule,
    MatDialogModule,
    MatAutocompleteModule,
    MatTabsModule,
    MatSlideToggleModule,
    MatPaginatorModule
  ]
})
export class MaterialModule {}
```

Now, we need to include `*HammerJS` for gesture support.
In your terminal, type:

```bash
npm install --save hammerjs
```

We have to include it, open `/src/main.ts`

```javascript
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";

import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import "hammerjs";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.log(err));
```

Now I have to mention something as I know you might face a problem while using it.
Now we have <span class="highlighted">2 modules</span> in our application ( `app.module.ts` and `material.module.ts`), so if you want to create new component or service you have to mention where do you want to add your new component.
Let's see a practical example. If we want to create new component named `test`
in your terminal run( make sure you're in your root directory first):

```bash
ng g component test --module app.module.ts
```

This will create new component named `test` and will add it to `app.module.ts`.

If you forgot to add the `--module` argument you'll get an error next time adding new component.

That's all for now


Why I Built Medium Plus


Hello guys,

I’m [Ahmed Abdelsalam](https://wb.gy), A freelance Web Developer, Blogger, and TEDx Speaker.

I changed the theme of [my blog](https://blog.wb.gy) at the end of 2018, Building a simpler theme with better typography, multiple themes, and other features. After finishing the theme I said to myself why don’t we have similar features for a great website like **Medium**.

Features Like:

- Dark theme.
- Customizable font-family.
- Customizable font-size.
- Offline Articles.
- Highlighted Code.
- Listen to articles instead of reading.

All these features will make my medium experience better. Besides, finishing more articles listening to them at any time.

In the beginning, I thought about creating a chrome extension to add all these options to Medium, but It took me some time to realize that I can’t use this extension on my phone. I prefer reading on my phone, so I decided to create a tool that gets the article from Medium and enhances it with all the features above.

I know it’s not perfect, but I really tried so hard to do my best building every piece of this tool.

Let’s talk about each feature.

## Dark Theme

I built a second dark theme, as I prefer the dark themes at everything. It won’t stop at the currently light and dark themes. I’m planning to build more themes that fit everybody. It means that if you want to use [**Medium Plus**](https://mplus.wb.gy) and want to use your own **color Schema,** Just [contact me](https://wb.gy).

Here’s an example

## Different Font Families

Medium uses a good font family but I prefer to use others and choose what I want whenever I want. That’s why I created this feature.

## Font-Size Control (soon)

I’m planning to add a font-size control soon so you can choose the font-size you prefer.

## Offline Articles

Every article you load in [**Medium Plus**](https://mplus.wb.gy) is saved in your browser cache so you can access them whenever you want, even without internet connection. All you need is to just load the article once.

## Highlighted Code

This is one of the hardest features to build, I tried to make the code syntax highlighting experience better than it is on Medium. I just want to read the code better here instead of hosting code on GitHub Gist. Next, I’ll post some code to show you the difference between Medium and [**Medium Plus**](https://mplus.wb.gy)
```javascript
import React, { Component } from 'react'  
export default class App extends Component {  
 render() {  
 return (  
 <div>  
 Hello Medium Plus  
 </div>  
 )  
 }  
}
```

It took me some time to be able to use highlight.js in [**Medium Plus**](https://mplus.wb.gy) and use its amazing features of code highlighting.

![](https://cdn-images-1.medium.com/max/1600/1*JRVw-6vs9DCofB7WbNyjzQ.png)

## Articles to Audio

Medium has a lot of amazing content, I really want to read more and more but I don’t have the time to finish reading all these lists of articles. Having the option to listen to your articles instead of reading them will save you a lot of time. I used a service called [WebsiteVoice](https://medium.com/r/?url=https%3A%2F%2Fgoo.gl%2FW1Yg9h) to add this feature to [**Medium Plus**](https://mplus.wb.gy).

![](/images/2019/2/mediumplus.gif)


## My Plans

I’m planning to make this tool open-source as soon as possible, adding more features and I’d be really happy to add any suggestions from you guys, so don’t hesitate to leave me comments or emails.

## Disadvantages of Medium Plus

The only problem I have now with Medium Plus is the embedded code, for example: (IFrames) Like Github Gists. Medium hosts this stuff on their media and prevents accessing them from an external domain (CORS) that’s why I can’t use them. At the moment I’m working on this issue.

Try it yourself [**Medium Plus**](https://mplus.wb.gy)**.**
