Coding-zon Programming Tutorials

           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/test.component' ; @ NgModule({ declarations: [ AppComponent, TestComponent ], imports: [ BrowserModule,

    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: item-detail works! Today'

  Searchable Dropdown Demo   Select2 plugin is a jQuery based plugin and replacement for select boxes. It supports searching in the list, finding remote data sets, and pagination (infinite scrolling) of results. Select2 supports the ability to add options dynamically as the user is typing into the search field. It also supports multi-value select boxes. In this tutorial, You are going to learn how to create a basic version of dropdown with a search box using the select2 plugin and read the selected option and print it in PHP.   Step-1 First, create a PHP page withe name index.php with a basic HTML code and add the following links in head section.: <!-- jQuery --> <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script> <!-- Select2 plugin --> <link href= "https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel= "stylesheet" /> <script src= "https

  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 the below tag in test.component.html. <p> test

    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 clicked!"