Welcome To Learn Today

        A ng-model is a form input property to two-way bind in a form control model. We are declared n number of ng-models, This model requires a validation for directive and component side also. Most of the user experience is apply with in directive because of didn't ready to waste the time to submit a form and validate in server side.        In line validation, the very important role is played in angular and bootstrap framework. This form validation is declared a mandatory property in mg-model means bootstrap is binding in a directive for a hash class in angular. Form Validation states: State Class if true Class if false The control has been visited. ng-touched ng-untouched The control's value has changed. ng-dirty ng-pristine The control's value is valid. ng-valid ng-invalid Example: < input   type = "text"  # myNameRef = "ngModel

From: A form contains various input components like text, option, select option and pickers. This input component behavior is manipulated into Form.  A form is operated to two-way data binding , validation, event binding and error handling while submitting the form or inline validate. Template Driven form: A Template Driven Form creates a set angular structure based directives. Example: I create execute the following angular-CLI code:  ng g component tempdrivenfrm Now, the template driven component is created successfully.  We write a logic for the corresponding files. HTML: <form #usrfrm="ngForm" (ngSubmit)="userFormSubmit(usrfrm)"> <div class="form-group"> <div class="form-group">     <label>User Name</label>     <input type="text" #myNameRef="ngModel" required minlength="5" class="form-control" name="name" ngModel>  

        Consider angular 1 is a great feature for two-way data binding system. It's very helpful to access a variable in a directive and modifying value shows the user view or web view.          In this feature is not available in angular > 2.0 greater than version because of here not in a use of the directive structure. So In this feature will implement angular 2 means, we require to know the event and properties binding details. Properties binding: [] : -  The behind of the symbol to binding a property in HTML element of view page in angular 2. Example: <input type="text" name="firstname" [ngModel] = "firstName"> The above line of code is firstName value is to bind ngModel of an input element. Event Binding: () : - The behind of the sysmbol to binding an event in the included HTML element in angular 2. Example: <input type="text" name="firstname" [ngModel] = "firstName" (onClick)

         Before we start the angular development, we need to install node setup to your environment. Please download node  latest version and install it. Once installed it, you will open a terminal or command prompt to type the following command.        node --version The above command was shown installed node version details. Then install for AngularCLI for globally.       npm install -g @angular/cli Create a new Project Generate a new project by using angular cli. We execute the following command         ng new welcometolearntoday  Fig: Then automatically Angular related packages are generated. the following image is shown the list of file names are generated. Fig: Then go to project folder: cd welcometolearntoday  now start to run the angular application ng server --open Now, the following url is generated and open the browser. http://localhost:4200/ Fig:

Speed and performance: * Today we are not ready to write a bundle of code in application development so framework will support to make easy. * We are integrating any different type of server platform to develop admin dashboard view(ex java, php and .Net). * Angular code is split different type of names(component, model, service) and easily load. Cross Platform: * Angular is a support to progressive web application development and zero step installation. * In this platform is supported to develop  Ionic  and NativeScript  projects. * Angular also support to develop a desktop application in various platforms like Mac and Windows environment. Productivity: * Quickly create the powerful UI templates in angular. * Angular-CLI is the support to auto-generated related package files. Full Development story: * It will support karma and unit testing script. * Animation related application development and choreographies.