Posts

Showing posts with the label Angular 5

Angular2 Popup Modal Window

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

Working with Angular 5 Components

Image
Hey all. From the previous article we got to know the way of creating an Angular5 Project.Today we will be looking forward on Angular Components. In Angular, a Component is a special kind of  directive  that uses a simpler configuration which is suitable for a component-based application structure. As an example we   can create separate components for header, sidebar and footer of a web project. So that we can easily call them anywhere in our project. First lets look at the Angular Directory Structure. In here all the workings in the project is done in the src folder .If we go through the src folder we can see an app folder in it.components are there in the app folder. The front view of the project is designed from the app.component.html file which is in the app folder.All the css changes are done by css file in it. Now create a directory to store all components you create in the app folder.The directory structure will looks like, Now le...

Create your first Angular 5 project

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