Browsed by
Category: Frameworks

Find all the Java/UI Frameworks.

[Updated] Adding Angular Material 2 to Angular 4 CLI

[Updated] Adding Angular Material 2 to Angular 4 CLI

Adding Angular Material 2 to Angular 4 CLI: Recently breaking changes has been made to angular material 2 as per this github link, so step to add angular material 2 to angular 4 cli is also changed. I have followed the new steps and it works fine without any issues. I have shared the step by step instruction below to add angular material 2 to your angular 4 cli. Breaking change high level: We used to import MaterialModule previously, now…

Read More Read More

1,100 total views, 3 views today

Picking Best UI Framework for Angular 4 Projects

Picking Best UI Framework for Angular 4 Projects

Picking Best UI Framework for Angular 4 Projects: I have been spending more than 2 weeks on picking best UI framework for my new angular 4 project. Unfortunately no straight forward conclusion. But I am sharing my complete analysis on this to help you guys for better UI pick for your angular 4 projects. Criteria to pick/select Best UI framework for Angular 4: Should be angular supportive (plain css UI frameworks needs lot of modifications when using with angular 4)….

Read More Read More

1,402 total views, no views today

Passing one component value to other component using Angular Observable

Passing one component value to other component using Angular Observable

Passing one component value to other component using Angular Observable: I have a sidebar component and store coupon component. In the sidebar I have radio options named, All Coupon Deal And in the store coupon component I have both coupons and deals listed. Now I would like to achieve, On click of coupon radio button in the sidebar component it should pass the value “coupon” to store coupon component and display only the coupons. On click of deal radio button…

Read More Read More

869 total views, no views today

Angular 4 Autocomplete using ng2-completer Example

Angular 4 Autocomplete using ng2-completer Example

Angular 4 Autocomplete using ng2-completer Example: Autocomplete is the important and most expected functionality in any end user application. Angular 2/4 has many ready-made components in github and npm repositories. Below is the one good component which I came across for autocomplete functionality, this can be easily integrated and used with your angular apps.   Step 1: Install ng2-completer component  npm install ng2-completer –save     Step 2: Import Ng2CompleterModule to your Module Import Ng2CompleterModule to your module or app module….

Read More Read More

1,767 total views, 1 views today

Scheduler in Spring Boot with 3 Simple Steps Example

Scheduler in Spring Boot with 3 Simple Steps Example

Scheduler in Spring Boot with 3 Simple Steps Example: Scheduler in spring boot became very simple and any one create a Cron job or scheduler in spring boot with just 3 steps. Step 1: Enable spring boot for schedules Add @EnableScheduling to your spring boot main class. @SpringBootApplication @EnableScheduling public class SpringBootStarter{ public static void main(String[] args) { SpringApplication.run(SpringBootStarter.class, args); } } Step 2: Create a cron job component: import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component; @Component public class CronJobSchedules…

Read More Read More

616 total views, 2 views today

Spring Boot + EhCache Hibernate Working Example

Spring Boot + EhCache Hibernate Working Example

Spring Boot + Ehcache Hibernate Working Example: When I was trying to populate JSON records in my angular app (just 1885 records only), it took around 11 seconds and in angular side I am just populating in the datatable. So I thought to implement ehcache with spring boot to make it faster. After implementing that successfully I am really surprised because it took around 300ms only to load same number of records (1885 records). Also no query will run from…

Read More Read More

832 total views, 1 views today

How to add font-awesome in angular 4?

How to add font-awesome in angular 4?

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”,…

Read More Read More

1,098 total views, 1 views today

Block UI in Angular 4 Example

Block UI in Angular 4 Example

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 // Angular 2.x npm install…

Read More Read More

2,359 total views, 2 views today

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

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

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

Read More Read More

1,181 total views, 2 views today

Best Datepicker for Angular 4 with Bootstrap projects

Best Datepicker for Angular 4 with Bootstrap projects

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,…

Read More Read More

1,601 total views, no views today