Skip to main content

Posts

Featured post

Hide the navigation bar in jHipster Angular 2

Hiding a navigation bar is the easiest solution on Angular 2 version of jHipster. For this, you need to create a NavService and implement it on every component you need to show the navigation bar.


Let's first create a service in the directory of your navigation component resides.

import { Injectable } from '@angular/core';

@Injectable()
export class NavbarService {
  visible: boolean;

  constructor() { this.visible = false; }

  hide() { this.visible = false; }

  show() { this.visible = true; }

  toggle() { this.visible = !this.visible; }

}

There after you need to call this service on your navigation component constructor

import { Component } from '@angular/core';
import { NavbarService } from './navbar.service';

@Component({
  moduleId: module.id,
  selector: 'sd-navbar',
  templateUrl: 'navbar.component.html'
})

export class NavbarComponent {

  constructor( public nav: NavbarService ) {}

}

After the use, the above declared filed on your view in ngIf to show and …
Recent posts

Debug your Laravel Application on PhpStrom

Debugging is the key concept while we writing thousands of lines in code. In most of the cases, developers set the breakpoints and test the code it is work as expected. 
In PHP framework like laravel, normally we are using var_dump(), echo and dd command to see the values. But do you think it is a proper way to debug? 
In this session, I give you some few steps to debug your laravel applications using PhpStrom and Xdebug. Just follow the step one by one.
Download the Xdebug and Configure with your PHP installationGo to the Xdebug download page and download the proper version of xdebug of your PHP version. If you find difficult to find the correct version of Xdebug better go to custom installation instructions link on the same page. 
If you click the custom installation page follow the instruction to install Xdebug and configure it.
After that install the browser extension for Xdebug. 
ChromeXdebug Helper FirefoxThe easiest Xdebug SafariXdebug Toggler OperaXdebug launcher Internet ExplorerPhpSto…

Web Optimisation

Web optimisation is the key part of web development and it is the trick to increase the viewers count.

Seeing as 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load
Eliminating the unnecessary downloads.  

Web pages are the systems installation not required. They are always downloaded from the server and show the application view to the users. So if we are not optimised the page. It is downloading whole resources and shows to the users it takes more time. So we need more concern on optimising the downloads to the user what he really wants. 

Encode and optimise the transfer size.

Improve the page speed, we have to optimise the overall download size and minimised it by using the following techniques. 

Data Compression 

The next step in the optimisation is to compressing the resources the browser has ready to download. we are able to do the pre-processing to compress the resources like texts, images, videos and etc. on the…

Angular 2+ Forms - Validating the Template Driven Forms

In this mini session we are going to look after how to validate a template driven from in Angular 2 + application.

Here is the plunker :




Here we can able to use the 4 built-in type validation like HTML form validations. required, pattern,
minlength and maxlength


Angular 2+ Forms - Nesting Form Data

Another interesting part of the Angular 2 forms is Nesting the forms data. 

Example in complex forms like sign up form to getting lot of information from the users. It is easy to grouping the data into relevant groups. 

Let's go to the real feel. Check on the below plunker and you would be feel better on filling the group field and read the JSON response rather than read from the long list of JSON







Angular 2+ Forms - Template Driven Forms

Forms are doing a big job on I/O handling in a web application. Especially in Angular 2 application, we are using the NgForm directive to handling the normal forms with the more advanced feature enabled forms. 
In Angular 2, They introduced two types of modules to handle the NgForms. They are  Template Driven FormsModel Driven Formsto enabling this forms in your application, you need to import some modules. as follow in your root module. 

Here we are updating two modules from @angular/forms and we put the FormsModule and ReactiveFormsModule in the imports array.

After enabling the forms we are going to look after the template driven forms.

Template Driven Forms Template Driven Forms are enabling by importing the FormsModule in your app.module.ts,  We already show you how to enable it on above snippets. 
Here when you look on into the app.component.html 
Every form is an instance of the ngForm directive. Here the signupForm is the instance of the ngForm directive, not the form directive. …

Angular Stack -Introduction

Angular releases are making a massive amount of concern and breakdown changes on developer world. They have released the latest version as Angular 4. The major breakdown happens on Angular 2 and it completely changes the architecture of Angular. You don't need to know any syntax or concept from Angular 1 to be a fresh Angular 2 developer.

What’s new on Angular 2

Modular Architecture: This gives easy to create a big application in modular basis, this makes easier to divide works to work in parallel. This modularity makes easier to maintenance and scales up the project easier.

Better performance comparing with Angular 1: The change detection is improved and AOT compiler to big deals with the browser. It made to scale:
The core is module system
Dependency injectionSupporting to the Typescript and toolingSupports to CLI, Native script and more.A complete solution for production ready


Structure of Angular 2 Application

The structure of the Angular application module is pretty clear. The ap…