Home
Search results “Ng model options angularjs”
ngModelOptions: New in Angular 1.3
 
05:11
A quick intro to ng-model-options in Angular 1.3.
Views: 501 NetBeansVideos
Angular 6 Basics 18 - Two way data binding with ngModel
 
10:46
Access the full course here: https://javabrains.io/courses/angular_basics Learn how to use the `ngModel` directive to achieve two way data binding between the view and the component class. Learn how to bind a text input element to a member variable of your component class. Angular 6 Basics - Learn how to create Angular applications from scratch. Understand the Angular framework and learn how to use the features of the framework to create components and services. Use modules to organize your code. Build applications that call REST APIs and fetch data from a server. Implement routing to show multiple views with multiple URLs. This course requires no previous knowledge of Angular or AngularJS.
Views: 30174 Java Brains
Angular select options from array
 
07:54
Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-select-options-from-array.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-select-options-from-array-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video, we will discuss, how to get the select list options from an array in the component class, instead of having them hard-coded in the HTML. Step 1 : Create the Department class. Add a TypeScript file to the models folder. Name it department.model.ts. Copy and paste the following code. Notice the Department class has 2 properties - id and name of the department. export class Department { id: number; name: string; } Step 2 : Import the Department class. Include the following import statement in create-employee.component.ts file import { Department } from '../models/department.model'; Step 3 : Include the following array of departments in CreateEmployeeComponent class in create-employee.component.ts file departments: Department[] = [ { id: 1, name: 'Help Desk' }, { id: 2, name: 'HR' }, { id: 3, name: 'IT' }, { id: 4, name: 'Payroll' } ]; Please note : The "Department" type is not required for the application to work, but it adds great value during development. Using it provides us intellisense, error checking and type saftey. For the HTML used in the video, please refer to my blog link below http://csharp-video-tutorials.blogspot.com/2018/01/angular-select-options-from-array.html Code explanation: 1. On the "option" element we are using ngFor structural directive to loop over the array of departments we have in the "departments" property of the component class 2. For each "Department" object in the "departments" array, we get an option. 3. The option value is the department id and the display text is the department name 4. Notice the square brackets around the [value] property. This is property binding in Angular. We discussed property binding in detail in Part 9 of Angular 2 tutorial. If you remove the square brackets the value for each option will be the literal text "dept.id" instead of the department id (1 or 2 or 3 etc.) Property binding in Angular https://www.youtube.com/watch?v=RGYfTx9AAQA&list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6&index=9 5. To display the deprtment name we are using interpolation. We discussed interpolation in Part 8 of Angular 2 tutorial. Interpolation in Angular https://www.youtube.com/watch?v=2FkkAqFWRk8&list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6&index=8 6. Since ngFor is a structural directive there is an asterisk before it. 7. Structural directives modify the DOM, i.e they add or remove the elements from DOM. Adding and removing elements from DOM is different from showing and hiding. We will discuss all these in detail in our upcoming videos. At this point, when we select a department, the respective department id is included in the Angular generated form model. Along the same lines, when we click the "Save" button the respective department id is logged to the console. Please note : It is important that we include the ngFor directive on the element that we want to be repeated. In our case we want an option element for each department we have in the array. So we included the ngFor directive on the option element. If we instead include the ngFor directive on the "div" element that has the bootstrap "form-group" class, we get 4 department dropdownlists. That is one for each department in the array. So it is important we include the ngFor directive on the right element.
Views: 43718 kudvenkat
AngularJS Tutorial 3: ng-model and ng-bind directives
 
04:42
Learn basics of directives and what do ng-model and ng-bind directives do in AngularJS. SUPPORT ME :D on patreon: https://www.patreon.com/codedamn codedamn is a now free platform for developers to learn and establish their credibility. Ready to be among developers? Here you go: https://codedamn.com
Views: 108178 codedamn
November CincyNg: Forms and ng-model-options in AngularJs 1.3
 
44:02
Audio is messed up for the first 30 seconds.
Views: 431 Gaslight
Visual Studio Angular Tutorial 3-ng-model-options and ng-click(Angular For Beginners)
 
05:39
Simple applications by ng-model-options and ng-click on Visual Studio
Views: 19 Bilişim Eğitim
Angular 5: How to Bind/Get selected value/Set Default  in SelectList
 
08:42
In this tutorial, we will see how to : 1. Bind the data to the select list in Angular 5/4 using ngFor 2. To get the selected value from the dropdown list 3. To set the default value of the dropdown list 4. Call a custom function on the change event of the dropdownlist
Views: 34626 Techie Ocean
AngularJS Tutorial for Beginners - 9 - Forms and ng-model
 
06:24
Facebook - https://www.facebook.com/codevolutionweb Github - https://github.com/gopinav All about forms in AngularJS. AngularJS | AngularJS Forms | AngularJS Tutorial for Beginners
Views: 4300 Codevolution
Angular bootstrap select list
 
06:51
Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss 1. Working with a select list in Angular Template Driven forms 2. How to have one of the select list option selected by default 3. How to disable select list Let us understand working with a select element in Angular with a simple example. We want to include "Department" select list. For the HTML used in the demo, please refer to my blog using the link below http://csharp-video-tutorials.blogspot.com/2018/01/angular-bootstrap-select-list.html At the moment, we have hard coded the select list options in the HTML. In our next video we will discuss, how to get the select list options from the component class. Notice each option also has a corresponding value. The value is the department id which is what we want to save in the database table when the form is submitted. We will discuss, saving the data to a database table in a later video. At this point, when we select an option, the corresponding option value is included against the "department" property in the Angular auto-generated form model. Also when we click the "Save" button, the "department" property along with the selected option value is logged to the console in browser developer tools. How to have one of the select list option selected by default If we include "selected" attribute on one of the options of the select list, we expect that option to be selected by default when the form initially loads, but when the form reloads, the respective option will not be selected. If you remove the "ngModel" directive from the select list, then the the option gets selected as expected. In Angular, we use "ngModel" directive for two-way data binding. So the moment we put it back in place the "selected" attribute does not work. To make it work include "department" property in the component class and initialise it with one of the option value which you want to have selected by default. In our case, we want the "IT" option to be selected by default. The "IT option value is "3". So, I have initialised "department" property with a value of '3' department = '3' At this point you will have "IT" option selected by default when the form loads. Now, even if we remove the "selected" attribute from the "IT" option, it is still selected by default when the form loads. This is because of the two-way data binding that we get with "ngModel" directive. How to disable a select list : To disable a select element, use the disabled attribute Another important point to keep in mind. By default, disabled form controls are not included in the Angular auto generated form model. Since, the "department" select element is disabled, it will not be included in the Angular generated form model. In our form, we do not want the select element to be disabled, so please remove the disabled attribute. Also, we do not want any option to be selected by default, so remove the "department" property from the component class. In our next video, we will discuss, how to get the select list options from the component class, instead of having them hard-coded in the HTML.
Views: 29702 kudvenkat
AngularJS ng repeat directive
 
11:04
angularjs ng-repeat example ng-repeat simple example ng-repeat simple array angularjs ng repeat nested array angularjs ng repeat index example In this video we will discuss 1. ng-repeat directive in Angular 2. Nesting ng-repeat with an example ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstname Lastname Gender Salary This can be achieved very easily using ng-repeat directive. HtmlPage1.html : In the view, we are using ng-repeat directive which loops thru each employee in employees array. For each employee, we a get a table row, and in each table cell of the table row, the respective employee details (Firstname, Lastname, Gender, Salary) are retrieved using the angular binding expression. Nested ng-repeat example : The model contains an array of countries, and each country has an array of cities. The view must display cities nested under their respective country. Finding the index of an item in the collection : To find the index of an item in the collection use $index property To get the index of the parent element Use $parent.$index or Use ng-init="parentIndex = $index" Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/11/angularjs-ng-repeat-directive.html
Views: 366436 kudvenkat
AngularJS Tutorial - same ng-model on multiple elements
 
01:57
Facebook page: https://www.facebook.com/pages/WebTunings/339234242822202 Google+ plus.google.com/+webtunings Twitter: https://twitter.com/webtunings Code snippets: https://github.com/webtunings
Views: 7376 WebTunings
Angular value vs ngvalue
 
08:59
In this video we will discuss how to validate a select element if it has a custom option like "Please Select" etc. Along the way we also discuss the difference between value and ngValue in Angular. If you use value, null is treated as a string and not as a null. Hence the required validation does not work. If you just want the selected value as a string then use value property. If you want the selected object from the SELECT element, then use ngValue. Use the disabled attribute, if you do not want the user to be able to select the first default option. The built-in required validator will only work with the SELECT element, if the default option value is null. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/02/angular-value-vs-ngvalue.html Slides http://csharp-video-tutorials.blogspot.com/2018/02/angular-value-vs-ngvalue-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 13866 kudvenkat
AngularJS Tutorial 10: AngularJS ng-model Directive,Two Way Data binding,Form validation?
 
13:24
AngularJS ng-model Directive The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-model Directive With the ng-model directive you can bind the value of an input field to a variable created in AngularJS. Two-Way Binding The binding goes both ways. If the user changes the value inside the input field, the AngularJS property will also change its value: Validate User Input the span will be displayed only if the expression in the ng-show attribute returns true. Application Status The ng-model directive can provide status for application data (invalid, dirty, touched, error): If you have any query about these stuff than you can mail us on this email id : [email protected] Twitter id :https://twitter.com/tutorialspoint2 facebook : https://www.facebook.com/tutorialspoint2016 Instragram : https://www.instagram.com/tutorialspoint2016 Google plus : https://plus.google.com/+TutorialsPoint2016 Blogger : http://tutorialspoint2016.blogspot.in/ Don't forget to hit the Subscribe & Like button
Views: 550 Technical Suneja
ng option in Angular Js (Hindi) - part 1
 
09:02
my more videos - events in angular 2 - https://www.youtube.com/watch?v=YqLVL... *ngfor in angular 2 - https://www.youtube.com/watch?v=SZ5F7... components in angular 2- https://www.youtube.com/watch? v=fGiTKam8MGk quick start of angular 2 - https://www.youtube.com/watch?v=iWnPG... for angular js videos - https://www.youtube.com/playlist?list... https://www.youtube.com/watch?v=NEBh4... https://youtu.be/0jU0LpsoNcA https://www.youtube.com/watch?v=AIb1_... myblog - https://shashwatyoutube.blogspot.in/ Part 1 - Javascript Hoisting & Scope Variable Problem in Hindi by New Technology Hackings 3:56 More part 2 - JavaScript Functions Primer in Hindi by New Technology Hackings https://www.youtube.com/watch?v=d0dAcm6q-BQ&t=20s&index=1&list=PLZwzjvTVIo_tnX2RZdNSlXHS7wf0Gl02g
Views: 492 ng- Course
AngularJS tutorial for jQuery Developers: ng model
 
07:09
Angular JS for jQuery developers. How to implement jQuery login in AngularJS with simple example. Synchronize two input fields. This example shows use nf ng-model. Source: http://shyammakwana.me/angularjs/angularjs-tutorial-jquery-developers-part1.html
Views: 165 Web Dev
Sorting data in AngularJS
 
08:32
angularjs order data angularjs orderby filter example angularjs ng-repeat orderby example angularjs filter orderby date angularjs orderby reverse angularjs orderby ascending angularjs filter orderby descending Sorting data in AngularJS In this video we will discuss how to implement sorting in AngularJS. This is continuation to Part 8. Please watch Part 8 from AngularJS tutorial for beginners before proceeding. To sort the data in Angular 1. Use orderBy filter {{ orderBy_expression | orderBy : expression : reverse}} Example : ng-repeat="employee in employees | orderBy:'salary':false" 2. To sort in ascending order, set reverse to false 3. To sort in descending order, set reverse to true 4. You can also use + and - to sort in ascending and descending order respectively Example : ng-repeat="employee in employees | orderBy:'+salary'" Let us understand sorting data with an example. The dropdownlist shows the columns and the direction we want to sort When a dropdownlist item is selected, the table data should be sorted by the selected column Script.js : The controller function builds the model. Also sortColumn property is added to the $scope object. Notice sortColumn property is initialized to name. This ensures that the data is sorted by name column in ascending order, when the form first loads. var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { name: "Ben", dateOfBirth : new Date("November 23, 1980"), gender: "Male", salary: 55000 }, { name: "Sara", dateOfBirth: new Date("May 05, 1970"), gender: "Female", salary: 68000 }, { name: "Mark", dateOfBirth: new Date("August 15, 1974"), gender: "Male", salary: 57000 }, { name: "Pam", dateOfBirth: new Date("October 27, 1979"), gender: "Female", salary: 53000 }, { name: "Todd", dateOfBirth: new Date("December 30, 1983"), gender: "Male", salary: 60000 } ]; $scope.employees = employees; $scope.sortColumn = "name"; }); HtmlPage1.html : The select element, has the list of columns by which the data should be sorted. + and - symbols control the sort direction. When the form initially loads notice that the data is sorted by name column in ascending order, and name option is automatically selected in the select element. Notice the orderBy filter is using the sortColumn property that is attached to the $scope object. When the selection in the select element changes, the sortColumn property of the $scope object will be updated automatically with the selected value, and in turn the updated value is used by the orderBy filter to sort the data. [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.min.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] Sort By : [select ng-model="sortColumn"] [option value="name"]Name ASC[/option] [option value="+dateOfBirth"]Date of Birth ASC[/option] [option value="+gender"]Gender ASC[/option] [option value="-salary"]Salary DESC[/option] [/select] [br /][br /] [table] [thead] [tr] [th]Name[/th] [th]Date of Birth[/th] [th]Gender[/th] [th]Salary[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees | orderBy:sortColumn"] [td] {{ employee.name }} [/td] [td] {{ employee.dateOfBirth | date:"dd/MM/yyyy" }} [/td] [td] {{ employee.gender }} [/td] [td] {{ employee.salary }} [/td] [/tr] [/tbody] [/table] [/div] [/body] [/html] Styles.css : CSS styles to make the form look pretty. body { font-family: Arial; } table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; } th { border: 1px solid black; padding: 5px; text-align: left; } Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/11/sorting-data-in-angularjs.html
Views: 266543 kudvenkat
Angular - How to get the selected dropdown value
 
03:45
Download the example code here: https://github.com/frontendvideo/angular/tree/master/templates-and-data/option-element-get-selected-value
Views: 12598 Front End Video
Angular 5 - NgModel - Tutorial
 
02:46
Views: 2130 Gerrix
Bootstrap checkbox in angular
 
06:16
In this video we will discuss 1 Working with a checkbox control in Angular Template Driven forms 2. How to have a checkbox checked by default 3. How to disable a checkbox Working with a checkbox in Angular is very similar to working with a radio button. We want to include "Is Active" checkbox in the Create Employee form as shown below. When we check the checkbox, "isActive" property should reflect in the Angular generated for model. Also, when we click the "Save" button we want the "isActive" property value to be logged to the console. To achieve this all you have to do is include the following HTML in create-employee.component.html file. Please replace [ with LESSTHAN symbol and ] with GREATERTHAN symbol [div class="form-group"] [div class="form-control"] [label class="checkbox-inline"] [input type="checkbox" name="isActive" [(ngModel)]="isActive"]Is Active [/label] [/div] [/div] If we include "checked" attribute on a checkbox, we expect checkbox to be checked by default when the form initially loads. But you will discover that is not the case. [input type="checkbox" name="isActive" [(ngModel)]="isActive" checked]Is Active However, if you remove the "ngModel" directive from the checbox, then it gets checked as expected. Notice the "ngModel" directive is removed from the checkbox. [input type="checkbox" name="isActive" checked]Is Active With Angular Template Driven forms, we use "ngModel" directive for two-way data binding. So the moment we put it back in place the "checked" attribute does not work. To make it work include "isActive" property in the component class and initialise it to true. isActive = true; At this point you will have "IsActive" checkbox checked by default when the form loads. Now, even if we remove the "checked" attribute from the checkbox it is still checked by default when the form loads. This is because of the two-way data binding that we get with "ngModel" directive. For our form we do not want the checkbox to be checked by default, so remove the "checked" attribute and the "isActive" property from the component class. How to disable a checkbox : To disable a checkbox, use the disabled attribute [input type="checkbox" name="isActive" [(ngModel)]="isActive" disabled]Is Active Another important point to keep in mind. By default, disabled form controls are not included in the Angular auto generated form model. Since, the "Is Active" checkbox is disabled, it will not be included in the Angular generated form model. In our form, we do not want the checkbox to be disabled, so please remove the disabled attribute. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/bootstrap-checkbox-in-angular.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/bootstrap-checkbox-in-angular-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 26740 kudvenkat
Angular's ng-model
 
45:00
+Martin Staffa has contributed considerably to the ng-model codebase of Angular 1. He and I are going to chat about this fundamental piece of Angular. +Pascal DeMilly is donating $50/month to the work I do in open source and other things for the community (like chats like this). As such, his sponsorship is the reason that Martin and I are having this chat (aside from the fact that this is a fascinating subject and Martin is awesome). If you or you're company is interested in contributing as well, you can do so here: https://www.patreon.com/kentcdodds
Views: 84 Kent C. Dodds
ng hide and ng show in AngularJS
 
06:38
In this video we will discuss ng-hide and ng-show directives in Angular with examples ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us understand this with an example When Hide Salary checkbox is checked, the Salary column should be hidden, when it is unchecked the Salary column should be unhidden Script.js : The controller function builds the model var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { name: "Ben", gender: "Male", city: "London", salary: 55000 }, { name: "Sara", gender: "Female", city: "Chennai", salary: 68000 }, { name: "Mark", gender: "Male", city: "Chicago", salary: 57000 }, { name: "Pam", gender: "Female", city: "London", salary: 53000 }, { name: "Todd", gender: "Male", city: "Chennai", salary: 60000 } ]; $scope.employees = employees; }); HtmlPage1.html : Notice ng-model directive on the checkbox is set to hideSalary. hideSalary variable is then used as the value for ng-hide directive on the th and td elements that displays Salary. When the page is first loaded, hideSalary variable will be undefined which evaluates to false, as a result Salary column will be visible. When the checkbox is checked, hideSalary variable will be attached to the $scope object and true value is stored in it. This value is then used by the ng-hide directive to hide the salary td and it's th element. When the checkbox is unchecked, false value is stored in the hideSalary variable, which is then used by the ng-hide directive to display the Salary column. [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.min.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] [input type="checkbox" ng-model="hideSalary" /]Hide Salary [br /][br /] [table] [thead] [tr] [th]Name[/th] [th]Gender[/th] [th]City[/th] [th ng-hide="hideSalary"]Salary[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees"] [td] {{ employee.name }} [/td] [td] {{ employee.gender}} [/td] [td] {{ employee.city}} [/td] [td ng-hide="hideSalary"] {{ employee.salary }} [/td] [/tr] [/tbody] [/table] [/div] [/body] [/html] The following example masks and unmasks the Salary column values using ng-hide and ng-show directives, depending on the checked status of the Hide Salary checkbox. [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.min.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] [input type="checkbox" ng-model="hideSalary" /]Hide Salary [br /][br /] [table] [thead] [tr] [th]Name[/th] [th]Gender[/th] [th]City[/th] [th ng-hide="hideSalary"]Salary[/th] [th ng-show="hideSalary"]Salary[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees"] [td] {{ employee.name }} [/td] [td] {{ employee.gender}} [/td] [td] {{ employee.city}} [/td] [td ng-hide="hideSalary"] {{ employee.salary }} [/td] [td ng-show="hideSalary"] ##### [/td] [/tr] [/tbody] [/table] [/div] [/body] [/html] Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/11/ng-hide-and-ng-show-in-angularjs.html
Views: 178578 kudvenkat
AngularJS Tutorial 8: What is AngularJS Directives ? ng-repeat? ng-model? ng-bind??...
 
16:25
AngularJS Directives AngularJS lets you extend HTML with new attributes called Directives. AngularJS has a set of built-in directives which offers functionality to your applications. AngularJS also lets you define your own directives. AngularJS Directives AngularJS directives are extended HTML attributes with the prefix The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls input, select, textarea to application data. The ng-app directive also tells AngularJS that the div element is the "owner" of the AngularJS application. • Data Binding : Data binding in AngularJS binds AngularJS expressions with AngularJS data. Repeating HTML Elements The ng-repeat directive repeats an HTML element: The ng-app Directive The ng-app directive defines the root element of an AngularJS application. The ng-app directive will auto-bootstrap automatically initialize the application when a web page is loaded. The ng-init Directive The ng-init directive defines initial values for an AngularJS application. Normally, you will not use ng-init. You will use a controller or module instead. If you have any query about these stuff than you can mail us on this email id : [email protected] Twitter id :https://twitter.com/tutorialspoint2 facebook : https://www.facebook.com/tutorialspoint2016 Instragram : https://www.instagram.com/tutorialspoint2016 Google plus : https://plus.google.com/+TutorialsPoint2016 Blogger : http://tutorialspoint2016.blogspot.in/ Don't forget to hit the Subscribe & Like button
Views: 531 Technical Suneja
Ng-Options
 
05:52
Ng-Options is a powerful directive which is used to generate "select" tag options dynamically from an array or object.
Views: 4494 Youstart Education
Angular ngif directive
 
11:44
In this video we will discuss 1. Angular ngIf structural directive with an example 2. How to prevent a button from submitting form For code and text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-ngif-directive.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-ngif-directive-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 18690 kudvenkat
AngularJS -  ng model and Two way binding
 
05:37
In this video we have explained about two way binding feature in angularJS. We have also explained how to use ng-model in angularjs.
Views: 2423 20Fingers2Brains
Search filter in AngularJS
 
05:44
angularjs search filter example angularjs search box example In this video we will discuss, how to implement search in Angular using search filter. As we type in the search textbox, all the columns in the table must be searched and only the matching rows should be displayed. Script.js : The controller function builds the model. var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { name: "Ben", gender: "Male", salary: 55000, city: "London" }, { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" }, { name: "Mark", gender: "Male", salary: 57000, city: "London" }, { name: "Pam", gender: "Female", salary: 53000, city: "Chennai" }, { name: "Todd", gender: "Male", salary: 60000, city: "London" }, ]; $scope.employees = employees; }); HtmlPage1.html : [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.min.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] Search : [input type="text" ng-model="searchText" placeholder="Search employees" /] [br /][br /] [table] [thead] [tr] [th]Name[/th] [th]Gender[/th] [th]Salary[/th] [th]City[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees | filter:searchText"] [td] {{ employee.name }} [/td] [td] {{ employee.gender }} [/td] [td] {{ employee.salary }} [/td] [td] {{ employee.city }} [/td] [/tr] [/tbody] [/table] [/div] [/body] [/html] Styles.css : CSS styles to make the form look pretty. body { font-family: Arial; } table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; } th { border: 1px solid black; padding: 5px; text-align: left; } At the moment, the search is being done across all columns. If you want to search only one specific column, then change ng-model directive value on the search textbox as shown below. With this change only city column is searched. [input type="text" ng-model="searchText.city" placeholder="Search employees" /] Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/11/search-filter-in-angularjs.html
Views: 223537 kudvenkat
Mixing Single Data and Templates Using A single ng-repeat in Angular JS
 
05:57
check out : "Learn and Understand AngularJS tutorials" : http://bit.ly/angularjstutorials Also check out : Learn and Understand AngularJS tutorials" : http://bit.ly/angularjstutorials complete ios8 Development tutorials : http://bit.ly/ios8swiftcourse Angular JS ( Wikipedia Article ) In software development, AngularJS (commonly referred to as "Angular") is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications. The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources. AngularJS directives allow the developer to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation components. Some of the most commonly used directives are: ng-app Sets the text of a DOM element to the value of an expression. Any changes to the variable ‘name’ in the application's scope are reflected instantly in the DOM. ng-model Similar to ng-bind, but establishes a two-way data binding between the view and the scope. ng-model-options Allows tuning how model updates are done. ng-class Allows class attributes to be dynamically loaded. ng-controller Specifies a JavaScript controller class that evaluates HTML expressions. ng-repeat Instantiate an element once per item from a collection. ng-show & ng-hide Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style. ng-switch Conditionally instantiate one template from a set of choices, depending on the value of a selection expression. ng-view The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers. ng-if Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted ng-aria A module for accessibility support of common ARIA attributes. ng-animate A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives..
Views: 1072 Thanxman Uk
Security with Angular Js Part 1
 
14:56
Security with Angular Js Part 1 check out : "Learn and Understand AngularJS tutorials" : http://bit.ly/angularjstutorials Angular JS ( Wikipedia Article ) In software development, AngularJS (commonly referred to as "Angular") is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications. The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources. AngularJS directives allow the developer to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation components. Some of the most commonly used directives are: ng-app Sets the text of a DOM element to the value of an expression. Any changes to the variable ‘name’ in the application's scope are reflected instantly in the DOM. ng-model Similar to ng-bind, but establishes a two-way data binding between the view and the scope. ng-model-options Allows tuning how model updates are done. ng-class Allows class attributes to be dynamically loaded. ng-controller Specifies a JavaScript controller class that evaluates HTML expressions. ng-repeat Instantiate an element once per item from a collection. ng-show & ng-hide Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style. ng-switch Conditionally instantiate one template from a set of choices, depending on the value of a selection expression. ng-view The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers. ng-if Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted ng-aria A module for accessibility support of common ARIA attributes. ng-animate A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives..
Views: 86 Thanxman Uk
Angular 4/5 HTTP GET and POST requests tutorial
 
17:17
Angular 5 fetching data using HTTP GET and Saving data using HTTP POST requests. Also fix CORS by setting allow-control-allow-origin using http interceptor. Git Repo of this project * https://github.com/techsithgit/ng5-http-get-post Article and code samples from this tutorial * techsith.com\ Please be my patreons on patreaon * https://www.patreon.com/techsith Follow me for technology updates * https://facebook.com/techsith * https://twitter.com/techsith1 Help me translate this video. * http://www.youtube.com/timedtext_video?ref=share&v=MN2WkxPnGTo
Views: 127403 techsith
Introduction to Angular JS p4
 
07:56
Learn Test Driven Development with awesome examples. Start learning Angluar JS Unit Testing using WebStorm. check out : "Learn and Understand AngularJS tutorials" : http://bit.ly/angularjstutorials next tut (part 2) : https://www.youtube.com/watch?v=Q4zn3M6KaYE Angular JS ( Wikipedia Article ) In software development, AngularJS (commonly referred to as "Angular") is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications. The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources. AngularJS directives allow the developer to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation components. Some of the most commonly used directives are: ng-app Sets the text of a DOM element to the value of an expression. Any changes to the variable ‘name’ in the application's scope are reflected instantly in the DOM. ng-model Similar to ng-bind, but establishes a two-way data binding between the view and the scope. ng-model-options Allows tuning how model updates are done. ng-class Allows class attributes to be dynamically loaded. ng-controller Specifies a JavaScript controller class that evaluates HTML expressions. ng-repeat Instantiate an element once per item from a collection. ng-show & ng-hide Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style. ng-switch Conditionally instantiate one template from a set of choices, depending on the value of a selection expression. ng-view The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers. ng-if Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted ng-aria A module for accessibility support of common ARIA attributes. ng-animate A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives..
Views: 25 Thanxman Uk
Angular radio button checked by default
 
04:59
In this video we will discuss 1. How to have a radio button checked by default 2. How to disable a radio button If you need the code samples used in the demo, you may copy them from our blog using the link below. http://csharp-video-tutorials.blogspot.com/2018/01/angular-radio-button-checked-by-default.html If we include checked attribute on a radio button, we expect that radio button to be checked by default when the form initially loads. But you will discover that is not the case. In the following example, we have included "checked" attribute on "Male" radio button, but when the form is displayed it is not checked. [input type="radio" name="gender" value="male" [(ngModel)]="gender" checked] However, if you remove the "ngModel" directive from the radio button, then it gets checked as expected. Notice the "ngModel" directive is removed from the radio button. [input type="radio" name="gender" value="male" checked] With Angular Template Driven forms, we use "ngModel" directive for two-way data binding. So the moment we put it back in place the "checked" attribute does not work. To make it work include "gender" property in the component class and initialise to the value of the radio button that you want to have checked by default. In our case, let us say, we want the "Male" radio button to be checked by default. To achieve this include "gender" property initialised to value of "male" in the component class as shown below. gender = 'male'; At this point you will have "Male" radio button checked by default when the form loads. Now, even if we remove the "checked" attribute from the "Male" radio button it is still checked by default when the form loads. This is because of the two-way data binding that we get with "ngModel" directive. For our form we do not want any radio button to be checked by default, so remove the "checked" attribute and the "gender" property from the component class. How to disable a radio button : To disable a radio button, use the disabled attribute on that radio button. "Male" radio button in this case will be disabled when the form initially loads. [input type="radio" name="gender" value="male" [(ngModel)]="gender" disabled] Another important point to keep in mind. By default, disabled form controls are not included in the Angular auto generated form model. Since, the "Male" radio button is disabled, the gender property will not be included in the Angular generated form model. In our form, we do not want any radio button to be disabled, so please remove the disabled attribute. In our next video, we will discuss working with CheckBox control in Angular Template Driven forms. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-radio-button-checked-by-default.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-radio-button-checked-by-default_2.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 26045 kudvenkat
Angular input change detection using property setter
 
07:11
In this video we will discuss how to detect and react when component input property value changes using a property setter. In our previous video we discussed, detecting and reacting to INPUT property changes using ngOnChanges life cycle hook. In this video we will discuss doing the same using a Property Setter instead. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/03/angular-input-change-detection-using.html Slides http://csharp-video-tutorials.blogspot.com/2018/03/angular-input-change-detection-using_21.html Angular CRUD Tutorial https://www.youtube.com/playlist?list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5 Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists Detecting and reacting to Input property changes using Property Setter // Private backing field for the property private _employee: Employee; // This property setter is called anytime the input property changes // Notice the code here logs the previous and current employee names @Input() set employee(val: Employee) { console.log('Previous : ' + (this._employee ? this._employee.name : 'NULL')); console.log('Current : ' + val.name); this._employee = val; } // This getter is called when reading and displaying data get employee(): Employee { return this._employee; } At this point you might be thinking, there are 2 ways to detect and react to Input property changes (Property Setter and ngOnChanges life cycle hook). What is the difference between the two and when to use one over the other. We will answer these 2 questions in our next video.
Views: 12209 kudvenkat
Angular form control and form group
 
09:20
In this video we will discuss FormControl and FormGroup classes Text version of the video http://csharp-video-tutorials.blogspot.com/2018/09/angular-form-control-and-form-group.html Slides http://csharp-video-tutorials.blogspot.com/2018/09/angular-form-control-and-form-group_24.html Angular 6 Tutorial https://www.youtube.com/playlist?list=PL6n9fhu94yhWNJaDgh0mfae_9xoQ4E_Zj Angular 6 Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2018/09/angular-6-tutorial-for-beginners.html Angular, JavaScript, jQuery, Dot Net & SQL Playlists https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd When working with reactive forms we create instances of FormControl and FormGroup classes to create a form model. To bind an HTML form tag in the template to the FromGroup instance in the component class, we use formGroup directive To bind an HTML input element in the template to the FormControl instance in the component class, we use formControlName directive formGroup and formControlName directives are provided by the ReactiveFormsModule Both FormControl and FormGroup classes inherit from AbstractControl base class The AbstractControl class has properties that help us track both FormControl and FormGroup value and state The following are some of the useful properties provided by the AbstractControl class value errors valid invalid dirty pristine touched untouched FormControl instance tracks the value and state of the individual html element it is associated with FormGroup instance tracks the value and state of all the form controls in it's group To see the form model we created using FormGroup and FormControl classes, log the employeeForm to the console. onSubmit(): void { console.log(this.employeeForm); } To access a FormControl in a FormGroup, we can use one of the following 2 ways. employeeForm.controls.fullName.value employeeForm.get('fullName').value Note: This same code works, both in the template and component class. In addition to these properties, AbstractControl also provides the following methods. In our upcoming videos we will use these properties and methods for form validation and working with data. setValidators() clearValidators() updateValueAndValidity() setValue() patchValue() Reset()
Views: 28801 kudvenkat
Angular datepicker tutorial
 
10:12
In this video we will discuss 1. Why is not a good practice to use the browser built-in DatePicker control 2. Installing ngx-bootstrap 3. Using ngx-bootstrap datepicker in Angular Why is not a good practice to use the browser built-in DatePicker control : This is because the implementation of datepicker is different from browser vendor to vendor. This means our end users may have different experience depending on the browser they use. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-datepicker-tutorial.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-datepicker-tutorial-slides.html Angular CRUD Tutorial https://www.youtube.com/playlist?list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5 Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 50352 kudvenkat
Angular form validation
 
11:41
In this video and in the next few videos we will discuss Form Validation in Angular with examples. Along the way we will discuss validating textboxes, check boxes, radio buttons, dropdownlists etc. We will also discuss, how to fix one of the common error that we get when exporting NgModel into a local variable. The error that we get is, cannot assign to a reference or variable. We will discuss what causes this error and how to fix it. To understand validation in Angular, we need to understand the following 6 Angular validation properties. 1. touched 2. untouched 3. pristine 4. dirty 5. valid 6. invalid These 6 properties are available at each individual form control level and also at the form level. Code and Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-form-validation.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-form-validation-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 40452 kudvenkat
Two way data binding in angular 2
 
07:54
Text version of the video http://csharp-video-tutorials.blogspot.com/2017/07/two-way-data-binding-in-angular-2.html Slides http://csharp-video-tutorials.blogspot.com/2017/07/two-way-data-binding-in-angular-2_10.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss Two way Data Binding in Angular 2. Consider the following code in app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` Name : [input [value]='name'] [br] You entered : {{name}} ` }) export class AppComponent { name: string = 'Tom'; } [input [value]='name'] : Binds component class "name" property to the input element’s value property You entered : {{name}} : Interpolation displays the value we have in "name" property on the web page At the moment when we change the value in the textbox, that changed value is not reflected in the browser. One way to achieve this is by binding to the input event of the input control as shown below. Name : [input [value]='name' (input)='name = $event.target.value'] [br] You entered : {{name}} At this point, as we type in the textbox, the changed value is displayed on the page. So let's understand what is happening here. Conside this code Name : [input [value]='name' (input)='name = $event.target.value'] [br] You entered : {{name}} [value]='name' : This property binding flows data from the component class to element property (input)='name = $event.target.value' : This event binding flows data in the opposite direction i.e from the element to component class property "name" $event - Is exposed by angular event binding, and contains the event data. To retrieve the value from the input element use - $event.target.value. name = $event.target.value - This expression updates the value in the name property in the component class You entered : {{name}} - This interpolation expression will then display the value on the web page. So in short two-way data binding in Angular is a combination of both Property Binding and Event Binding. To save a few keystrokes and simplify two-way data binding angular has provided ngModel directive. So with ngModel directive we can rewrite the follwing line of code Name : [input [value]='name' (input)='name = $event.target.value'] Like this : Name : [input [(ngModel)]='name'] At this point if you view the page in the browser, you will get the following error Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input' This is because ngModel directive is, in an Angular system module called FormsModule. For us to be able to use ngModel directive in our root module - AppModule, we will have to import FormsModule first. Here are the steps to import FormsModule into our AppModule 1. Open app.module.ts file 2. Include the following import statement in it import { FormsModule } from '@angular/forms'; 3. Also, include FormsModule in the 'imports' array of @NgModule imports: [BrowserModule, FormsModule] With these changes, reload the web page and it works as expected. So here is the syntax for using two-way data binding in Angular [input [(ngModel)]='name'] The square brackets on the outside are for property binding The parentheses on the inside are for event binding To easily remember this syntax, compare it to a banana in a box [()]
Views: 95222 kudvenkat
Angular CLI generate routing module
 
09:23
In this video we will discuss generating routing module using the Angular CLI. To make Angular CLI generate a routing module, all you have to do is use --routing option along with the ng new command when generating a new Angular project. ng new RoutingDemo --routing In our previous video, we discussed the steps to implement routing in a separate module, and them import that routing module in the application root module AppModule. Here are those steps. Step 1 : Set base href in index.html. Step 2 : Create a separate routing module file. You can name it anything you want. I named it app-routing.module.ts. Step 3 : Import the angular RouterModule into your application routing module (app-routing.module.ts). Also don't forget to re-export RouterModule. Step 4 : Configure the application routes. Step 5 : Import the application routing module (app-routing.module.ts) in the root AppModule. Step 6 : Specify where you want the routed component view template to be displayed using the router-outlet directive Step 7 : Create a navigation menu and tie the configured routes with the menu using the routerLink directive. Optionally, use the routerLinkActive directive to style the current route that is active, so the user knows the page that he is on, in the application. Out of the above 7 steps, we only need to implement steps 4 & 7. The rest of the steps are implemented by the Angular CLI out of the box. Just imagine the amount of time we save. Before we can implement steps 4 & 7. Let's generate the following 3 components. Component Angular CLI Command HomeComponent ng g c home EmployeesComponent ng g c employees PageNotFoundComponent ng g c pageNotFound Now let's implement Step 4. In app-routing.module.ts file specify the application routes. Copy and paste the following code. In addition to the routes, notice we are also importing HomeComponent, EmployeesComponent & PageNotFoundComponent as we are referencing these components in the route configuration. import { HomeComponent } from './home/home.component'; import { EmployeesComponent } from './employees/employees.component'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'employees', component: EmployeesComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; Now let's implement Step 4. In app.component.html copy and paste the HTML code from my blog Finally we need to install and reference Bootstrap, to style the navigation menu. To install bootstrap execute the following npm command. We can execute this command in the command prompt window or in the integrated terminal window in Visual Studio Code. npm install [email protected] --save Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet in the styles property as shown below. "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ] At this point stop the server. Build and run the application again using the following Angular CLI command. Routing should be working as expected. ng serve --open Text version of the video http://csharp-video-tutorials.blogspot.com/2017/11/angular-cli-generate-routing-module.html Slides http://csharp-video-tutorials.blogspot.com/2017/11/angular-cli-generate-routing-module_15.html Angular CLI Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CLI Text articles & Slides http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-tutorial-for-beginners.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 17772 kudvenkat
NgModel Training: What is ng-model? (part 1 of 10)
 
07:13
In this section, Jeremy Lund presents the basics of what ng-model provides, and how it is different from the other basic binding that AngularJS does. Title slide image: "Father and Son" - Nadir Hashmi https://flic.kr/p/8J3uyU Codepen examples: Three Stooges - http://codepen.io/lund0n/pen/urGxk Simple text input - http://codepen.io/lund0n/pen/Ikvmj Addition demo - http://codepen.io/lund0n/pen/zFbAy Password validation demo - http://codepen.io/lund0n/pen/KiLeE
Angular.JS: Solving the "initial selection" problem with select elements (& many other tips)
 
40:28
In this video, Mohamed Meligy explores a very common problem that people face when using select elements with Angular.JS, when the select element does not select the model property its supposed to. It also explains several other tips around using the select and ng-options directives as well.
Views: 22680 Meligy
Add required attribute dynamically in angular
 
05:58
In this video we will discuss, how to add required attribute dynamically in template driven forms. In our upcoming videos we will discuss how to do the same in reactive forms. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/02/add-required-attribute-dynamically-in.html Slides http://csharp-video-tutorials.blogspot.com/2018/02/add-required-attribute-dynamically-in_14.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 14691 kudvenkat
Angular JS TDD part 5
 
07:44
check out : "Learn and Understand AngularJS tutorials" : http://bit.ly/angularjstutorials Angular JS ( Wikipedia Article ) In software development, AngularJS (commonly referred to as "Angular") is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications. The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources. AngularJS directives allow the developer to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation components. Some of the most commonly used directives are: ng-app Sets the text of a DOM element to the value of an expression. Any changes to the variable ‘name’ in the application's scope are reflected instantly in the DOM. ng-model Similar to ng-bind, but establishes a two-way data binding between the view and the scope. ng-model-options Allows tuning how model updates are done. ng-class Allows class attributes to be dynamically loaded. ng-controller Specifies a JavaScript controller class that evaluates HTML expressions. ng-repeat Instantiate an element once per item from a collection. ng-show & ng-hide Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style. ng-switch Conditionally instantiate one template from a set of choices, depending on the value of a selection expression. ng-view The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers. ng-if Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted ng-aria A module for accessibility support of common ARIA attributes. ng-animate A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives..
Views: 127 Thanxman Uk
Angular checkbox validation
 
08:42
In this video we will discuss checkbox validation in Angular with example. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/02/angular-checkbox-validation.html Slides http://csharp-video-tutorials.blogspot.com/2018/02/angular-checkbox-validation-slides.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 15091 kudvenkat
04 Forms in AngularJS - 010 radio buttons and ng value
 
05:25
Forms in AngularJS Radio buttons and ng value
Views: 5498 Rankit Ranjan
Part 1 - AngularJS Tutorial ng-disabled directive
 
05:51
This tutorial demonstrates the usage of Angular JS ng-disabled directive combined with ng-model directive. Angular JS tutorial Angular JS Directives Angular JS ng-disabled Angular JS ng-model
Views: 1109 allcodestack
Bootstrap radio buttons in Angular
 
07:21
In this video we will discuss working with radio buttons in Angular Template Driven forms. We want to include "Gender" radio buttons in the Create Employee form. When we select employee "Gender" using the radio buttons, the selected gender value should reflect in the Angular generated form model. Also, we we click the "Save" button we want the selected gender value to be logged to the console. Please copy the HTML for radio buttons from our blog using the link below http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html Code Explanation 1. The name attribute is required to group the radio buttons as one unit and make the selection mutually exclusive. Make sure both the radio buttons have the same value for the "name" attribute. Otherwise the radio button selection won't be mutually exclusive. 2. It is also important that you set the "value" attribute for each radio button. This value is posted to the server when the form is submitted. While we are here, let's also include a textbox to capture "Phone Number" and "Contact Preference" radio button. Please copy the HTML from our blog using the link below http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html Text version of the video http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular.html Slides http://csharp-video-tutorials.blogspot.com/2017/12/bootstrap-radio-buttons-in-angular_28.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 27502 kudvenkat
Angular disable browser validation
 
07:27
In this video we will discuss the following 1. By default Angular 4 and later versions disable browser native validation. How to enable browser validation using ngNativeValidate directive 2. How to explicitly disable the native browser validation using the novalidate attribute if you are using Angular 2. 3. Why is it better to disable browser built-in validation and use Angular to validate instead Different browser vendors implement browser validation differently and as a result, the end users have different experience depending on the browser they use. Because of this inconsistency it is better to disable browser native validation and use Angular instead to validate form fields. Text version of the video http://csharp-video-tutorials.blogspot.com/2018/01/angular-disable-browser-validation.html Slides http://csharp-video-tutorials.blogspot.com/2018/01/angular-disable-browser-validation_25.html Angular CRUD Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists
Views: 15011 kudvenkat
Angular JS end to end testing with Protractor
 
14:52
Also check out : Learn and Understand AngularJS tutorials" : http://bit.ly/angularjstutorials complete ios8 Development tutorials : http://bit.ly/ios8swiftcourse Angular JS ( Wikipedia Article ) In software development, AngularJS (commonly referred to as "Angular") is an open-source web application framework maintained by Google and by a community of individual developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications. The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources. AngularJS directives allow the developer to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation components. Some of the most commonly used directives are: ng-app Sets the text of a DOM element to the value of an expression. Any changes to the variable ‘name’ in the application's scope are reflected instantly in the DOM. ng-model Similar to ng-bind, but establishes a two-way data binding between the view and the scope. ng-model-options Allows tuning how model updates are done. ng-class Allows class attributes to be dynamically loaded. ng-controller Specifies a JavaScript controller class that evaluates HTML expressions. ng-repeat Instantiate an element once per item from a collection. ng-show & ng-hide Conditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style. ng-switch Conditionally instantiate one template from a set of choices, depending on the value of a selection expression. ng-view The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers. ng-if Basic if statement directive that allow to show the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted ng-aria A module for accessibility support of common ARIA attributes. ng-animate A module provides support for JavaScript, CSS3 transition and CSS3 keyframe animation hooks within existing core and custom directives..
Views: 2072 Thanxman Uk