-1

I have this contact form : 

    <form id="contactForm">

    <div class="alert" style="display:none;">Votre message a bien été envoyé!</div>

    <label for="name">Votre nom</label>
    <input type="text" name="name" id="name">

    <label for="email">Votre adresse mail</label>
    <input type="email" name="email" id="email">

    <label for="message">Votre message</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Envoyer</button>
</form>

and I have initialized firebase in a JS file : 

config = {
  apiKey: "AIzaSyBjG8pVZ9xg7v_TNDXNbIg7FC51RaMpdJM",
  authDomain: "contactform-2a547.firebaseapp.com",
  databaseURL: "https://contactform-2a547.firebaseio.com",
  projectId: "contactform-2a547",
  storageBucket: "contactform-2a547.appspot.com",
  messagingSenderId: "893979452513"
};
firebase.initializeApp(config);

Can I use my contact form in Angular? If yes, how do I do that?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Chloé
  • 155
  • 1
  • 1
  • 4
  • 2
    Why couldn't you? What happens if you try? – JJJ Aug 28 '18 at 11:58
  • Welcome on Stack Overflow. Be careful about copy/pasting sensitive data like you just did (API keys, etc...). You should anonymize it as much as you can before posting it on a public website. – Guerric P Aug 28 '18 at 12:10
  • 2
    @YoukouleleY it's not that big of a deal. Check this https://stackoverflow.com/a/37484053/2530536 – Tim Martens Aug 28 '18 at 12:16

1 Answers1

0

Using a Firebase database with your Angular website is surprisingly easy.

1. The first step is knowing how to reference the database so you can use it.

You have already initialized your Firebase DB so this is good. I would put this code snippet in whatever typescript component you want to communicate with the database.

firebase.database() is how we will reference our database.

The Firebase database has a tree structure with a set of nodes where each node can have a child node. Each node can be referenced using the ref() method, so

firebase.database().ref(node) is how we will reference a node.

For example we can reference (or create if it didn't already exist) a node called "messages" by writing

var ref = database.ref("messages");

and the variable ref will reference it.

2. Every time we want to put new information to a node we can use the push() method.

For example, if we want to push a string to our "messages" node, we can write:

ref.push("hello world");

This will make a new child node under "messages" with the string "hello world".

You can also use this to push an object with multiple variables instead of just a string to get all the information you need in a single node.

Your database.rules.json file lists who is able to read or write to your database. You can either change this manually in the file or go to Database > Rules in your Firebase console view.

Read more about database rules here: https://firebase.google.com/docs/database/security/

If it is still unclear this video is a robust introduction to Firebase databases: https://www.youtube.com/watch?v=7lEU1UEw3YI

mahval
  • 2,133
  • 1
  • 18
  • 25