Angular, Material and Firebase — How To Setup Everything

Learn how to setup a project including Angular (5.x), Material Design and Firebase. At the end of this article you will be able to start working on your own projects with this template.

Introduction

  • Angular is a framework for building client applications in HTML and TypeScript that compiles to JavaScript.
  • Material is a unified system that combines theory, resources, and tools for crafting digital experiences.
  • Firebase is built on Google infrastructure and scales automatically, for even the largest apps, this is going to be our back-end.

Let’s begin… step 1

With the Angular-cli we are going to create a new project called ‘ngmatfire’ (it can be called anyway you want). In the CLI write the following to generate a new Angular application.

ng new ngmatfire

After installing we want to change directory to our new folder.

cd ngmatfire

Now we want to install all the necessary dependencies with the latest versions for this project. Run the following command.

npm i @angular/animations@latest @angular/cdk@latest @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/material@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest firebase@latest hammerjs@latest rxjs@latest --save

and the dev dependencies.

npm i @angular/cli@latest @angular/compiler-cli@latest typescript@latest webpack@latest --save-dev

As you can see there are a lot of Angular dependencies, we don’t need all of them now but in a further stage they will come on your path. For material we have installed two dependencies: Material and CDK. More information about the CDK is given here. Firebase has only one dependency.

Step 2 (importing)

Now we need to import some modules into /src/app/app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MdButtonModule, MdCardModule,MdMenuModule, MdToolbarModule, MdIconModule, MaterialModule } from '@angular/material';
import 'hammerjs';

After importing these modules, define them in your @NgModule under imports.

imports: [
BrowserAnimationsModule,
HttpClientModule,
MdButtonModule,
MdCardModule,
MdMenuModule,
MdToolbarModule,
MdIconModule,
MaterialModule
],

The material modules we did defined here can be found on material.angular.io, like this button for example. You can find here a lot of other modules with great examples.

Step 3 (final material steps)

In our /src/app/index.html we will load the Material icons in the head.

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

In /src/app/styles.css there is a import needed for the Material pre-build theme.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

On the website you can find the four pre-build themes which you can immediately use, as well with information on how to custom theme. Material Design is now ready to use.

Step 4 (firebase)

  • Go to http://firebase.google.com/ and sign in with your gmail.
  • When signed in you want to go to the console (at top of the page visible).
  • Here you can add a project. We need to give it a name and choose our country. Mine will be called ‘ngmatfire’.
  • On the sidebar on the left side, we need to click on ‘Authentication’.
  • After this, go to ‘Webinstallation’ on the top-right of this page.
  • Now you will see all kinds of keys, id’s and url’s. Copy the following.
apiKey: '[YOUR_KEY]',
authDomain: '[YOUR_URL]',
databaseURL: '[YOUR_URL]',
projectId: '[YOUR_ID]',
storageBucket: '[YOUR_URL]',
messagingSenderId: '[YOUR_ID]'

In our project we want to go to /src/app/app.component.ts. In ngOnInit at the bottom of this file, paste your copy inside firebase.initializeApp. Each time we start our app Firebase will be initialized.

ngOnInit() {
firebase.initializeApp({
apiKey: '[YOUR_KEY]',
authDomain: '[YOUR_URL]',
databaseURL: '[YOUR_URL]',
projectId: '[YOUR_ID]',
storageBucket: '[YOUR_URL]',
messagingSenderId: '[YOUR_ID]'
});

At the top of /src/app/app.component.ts. We still need to import Firebase. Importing in /src/app/app.module.ts is not necessary.

import * as firebase from 'firebase';

Firebase is ready for usage now.

With this template you can start immediately working on new applications.

If you want to have a starter kit with many components already created and ready to use, please take a look at the next link.

Resources

Have any questions? Thank you for reading! You can contact me on Github.

Like what you read? Give Jeroenouw a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.