Posts

Showing posts with the label Angular 2

Hide the navigation bar in jHipster Angular 2

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

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 - Template Driven Forms

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