CodeCircle

Hey...!! It's been a while since I posted my last article in CodeCircle. In web development,when fetching data from the database we use for loops basically.Use of  for loops can be easily done using *ngFor in AngularJS. Lets see how we can easily use this in implementation. Set up your Angular environment as we did in previous articles. Now lets try simple examples to get aclear idea of using *ngFor. Example 1 :Print Set of fruits  Define an array of fruits in your app.components.ts file as below. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public fruits = ['Apple', 'Grapes', 'Lemon', 'Oranges', 'Papaw']; } Now write the code for the *ngFor in your app.components.html file. <p *ngFor="let item of this.fruits">{{item}}</p> Outpu...

In order to use Firebase as your database in Angular2 project it is essential to import AngularFire2 library to your project.For this you can refer the GitHub documentation   and get an idea. At first you have to import the library using the following code. npm install firebase angularfire2 --save Now move on to your app.module.ts file of your project and import the library. using the below code. import { AngularFirestore } from ' angularfire2/firestore ' ; And then you need to export the configuration in the same file.Use the below code to change according to your project. export const   firebaseConfig={ apikey :'', authDomain:'', databaseURL:'', storageBucket:'', messagingSenderID:'' }; Obtain the configurations according to your project through your firebase project.There you will get a similar window as below. Now import the Module using the following code. AngularFireModule.initializeApp(firebaseConfig...

In order to work with different modules in your web project it is essential to create Routes so that you can easily navigate through your navbar components or sidebar components.This article will help you to get through navigation by importing RouterModule.Make sure that you have installed Angular CLI. Import RouterModule To import RouterModule move on to your app.module.ts file and import using the following code. import { RouterModule,Routes } from '@angular/router'; Then add the RouterModule to the imports which in the below of the same file. RouterModule.forRoot(appRoutes) Now create the path to your HomeCompoent.The directory structure of my project is below. Here I have created components called home,addstudent and viewstudent. The paths for those components are created as below. const appRoutes:Routes = [ {path:'',component:HomeComponent}, {path:'add',component:AddstudentComponent}, {path:'view',component:Viewstudent...

AngularJS is a very popular Javascript framework that is used when adding java script to web project.It is mainly used for Single Page Applications(SPA) and very easy to learn. Set Up you Environment In this article I will be using Angular stable (v5.2.1) version.You can easily get this version from  angular.io . In the sidebar you can see the angular versions and you can select the particular version there.Then you will need to install the angular CLI by using npm command.For this you should have installed  node.js to your system first. After the installation you can run the npm command in your command line by copying the command from the angular guide . Now you can create your new project. Select the particular folder to create the project from the command line and type the following code. ng new my - app Here my-app is my project name and you can use any name you prefer. Directory structure of the project is given below. ...