A Developer THOUGHT

H iding 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

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 installation Go 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.  Chrome Xdebug Helper   Firefox The easiest Xdebug Safari Xdebug Tog

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,

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

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

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 Forms Model Driven Forms to 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