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...

If you are familiar with SQL, you might have written queries to fetch data using a single table. But SQL joins are used to fetch data from two or more tables. This can be considered as one of the most benefited features enable in SQL. Lets see how we can use SQL joins to fetch data . Rather than storing the same data in multiple tables,by using this method one table will keep a reference to a ID of the other table. This approach is more efficient  and lets see we can do this using SQL joins. Types of Joins In MySql we can see there are mainly three joins , INNER JOIN LEFT JOIN RIGHT JOIN 01. INNER JOINS In INNER JOIN,  the query selects all the rows from both tables where there is a match between the columns in both tables. SQL Query SELECT column_name(s) FROM table1 INNER JOIN table2 ON table1.column_name=table2.column_name; Here the INNER JOIN is Specified by the ON keyword which is in the syntax. Example : Lets see How t...

Microservice Architecture or simply Microservices, an emerging technology grown popular in recent years which is used in software development.The article will help you to get to know about Micro Services. This architecture is helpful for the deployment of large complex applications also support for range of platforms and devices like web,android,Internet of Things and wearables .  The large complex applications are deployed into small modules which runs separately as unique processes.So basically using Microservices you can easily use any of the technologies as the development is done separately as a module.  The communication among the modules are done considering the requirements of the business goal. Here HTTP/REST with JSON is mostly used. Examples  Netflix eBay Amazon Twitter PayPal Soundcloud   and many of the other applications have now moved to microservices from Monolithic Architecture where they have decompose...

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...

From previous articles we went through a brief introduction on Firebase. After creating the database to the project the data should be added to the database.Now connect your firebase project with your web project. Now in your firebase dashboard click the database tab.Now you will get a similar window given below. Click real time database as we are creating a realtime database.Now you will get the below window where an object of the web project is already created. Now click the the plus mark which is on the object to create a new table. Here you have given two fields on Name and value. you have to enter the name and the value.And also the Firebase database is a similar to a tree diagram where you should create your tables based on it. As an example I will create my database based on the tables given below.  Given below is my created database based on the above two tables. If you click a particular key that you have created, the link above will automati...

Popup Modals are nowadays come in to play in a handy way which can be seen in most of the modern web applications. These Popup modals are usually come as a form, as confirmation message or can be used for many other activities in the web application. Though creating a Popup  modal is not a very big deal this article will help you to get to know how to create a popup model  in Angular. Go to your Angular project folder and you should import Popup library to your project. npm install ng2-opd-popup --save Now run the project. Now copy the following import code from the npm guide  and paste it in app.module.ts import   { PopupModule }   from   ' ng2-opd-popup ' ; Also you have to paste PopupModule . forRoot ( ) inside the imports in the same file. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http...