Tag: angularjs4

How to add font-awesome in angular 4/5/6?

Angular, Frameworks
How to add font-awesome in angular 4? Font-awesome is for awesome icons to display across the applications like calendar icon/delete/edit/loading icons and many more. It's just a 3 simple step process to add and make use font awesome in angular 4.   Step 1: Install font-awesome npm install --save font-awesome angular-font-awesome   Step 2: Check the path to confirm the installation: node_modules\font-awesome\css should have font-awesome.css and font-awesome.min.css files.   Step 3: Add font-awesome.css to your angular-cli.json file ../node_modules/font-awesome/css/font-awesome.css "styles": ["../node_modules/font-awesome/css/font-awesome.css", "styles/app.scss" ],   Now you can use fa tags inside any of your template files in the application level...

Block UI in Angular 4/5/6 Example

Frameworks
Block UI in Angular 4 Example: In our last post, I have explained how to use ng-spin-kit spinner component to display loading/spinner icons. But it was not blocking the UI, so user may abrupt while loading the data. So it is highly recommended to block the UI whenever some data loading happening to avoid unexpected system behaviours. ng-block-ui is the best available angular component to block ui in angular 4.   Step 1: Install ng-block-ui [plain] // Angular 2.x npm install ng-block-ui --save -- or -- // Angular 4.x npm install ng-block-ui@next --save [/plain]   Step 2: Import BlockUIModule to your module   [html] import { BlockUIModule } from 'ng-block-ui'; @NgModule({ imports:[BlockUIModule], declarations:[] }) [/html]   ...

Angular 4/5/6 Loading / Spinner ng-spin-kit component Example

Angular, Frameworks
Angular 4 Loading / Spinner ng-spin-kit component Example: It is our responsible to show the user about the process to make them understand what is happening currently. So loading/spinners are widely used to show the current progress (using progress) or normal loading icon. Today we are going to see how to use ng-spin-kit angular spinner component to show while data loading is in progress. It can even be achieved with normal CSS or HTML 5 animation with hidden angular attribute. If you are looking for more optioned dynamic / more interactive spinners, then it is good to go with already available angular components. As on Aug 30 2017 these are top 3 spinners available for angular 2+ with more stars: WoltersKluwerPL/ng-spin-kit - 63 stars (Typescript) kuuurt13/ng-block-ui - 21...

Best Datepicker for Angular 4/5/6 with Bootstrap projects

Angular, Frameworks
Best Datepicker for Angular 4 with Bootstrap projects: I am so tired after spending lot of hours, lot of tries for a good date picker for my current angular 4 project. Problem I faced is, there is a lot of datepicker available and even all are with angular-cli, but few are not having proper documentation, few are not fully customizable, few are not working all the time/all the scenario and finally I am proceeding with ngbootstrap datepicker only. Of course, I could not get much help for ngbootstrap as well from online or QA forums like stackoverflow, but I personally feel it is more stable than other datepickers availble and documentation is comparatively good. Also it is updated with bootstrap 4!. Let's start with the datepicker! Here you will learn, 1. How to setup bootstr...

Multi select dropdown in Angular 4 Example

Angular, Frameworks
Multi select dropdown in Angular 4 Example:   Step 1: Install angular2 multiselect dropdown component npm install angular2-multiselect-dropdown   (or)   npm i --save angular2-multiselect-dropdown     Step 2: Import AngularMultiSelectModule  into @NgModule   [html] import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown'; @NgModule({ // ... imports: [ AngularMultiSelectModule, ] // ... }) [/html]     Step 3: Import and use it in your Component   [html] import { Component, OnInit } from '@angular/core'; export class AppComponent implements OnInit { dropdownList = []; selectedItems = []; dropdownSettings = {}; ngOnInit(){ this.dropdownList = [

Angular 4/5/6 Datatable with angular2-datatable [Sorting/Pagination/Rows Per Page]

Frameworks
Angular 4 Datatable with angular2-datatable [Sorting/Pagination/Rows Per Page]: I was looking for a good datatable with sorting/searching/pagination like jQuery datatables.net. We have datatables.net available even for angular-2, but it has some open issues also its not the official one. So I came across a datatable angular2-datatable, it is actually good, but we don't have inbuilt searching option. But I personally feel, the searching is not required as enterprise applications will have more than one search field and we need to provide the search results with "and conditions" whereas datatables.net searching and all returns with "or condition" only.   Step 1: Installing angular2-datatable npm i -S angular2-datatable   GitHub Link   Step 2: Import angular2...

Angular 4/5/6 + Spring Boot CRUD Example

Angular, Frameworks
Angular 4 + Spring Boot CRUD ExampleAngular 4 + Spring Boot CRUD Example Angular 4 through Angular-CLI(command line interface) is becoming popular and with spring boot lot of projects started fresh developments and started their migrations to these technologies. What are we going to achieve: 1. Angular 4 UI 2. Spring boot rest API 3. CRUD(Create,read,update,delete) Operations. Requirements: 1. NPM should be installed. 2. Angular-CLI should be installed. 3. Spring STS for spring boot application development. (Eclipse is fine, but still spring sts make our job very easy!).   Module & Functionality: Affiliate Network is the module and it will have basically affiliate network name, shop name identity, shop home url and shop home url affiliate link...

Ngx-datatable with Angular 4/5/6 Example

Angular, Frameworks
Ngx-datatable with Angular 4 Example: I have been searching for a best datatable with features like sorting, searching, pagination, rows per page etc.. to use in my angular projects. I am a big fan of datatables.net datatable, but unfortunately with angular it is not working properly (the issue i faced in datatables.net with angular is after sorting/any operations datatable will become empty, raised question to the datatables.net team, but no reply :( ). Datatable which I am using now: ngx-datatable   Why I am using ngx-datatable? I came across lot of datatables and finally used this by comparing the features and easiness to use than other datatables. Also it remains top in github with more star rating as of July 2017. The issue I am facing with ngx-datatable: T...

Adding Angular4 + Typescript in Spring STS Eclipse

Angular, Frameworks
Today we are going to see how to add angular 4 + typescript 2.2 plugins in eclipse, here spring sts eclipse.   I am assuming you already have spring STS in your machine, if no download it from the below link.   Spring STS Download   Step 1: Open Spring STS       Step 2:  Go to Help -> Eclipse Marketplace and search for "Typescript"           Step 3:  Click intall and in the next screen select all and confirm       After the restart you will be able to see Angular Icon as well in spring sts.     Start doing angular + typescript coding!   http://www.ngdeveloper.com/best-tool-for-spring-mvc-project-developments/   &nb

Bootstrap 4 + AngularJS 4/5/6 Integration & Simple Demo

Angular, Frameworks
Bootstrap 4 + AngularJS 4 Integration & Simple Demo: Few days back we have seen how to add bootstrap 4 to angular-cli project. Today we are going to see some simple demo and use of the same.   If you are unsure about how to add bootstrap 4 to your angularjs 4 project, then follow the steps in the below post.   http://www.ngdeveloper.com/add-bootstrap-4-angular-cli-project/   Without Bootstrap:       With Bootstrap 4:     .angular-cli.json file: [added scripts and css files] [plain] "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/tether/dist/js/tether.js", "../node_modules/jquery/dist/jquery.js", "../node_modules/bootstrap/dist/js/boots...