Skip to main content

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








Popular posts from this blog

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 …