DEV Community: favour vivian woka

5 Steps On how to add bootstrap to an Angular application.

favour vivian woka — Mon, 15 Aug 2022 20:50:00 +0000

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Below is some advantages of using Bootstrap

Fewer Cross-browser bugs.
Lightweight and customizable.
Responsive structures and styles.

Let look at how we can add Bootstrap in an angular project. First we are going to create an Angular project.

Creating an Angular project Using Angular CLI

ng new add-bootstrap
# Would you like to add Angular routing?
# Select n and Hit Enter.

Get inside the project folder:

cd add-bootstrap

Now that our project has been created, let look at how we can add bootstrap in our project in 5 simple steps.

Step 1: Adding Bootstrap 4 to Angular Using index.html

We can add Bootstrap to our angular project by adding the Bootstrap CDN in our index.html file as a link. Open index.html in our project.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ChatApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

 *<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">*

</head>
<body>
  <app-root></app-root>

  *https://code.jquery.com/jquery-3.4.1.slim.min.js
  https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js
  https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js*

</body>
</html>

Step 2: Installing Bootstrap 4 in your Angular project using NPM

We can add Bootstrap in our project by installation.
Run the command below:

cd add-bootstrap
npm install bootstrap

We first navigate to our project in the command prompt before running the command for the installation.

Step 3: Adding Bootstrap 4 to Angular Using Style.css

We can add Bootstrap in our project by Importing bootstrap in our style.css file.

@import "~bootstrap/dist/css/bootstrap.min.css";

Step 4: Adding Bootstrap 4 to Angular Using angular.json

We can add the file paths to the styles and scripts array in file .angular-cli.json:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Step 5: Using Bootstrap ng-bootstrap and ngx-bootstrap

Bootstrap depends on jQuery and Popper.js libraries, and if you don't include them in your project, any Bootstrap components that rely on JavaScript will not work.

And can be added to your Angular project is the following way.

First by installing ng-bootstrap and ngx-bootstrap:

npm install --save @ng-bootstrap/ng-bootstrap
npm install --save ngx-bootstrap

Second by import @ng-bootstrap.

After the installation of both dependence, we can now import it in our app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Now that we have added bootstrap in our project using the above steps, let now write some code to test if it works.

Now let’s code

We are going to create a simple Homepage for texting. Open app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand pl-5" href="#">Navbar</a>
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto pr-5">
      <li class="nav-item active pl-3 pr-3">
        <a class="nav-link" href="#"
          >Home <span class="sr-only">(current)</span></a
        >
      </li>
      <li class="nav-item pl-3 pr-3">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item dropdown pl-3 pr-3">
        <a
          class="nav-link dropdown-toggle"
          href="#"
          id="navbarDropdown"
          role="button"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<div class="container-fluid hero-page">
  <div class="container">
    <div class="row align-items-center" style="height: 60vh;">
      <div class="col-6">
        <h1>Showcase your app with Small Apps</h1>
        <p>
          Besides its beautiful design. Bootstrap is an incredibly rich core
          framework for you to showcase your App.
        </p>
      </div>
    </div>
  </div>
</div>
<div class="container mt-5 pt-5 pb-5 mb-5">
  <div
    class="row align-items-center justify-content-around"
    style="height: 60vh;"
  >
    <div class="col-3 card" style="height: 60vh;">
      <img
        class="card-img-top"
        src="../../assets/phone 2.png"
        alt="Card image cap"
      />
      <div class="card-body">
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
      </div>
    </div>
    <div class="col-3 card" style="height: 60vh;">
      <img
        class="card-img-top"
        src="../../assets/phone 2.png"
        alt="Card image cap"
      />
      <div class="card-body">
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
      </div>
    </div>
    <div class="col-3 card" style="height: 60vh;">
      <img
        class="card-img-top"
        src="../../assets/phone 2.png"
        alt="Card image cap"
      />
      <div class="card-body">
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
      </div>
    </div>
  </div>
</div>
<footer class="bg-dark" style="min-height: 10vh;">
  <div
    class="row justify-content-center align-items-center p-0 m-0"
    style="min-height: 10vh;"
  >
    <div class="col-12 text-center">
      <p style="color: #fff;">Copyright © 2020</p>
    </div>
  </div>
</footer>

Open app.component.scss and add the code.

.hero-page {
  background: linear-gradient(rgba(0, 0, 0, 0.548), rgba(0, 0, 0, 0.548)),
    url("../../assets/story-slider-01.jpg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  min-height: 80vh;
  color: white;
  font-size: 20px;
}
.hero-page h1 {
  font-size: 50px;
  font-weight: bolder;
  margin-bottom: 30px;
  line-height: 65px;
}
nav ul li a:hover {
  color: #02225b;
}
nav a {
  font-size: 20px;
  font-weight: bolder;
}
nav a:hover {
  color: #02225b;
}

The result can be seen below:

We have seen different ways of including Bootstrap 4 in an Angular 9 apps.

What’s new in Next.js 10.2

favour vivian woka — Thu, 27 May 2021 23:00:52 +0000

Next.js is a framework for building React web applications, super-fast static websites, and single-page JavaScript applications. It was designed to help solve common problems associated with React development, including production optimizations such as code splitting, code bundlers (webpack), and code compilers (Babel).

Next.js is also gaining popularity for its superior developer experience and many built-in features, notably automatic code splitting for faster page loading and client-side routing with optimized prefetching.

On 28 April 2021, the Next.js team announced the release of Next.js 10.2 with even more attractive new features. The new release enables developers to build hybrid applications containing both server-rendered and statically generated pages.

In this guide, we’ll take a look at the new features included in Next.js 10.2, namely:

Accelerated builds and refresh
Faster startup
Improved accessibility
More flexible redirects and rewrites
Automatic webfont optimization Accelerated builds and refresh

Next.js 10.2 introduces faster builds and refresh enabled through webpack 5. With this improvement, any application that does not use a custom webpack configuration in its next.config.js will automatically use webpack 5 when enabled.

In addition, any Next.js application that has webpack 5 enabled will have access to a host of improved features including disk caching, fast refresh, long-term caching of assets, and tree shaking

Faster startup

A major goal of the latest Next.js release is to accelerate the local development experience to near-real-time speed after the first run on the local server. According to the official blog post, Next.js 10.2 boosts startup performance over the original Next.js CLI by 24 percent. For example, the next dev command for vercel.com decreased from 3.3 seconds to 2.5 seconds.

Previously, running next dev in the local terminal to start up the local server for development mode took a long time to load. Next.js 10.2 makes this process much faster and more developer-friendly.

More accessibile route changes

Route changes are now announced to screen readers by default, in addition to other assistive technology designed to improve accessibility. By accessibility, we mean features that are designed to be usable by as many people as possible. This commonly applies to users with disabilities, but it can also refer to designing features and content for the benefit of users with slow network connections, those using certain types of devices, etc.

More flexible redirects and rewrites

The Next.js team designed redirects and rewrites to be more flexible in the new version. This is mostly thanks to its support for the new has property, which enables you to match against incoming headers, cookies, and query strings.

With redirects, you can divert an incoming request to a different destination path. Rewrites enable you to map an incoming request. The has property takes the following:

type: String, the value of which must be either header, cookie, host, or query
key: ``String, which enables you to pass the key from the selected type you want to match against

Below is an example of different selected types we could match against:

// next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)'
          }
        ],
        destination: '/old-browser',
        permanent: false
      }
    ]
  }
}

The code above shows an example of how to redirect an old browser based on its User-Agent:

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB'
          }
        ],
        destination: '/uk/:path*',
        permanent: true
      }
    ]
  }
}

You can also redirect a user if the app needs to detect the user based on their location:

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)'
          }
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false
      }
    ]
  }
}

Let’s say you’re working on a web app that requires a user to create an account and you need to redirect the user if they are logged in. With the new, improved, more flexible redirects in Next.js 10.2, this is a piece of cake.

Automatic Webfont Optimisation

When talking about WebFont, we are talking about those font that can not be pre-installed and must be downloaded by the browser before they are displayed on the website or webapp as the case may be. And 82% of web pages for desktop use web fonts and 80% of mobile page uses web font when working on mobile screens. Though sometimes we customise our own fonts when we are working on branding or when working on design screens for website. It usage fairly consistent around the world, with some few outliers.

The release of Next.js 10.2 has made it more developer friendly due to its supports to Automatic Webfont Optimization when working with web font not our own custom font. And the cool thing is that the Automatic Webfont Optimization currently supports Google Fonts.

But by default next.js still automatically inline font CSS during build time in our app developement.

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter"
  rel="stylesheet"
/>

The above example shows how it was implement in our web app or websites before the release of Next.js 10.2

// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal.....
</style>

Now if we look at the example above, we are going to notice the change between the first usage of google fonts and the second one. In the first example we added the link the normal way we normally use it in web apps or any websites passing it using the link tag.

But now the release of Next.js has made it available for us to use it directly or together with the style tag. We can see that on the second example, the way we passed the google font using the data-href attribute for style tag.

What the attribute does is that, it automatically optimise the webfont before the page finish loading together with the style.

Conclusion

The release of Next.js 10.2 brought about many update and improvement to the framework, and we were able to look at the improvement one after another. The cool thing about this framework I like on much it the Automatic webfont optimisation feature that was added to the new version. This upgrade was Introduced April 28, Next.js 10.2. And another cool thing is that, its use of Webpack 5 helped in improving disk caching, which allowed the compiler to persist work between build runs files. That is because only the changed files will be recompiled after that.

BUILDING A BOOK FINDER APP USING GOOGLE BOOK API

favour vivian woka — Wed, 26 Feb 2020 22:08:39 +0000

We will be building a simple **Book Finder App** that allows users to search and know more about there favorite books. Now let’s write some code!

As you may already know, Angular massively use rxjs behind the scene to handle all sort of asynchronous tasks like Http request, reactive forms, emitting events…etc. You can make the most of the Observables to write less code, and make your workflow easier.

First, create a new Angular project using CLI, make sure you have the latest version of Angular CLI installed

npm install -g angular-cli
ng new BookFinderApp
cd BookFinderApp & npm install
ng serve -o

A local development server will start, you can navigate to in your browser on (http://localhost:4200.)

Creating the search component

Now we are going to create our search component and add to it the simple Html code.

ng g component new

this command will create all the component related files and put them into the newly created view folder, in addition, to register the component in the AppModule so we can use it in the hole application.

Adding our Html

In the view.component.html file, add the HTML code :

<div *ngIf="!loading" class="container-fluid hero-page1">
  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <h1>Search to know more about your favourite books</h1>
        <input
          [formControl]="queryField"
          id="keyword"
          type="search"
          class="form-control"
          id="exampleInputEmail1"
          aria-describedby="emailHelp"
        />
      </div>
    </div>
  </div>
</div>

<div *ngIf="loading" class="container-fluid mt-4">
  <div class="container">
    <div class="row justify-content-start align-items-start mb-5">
      <div class="col-lg-12">
        <!-- <form [formGroup]="addForm"> formControlName="keyword"  required-->
        <input
          class="form-control"
          [formControl]="queryField"
          type="search"
          id="keyword"
          placeholder="search for artists..."
          typeahead-wait-ms="delay"
          autocomplete="off"
        />
        <!-- </form> -->
      </div>
      <div *ngIf="items" class="col-12 mt-5">
        <div class="row justify-content-around">
          <div
            *ngFor="let product of items"
            class="col-lg-3 col-md-6 col-sm-12 book-display"
          >
            <div class="image">
              <img
                *ngIf="product.volumeInfo.imageLinks.thumbnail"
                src="{{ product.volumeInfo.imageLinks.thumbnail }}"
                alt=""
              />
            </div>
            <div *ngFor="let aut of product.volumeInfo.authors">
              <span> Authors: {{ aut }}</span>
            </div>
            <div class="details">
              <span>Title: {{ product.volumeInfo.title }}</span> <br />
              <br />
              <a [routerLink]="['/new', combineSlug(product.id)]">Details</a>
              <a (click)="goToLink(product.volumeInfo.previewLink)">preview</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

it’s just a simple text input for search and a html tags which will host the search result suggestions and some tags that will display our request.

If you navigate to localhost:4200 you should see the form input which does nothing at the moment.

Bringing some data

For the purpose of this tutorial, I’ll use the Google Book API to have a real database for the search. In order to know more about Google Book API, click on the above link.

Google Book API is intended for developers who want to write applications that can interact with the Books API. Google Books has a mission to digitize the world's book content and make it more discoverable on the Web. The Books API is a way to search and access that content, as well as to create and view personalization around that content.

Using the API

The Google Books API Endpoint is: https://www.googleapis.com/books/v1/volumes?

The API has a lot of parameters that we can use, but we'll only need 3 of them which are :

q: the search query tapped by the user in the search input.

maxResults: The maximum number of results to return. The default is 10.

client_id: the client ID generated in your Google Books Console account.

In order to use the Google Books API, you have to create a developer account and register your app and also to generate an API-KEY.

Creating our search service

ng generate api service

This command will create an api.service.ts file in the app folder, and register this service as a provider in app.module.ts :

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";

@Injectable({
  providedIn: "root"
})
export class ApiService {
  key = "your_key";
  constructor(private httpClient: HttpClient) {}
  get(queryField: string) {
    return this.httpClient.get(
      `https://www.googleapis.com/books/v1/volumes?q=${queryField}&maxResults=39&keyes&key=${this.key}`
    );
  }
}

The service simply makes a GET request to the Google Books API, and return the search result as an observable.

Now that out our service is ready to make an API call, let now connect out search input and the google book API to send value to the database.

Implementing the search feature

Angular has observables behavior already available in a number of places. One of them is inside ReactiveFormsModules, which allows you to use an Observable that is attached to form input. To do that, we have converted our input to use FormControl which expose a valueChange Observable and be before we can use that, we have to import FormModule and ReactiveFormModule:

In the [app.module.ts] let import our FormModule and ReactiveFormModule.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
**import { FormsModule, ReactiveFormsModule } from "@angular/forms";**

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NewComponent } from "./new/new.component";

@NgModule({
  declarations: [AppComponent, NewComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
    // NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

In view.component.ts we have to import the API service which has our api call and also we have to import FormControl which expose a valueChange Observable.

import { Component, OnInit } from "@angular/core";
import { ApiService } from "../api.service";
**import {
  FormControl,
  FormGroup,
  Validators,
  FormBuilder
} from "@angular/forms";**

@Component({
  selector: "app-view",
  templateUrl: "./view.component.html",
  styleUrls: ["./view.component.scss"]
})
export class ViewComponent implements OnInit {
  items: any;
  loading;
  query: FormControl = new FormControl();
  constructor(
    private apiService: ApiService
  ) {}

  ngOnInit() {
    this.loading = false;
    this.query.valueChanges
    .subscribe( result => console.log(result);
  }
}

in the ngOnInit, we subscribed to the values emitted by the query and logged the results so that you can see the values emitted. Navigate to your browser and check the console to see the value.

If we observe while making our search, we notice that each time the input value changes Angular will fire off a request and handle the response as soon as it is ready. When we space without typing a word it still fires off a request to the server. We don't want it to send an empty value but a word and we don't still want it to fire a request immediately we type. We want it to delay a little before sending a request because we may be typing a long word.

The Solution Approach

Let’s think of an approach, after user types in a query of three characters then we can make an API Hit. In this case, only one meaningful Hit will be made instead of three. We can wait for the user to type the whole query first after that we can make an API call. But how can we do that programmatically? and also how to stop sending an empty value when we tab space without writing a word.

.replace() expression

view.component.ts

.subscribe((query: any) => {
 let te = query.replace(/\s/g, "");
}

In the above code we create a variable and set it to be equal to the value of what we get from our input and we use .replace(/\s/g, "") function to remove space and to stop our input from sending an empty value. But I know you would want to know what expression is that and why it worked. This explanation will help:

It's a regular expression where the \s means "match whitespace" and the g is a flag which means "global", i.e. match all whitespace, not just the first.

Let's remember that it was two problems we encountered and the above code solved just one and we are let with one.

Debounce Time

Debounce Time is the delay that we can add between event subscriptions. Like we can add Debounce Time of 1000 milliseconds which resets after every KeyUp event by a user, if the gap of time between KeyUp event exceeds the 1000 ms then we make a subscription or make API call.

view.component.ts

import {
  debounceTime,
  distinctUntilChanged,
} from "rxjs/operators";

ngOnInit() {
    this.loading = false;
    this.query.valueChanges
    .pipe(debounceTime(10000), distinctUntilChanged())
    .subscribe((query: any) => {
    let te = query.replace(/\s/g, "");
  }
}

If we try making a search now our input we stop sending an empty value and if we type a word it will wait for 1000 ms before it fires a request. I know we would ask why I added this distinctUntilChanged() and what it is.

Since we are reading the text while we type, it is very possible that we will type one character, then type another character and press backspace. From the perspective of the Observable, since it is now debounced by a delay period, it is entirely possible that the user input will be interpreted in such a way that the debounced output will emit two identical values sequentially. RxJS offers excellent protection against this, distinctUntilChanged(), which will discard an emission that will be a duplicate of its immediate predecessor. We added it to avoid that.

Adding our API endpoint to make a real search.

view.component.ts

ngOnInit() {
    this.loading = false;
    this.query.valueChanges
      .pipe(debounceTime(1000), distinctUntilChanged())
      .subscribe((query: any) => {
        let te = query.replace(/\s/g, "");
        if (te.length > 2) {
          this.apiService.get(query).subscribe((result: any) => {
            this.loading = true;
            setTimeout(() => {
              this.items = result.items;
              console.log(this.items);
            }, 3000);
          });
          console.log(query);
        }

        console.log(query);
      });
    console.log(this.query);
  }

Our autosuggest input should now be ready and it should make our request as it passes through the processes we set.

Project

Github
Demo App

Conclusion

Angular and RxJS really change the way we think about single-page applications since it handles events as a stream of data, on which you can make all sorts of data manipulation like debouncing, mapping to values, converting to promise…etc and we also learned how to use GOOGLE BOOK API.

UPLOADING AN IMAGE TO FIREBASE CLOUD STORAGE WITH ANGULAR

favour vivian woka — Mon, 17 Feb 2020 21:35:59 +0000

In this tutorial, we are going to learn how to upload an image to Firebase Cloud Storage from an Angular Project. We’ll be using AngularFire library for setting up Firebase in the Angular web application.

Firebase is Google's mobile platform that helps you quickly develop high-quality apps and grow your business.

Prerequisites
Setup Angular Project using Angular CLI
Setup Firebase (AngularFire library) in Angular
Create a firebase project
Project
Conclusion

Prerequisite

To work with this demo, you must have Node.js and Angular CLI installed on your system. If you are a beginner then you should check out this link to Download node.js

Enter the command below in your terminal to install the latest version of Angular CLI:

npm install @angular/cli -g

Create an angular project

To create a new Angular project, run the following:

ng new cloudstorage
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
cd cloudstorage

This command does the initial setup for our Angular projects and installs the dependencies specified in package.json. Then we switch to the new project directory.

Setup AngularFire library in your Angular Project

The next step is to install AngularFire library. On your terminal, run this:

npm install firebase @angular/fire --save

Once you are done with setting up the angular project next step is to create a connection between firebase and your angular project.

Create a firebase project

Go to Firebase console and create a new project.

Afterward, enter your project name, accept the terms and condition and click on create a project button.

Once your project is set up, click on your project and you’ll see your admin dashboard. Click project overview > project settings > add app. click on add app button, and fill in the necessary details and your firebase credentials will appear.

Copy your firebase credentials and open your Angular app. Go to src/environments/enviorment.ts and enviorment.prod.ts files in your project folder. Then add your firebase configuration details in both the environment files as shown below.

Now, import AngularFireModule and environment.ts in app.module.ts file, then declare AngularFireModule into the import array.

You can optionally use your FirebaseApp name with the itializeApp method

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { AngularFireModule } from "@angular/fire";
import { environment } from "../environments/environment";
import {
  AngularFireStorageModule,
  AngularFireStorageReference,
  AngularFireUploadTask,
  StorageBucket
} from "@angular/fire/storage";
import { ApiService } from "./services/api.service";

@NgModule({
  declarations: [AppComponent],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    AngularFireStorageModule,
    AngularFireModule.initializeApp(environment.firebaseConfig, "cloud")
  ],
  providers: [
    ApiService,
    { provide: StorageBucket, useValue: "your" }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now you are all set to use Firebase storage in your Angular App. Let’s move over to our app.component.html. You can delete all the default code init except this code below.

<router-outlet> </router-outlet>

then we can now add our input tag which we will use to select our file from our computer and bind it to a function whenever the file selected changes.

<div class="form-group col-12">
 <input type="file"
 id="file"
 #userPhoto
 (change)="onFileSelected($event)"
 name="image"
 autocomplete="off"
 />
</div>
<router-outlet> </router-outlet>

We now write the javascript code that will run the upload method in our app.component.ts
app.component.ts

import { Component } from "@angular/core";
import { ApiService } from "./services/api.service";
import { AngularFireStorage } from "@angular/fire/storage";
import { map, finalize } from "rxjs/operators";
import { Observable } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  title = "cloudsSorage";
  selectedFile: File = null;
  fb;
  downloadURL: Observable<string>;
  constructor(private Api: ApiService, private storage: AngularFireStorage) {}
  ngOnInit() {}
  onFileSelected(event) {
    var n = Date.now();
    const file = event.target.files[0];
    const filePath = `RoomsImages/${n}`;
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(`RoomsImages/${n}`, file);
    task
      .snapshotChanges()
      .pipe(
        finalize(() => {
          this.downloadURL = fileRef.getDownloadURL();
          this.downloadURL.subscribe(url => {
            if (url) {
              this.fb = url;
            }
            console.log(this.fb);
          });
        })
      )
      .subscribe(url => {
        if (url) {
          console.log(url);
        }
      });
  }
}

To upload a file to cloud storage you first create a reference to the full path of the file, including the file name.

In the above code, we start by declaring a variable to hold the filePath where the images will be stored in the cloud and we declared another variable fileRef which points to the path where the image is stored and the task variable holds different properties of the upload state like the total bytes of the file to upload, how many bytes have been uploaded and more. We can use these to upload a progress bar to notify the user of how much of the file has been uploaded. After that, we get the image URL by calling .getDownloadURL() and we can now pass it to our API endpoint.

If everything was done correctly, our app will be ready to make our first upload. We can test it to know if our code is working by running:

ng serve -o

If our app is done serving you can now open the app in your browser using this URL: Localhost:4200 after that open your dev tool to see how the upload run and after running.

If you don't see that in your console, you might have missed a step. Look through the steps again to see what you are missing out. But if you see that it means your code is working and if you go to your firebase storage, you will see the image you uploaded.

Project Files

Click on the below button to get the code files from Git repo.
github

Conclusion

In this tutorial, we talked about Google Firebase Cloud Storage and its powerful features. We have learned how to create a firebase project. How to setup firebase services in your Angular project, and how to upload an image to Firebase Cloud Storage. I hope you love this tutorial. If you find this article useful share it to reach others.

DEV Community: favour vivian woka

5 Steps On how to add bootstrap to an Angular application.

What’s new in Next.js 10.2

BUILDING A BOOK FINDER APP USING GOOGLE BOOK API

Creating the search component

Adding our Html

Bringing some data

Using the API

Creating our search service

Implementing the search feature

The Solution Approach

.replace() expression

Debounce Time

Adding our API endpoint to make a real search.

Project

Conclusion

UPLOADING AN IMAGE TO FIREBASE CLOUD STORAGE WITH ANGULAR

Table of Contents

Prerequisite

Create an angular project

Setup AngularFire library in your Angular Project

Create a firebase project

Project Files

Conclusion