Coding-zon Programming Tutorials

    AngularJS Navigation Tutorial     Angular provides a separate module, RouterModule to set up the navigation in the Angular application. Let us learn the how to do the routing in Angular application in this chapter. It does moves from one view (list of expenses) to another view (expense details). Let us create a new application   C:\> ng new routing-app  Angular CLI generate a new module, AppRoutingModuele for routing purpose. The code looks as follows − import { NgModule } from '@angular/core' ; import { RouterModule, Routes } from '@angular/router' ; const routes: Routes = []; @ NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })   export class AppRoutingModule { } above code, Imports RouterModule and Routes from @angular/router package. RouterModule allows configuring and execute routing in the application. Routes is the type used to setup the navigation rules. Routes is the local variable (of type Route...

    AngularJS Form Validation Tutorial     Form validation is mandatory for any web application.  To validate whether the user input is in correct format or not.     RequiredValidator & PatternValidator   1. RequiredValidator  How to use required field validation in angular. Create a component with the name formval. c:\>myapp>ng g c formval 2. PatternValidator PatternValidator is used to validate regex pattern. In the given code pattern validator used to perform email validation.  In the below code, email pattern validator added inside the Validator. Example:   open up formval.component. ts file and add the code   formval.component.ts import { Component, OnInit } from '@angular/core' ; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms' ; import { ReactiveFormsModule } from '@angular/forms' ; @ Component({ selector: 'app-formval' , templateUrl: './formval.component.html' ...

    AngularJS-14 Tutorials     Angular-JS Introduction   Angular-JS Project Structure     Angular-JS Components      Angular-JS Data Binding   Angular-JS Directives   Angular-JS Forms

           Using Forms in AngularJS   Forms are used to accept data from the user. In angular, you can create 2 types of forms      1. Template driven forms.      2. Reactive forms.   In this blog, you are going to learn How to create AngularJS Template driven forms. So First of all   1. Create an App         C:\> ng new forms-app         C:\> cd  forms-app 2. Create a component test         C:\> forms-app>  ng generate component test     3. Configure forms in app.module.ts file. import { Component, NgModule, OnInit } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import {FormsModule, NgForm} from '@angular/forms' ; import { AppRoutingModule } from './app-routing.module' ; import { AppComponent } from './app.component' ; import { TestComponent } from './test/te...

    Sending data to a Child Component Configuring the child component import Input and then decorate the property with @Input(), as in the following example.   src/app/item-detail/item-detail.component.ts import { Component, Input } from '@angular/core' ; // First, import Input export class ItemDetailComponent { @ Input() item = '' ; // decorate the property with @Input() }      Next, in the child component template, add the following: src/app/item-detail/item-detail.component.html <p> Today's Product is : {{item}} </p>   Use property binding to bind the item property in the child to the currentItem property of the parent. src/app/app.component.html   <app -item-detail [ item ]=" currentItem " > < /app-item-detail> In the parent component class, designate a value for currentItem: src/app/app.component.ts   export class AppComponent { currentItem = 'Television' ; }         Result: it...

  Types of Angular Directives      There are 3 types of directives in AngularJS.   1. Structural :   Changes the structure or layout of DOM   ex: ngIf, ngFor, ngSwitch   2. Attribute : Change the appearance/behaviors of the DOM by modifying DOM element's attribute value. ex: ngClass,ngStyle 3. Component : with its own template Class binding: Class binding is used to bind the data from component to HTML class property. The syntax is as follows −   1. Structural Directives Changes the structure or layout of DOM by adding or removing the DOM element in template or HTML document. It is prefixed with * sign. ex: ngIf, ngFor, ngSwitch.   Angular provides many built-in directives, and you will learn them in later topics. NgIf directive: NgIf directive is used to show or hide data in your application based on the given condition,  It can be applied this to any tag in a template. Let us try ngIf directive in our test-app component. Add th...

    AngularJS Data Binding Tutorial       Data binding shows how to bind your data from component to HTML DOM element. It allows interacting easily with the application. In this tutorial you will learn how to bind component property to other elements such as template, CSS etc.   Table of Contents Event binding Property binding Two-way data binding Attribute binding Style binding Class binding     Event binding   // src/app/app.component.html   <h2>Event Binding< /h2> <button class = "btn btn-primary" (click)= "showData($event)" >Click Here </button>       // src/app/app.component.ts import { Component } from '@angular/core' ; @ Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { title = 'My First APP in AngularJS14 ' ; clickMe($event: any){     alert( "button is ...