Coding / Programming Videos

Post your favorite coding videos and share them with others!

@004 Creating Navbar in Angular 5 with Boootstrap | Hindi

Download Video link >

@004 Creating Navbar in Angular 5 with Boootstrap | Hindi

Creating Navbar in Angular 5 with Boootstrap | Hindi
Creating the Angular 7 Project
In this tutorials, I will show you , how to create login and sign system using Angular 5 , Bootstrap and firebase. For sign-in purpose I used firebase and as a css framework , I used Bootstrap 4.
First Of all I create a angular project with angular/cli. If u use angular/cli , it become very easy to create a basic angular project. Then I install bootstrap by using node packege manager . Also Install Jquery with node.
In the above code, we created a new Angular app using angular-cli. We moved into the directory and we served the application using the ng serve command. Also, we pulled in FontAwesome library so we can take advantage of its icons.
After this step, if your browser does not automatically open, visit http://localhost:4200
Include bootstrap and fontawesome in your app by

Then I create three component 1) Navbar 2) SIgnUp 3) Login . Updated these component in app.module.ts file.
We need a Homepage, Login page, and Sign Up page to showcase how our Angular 5 Authentication is working, so we need to create an Angular component for each of these pages. We will use one of the features that makes Angular IDE so awesome – the Create Component shortcut. Navigate to File – New – Component to create a new component.
ext, we will create the other two components needed to run the app and then install AngularFire2 and Firebase. Instead of using the wizard, this time let’s do this with the command line. Open the Terminal+ view, make sure the AngularAuth project is selected in the Project combo and execute the following command:
ng g c login –spec false && ng g c signup –spec false && npm install firebase angularfire2

Adding Firebase Authentication
Firebase is a mobile and web application development platform. Firebase was acquired by Google in 2014, and continues to be developed under the Google umbrella. Firebase provides NoSQL databases (RTDB, or Realtime Database and Cloud Firestore, in beta at the time of writing) hosted in the cloud and connected using web sockets to provide realtime capabilities to apps.
Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, Github and more.
We will be using the official tool for Angular and Firebase integration – AngularFire that allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database. We will also be using Angular IDE through this tutorial, though you can use Webclipse or MyEclipse too, following exactly the same steps. Ensure that the latest version of Angular CLI is installed on your computer. You also need a Google account to be able to sign in to Firebase Console, where you will be creating the app that we will work with, in this tutorial.
FOr authontication process , I used Firebase which is googles product. It is very to implement firebase in our project. Firebase provides backend services that will drastically decrease the complexity of handling user authentication with Angular 4+ for both mobile and web applications. With Firebase, authentication and all backend related tasks can be easily implemented in your Angular project. If you don’t already have a Firebase setup, you simply need to head to your Firebase console and click on Add project then follow the steps to create a Firebase project. Enter a name for your project, accept the terms and click on the blue Create project button: Once your project is created, you need to click on it to go to the admin dashboard for that particular project. On the dashboard, go to Develop – Authentication and click on the Web setup button. A popup window will be opened that contains your firebase credentials:
Back in the Firebase Console, click Add Firebase to your web app to get a popup similar to the image below. Copy the config object from this popup, we’ll be using it in our Angular application.

In this tutorial, you learnt how to make login page using Angular and Firebase. You learnt how to create a web app using Angular CLI and import the required AngularFire and Firebase module. Using the AngularFire and Firebase module you implemented the login page.
For any queries feel free to comment or send a mail on [email protected]

Facebook Page:
Facebook Myself:
email : [email protected]
Mobile : 84213333417
About : {{ Webcode }} is a YouTube Channel, & all about Polytechnic , BCA, BCS, MCA Video Tutorials
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.




View Comments source >

Leave a Reply

Please Login to comment
Notify of
Translate »