Home
Search results “Ng model options angularjs”
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: 21008 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
Views: 100949 codedamn
ngModelOptions: New in Angular 1.3
 
05:11
A quick intro to ng-model-options in Angular 1.3.
Views: 475 NetBeansVideos
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: 3986 Youstart Education
November CincyNg: Forms and ng-model-options in AngularJs 1.3
 
44:02
Audio is messed up for the first 30 seconds.
Views: 429 GaslightLive
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: 307 TutorialsPoint2K16
AngularJS Quiz App Tutorial (5/24) - Ng Model and Angular Filters
 
07:36
The writeup for this video: https://hungryturtlecode.com/code-projects/angular-quiz-app/5-angular-filters/?utm_source=YouTube&utm_medium=VideoDescription&utm_campaign=quizapp5 Part 1 of this series: https://www.youtube.com/watch?v=yordL7Yczes&index=1&list=PLqr0oBkln1FBmOjK24_B4y_VAA8736wPq The Git Repo for this project: https://github.com/adiman9/HungryTurtleFactQuiz This video is dedicated to implementing the live updating search functionality within out list of turtles. This is achieved in a very simple way using filters in Angular and a new directive called ng-model. ng-model will bind a property on our controller to the input text for the search in the html. This binding is what is known as a two way data binding. It is called that because the input text will change if we programmatically change the bound property on our controller but the controller property will also automatically change when the user types in the input box. Now that we have the property on our controller that is bound to the input text, we can then use angular filters to filter the turtles that are being displayed by the ng-repeat. Check Out The Site! https://hungryturtlecode.com/?utm_source=YouTube&utm_medium=VideoDescription&utm_campaign=quizapp5 SUBSCRIBE! http://www.youtube.com/hungryturtledev?sub_confirmation=1 Join the Community! Hungry Turtle Code Follow Me -- https://twitter.com/hungryturtledev Like Me -- https://www.facebook.com/hungryturtlecode/ Circle Me -- https://plus.google.com/+Hungryturtledev Instagram -- https://www.instagram.com/hungryturtlecode/ Pinterest -- https://www.pinterest.com/hungryturtledev/ linkedin -- https://www.linkedin.com/company/hungry-turtle-code Github -- https://github.com/adiman9
Views: 6508 Hungry Turtle Code
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: 3864 Codevolution
Angular Js  ng-options
 
15:36
How to use Angular js ngOptions for complex objects
Views: 9671 SkilleTech
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: 1997 20Fingers2Brains
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: 153 Web Dev
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: 9395 Front End Video
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: 7114 WebTunings
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: 22030 Meligy
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: 248099 kudvenkat
Angular 5 Forms Update
 
40:23
#1 Online Course: Angular - The Complete Guide (http://codingthesmartway.com/courses/angular2-complete-guide/) Angular 5 is here and many changes have been made to further improve the framework. In this tutorial we're taking a look at the update which has been made to the Angular Forms package. You can now control for a form (or single form elements) when the value or the validity is updated. This feature has been available in AngularJS 1.x but missed in Angular 2+ so far. The following update options can now be used in Angular 5 forms: - change: change is the default mode. By using this update option the form / form control is updated after every single change. - blur: the blur change mode is only updated the from values / validity status after a form control lost the focus. - submit: updates are only done after form submit. Code: https://github.com/seeschweiler/angular5-forms-update Demo: https://angular-5-forms.surge.sh/ This is a CodingTheSmartWay.com tutorial Support us with just one cup of coffee: https://www.buymeacoffee.com/ctsw --------------------- Musik: Night Owl by Broke For Free is licensed under a Creative Commons Attribution License. (http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl) DISCLAIMER: This video and description contains affiliate links, which means that if you click on one of the product links, we’ll receive a small commission. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!
Views: 39830 CodingTheSmartWay.com
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: 340019 kudvenkat
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: 15235 Techie Ocean
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: 16937 kudvenkat
AngularJS Tutorial 11 - ng-if Directive
 
04:33
In this tutorial, we are going to learn about ng-if directive in angularJS Ng-if is a built-in Angular directive for adding and removing content from the DOM. Ng-if is extremely handy for showing and hiding content on a page. Ng-if, like most built-in directives relies upon evaluating an expression as true or false. In the case of ng-if, if the expression evaluates false, it removes the element from the DOM entirely. If it’s true, the element gets recreated ng-show directive is also used to show or hide the content based on expression . So what is the difference between ng-if and ng-show directive. ng-show only show or hide the content on the bases of CSS properties, so it only handle the visibility of the HTML element but that element is still in DOM but in case of ng-if element is entirely created or removed from DOM. Why ng-if is good to use? Angular uses a digest loop to watch for changes in an app to make changes in the view or model (two-way data binding). Watches are expensive from a performance standpoint. By removing an element from the DOM, you remove all the watchers on those elements. Having few watches in an app generally allows it to run faster. To visit my previous video on ng-show/hide .Visit this link https://youtu.be/-4S9firrOfA To check my all videos : https://www.youtube.com/watch?v=pCVgrj5vzxc&list=PLC8OkhrVTHNExVVYDXzk_29o-NK1OylA8 Facebook Page: https://www.facebook.com/AngularJS4Beginners
Views: 2337 Nisha Singla
AngularJs Tutorial Part 5 - Two Way Databinding & ng-model Directive
 
02:22
AngularJs Tutorial Part 5 - Two Way Databinding & ng-model Directive : in this tutorial we will learn angularjs two way binding using example and ng-model directive
Views: 83 VT ZEAL
Angular JS TDD part 1
 
14:56
Also 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: 1199 Thanxman Uk
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: 6661 Java Brains
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: 21628 kudvenkat
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: 165681 kudvenkat
Angular 5 - NgModel - Tutorial
 
02:46
Views: 1668 Gerrix
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: 28629 kudvenkat
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: 15916 kudvenkat
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: 15807 kudvenkat
04 AngularJs Model
 
05:31
Angularjs Model.The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
Views: 63 Google Technoloy
Controllers in AngularJS
 
10:56
angularjs controller example angularjs directive controller example In this video we will continue our discussion on controllers in angular. This is continuation to Part 2. Please watch Part 2 from AngularJS tutorial for beginners. We will discuss Attaching complex objects to the scope What happens if a controller name is mis-spelled What happens if a property name in the binding expression is mis-spelled How to create module, controller and register the controller with the module, all in one line The job of the controller is to build a model for the view. The controller does this by attaching the model to the scope. The scope is not the model, it's the data that you attach to the scope is the model. In the following example, $scope is not the model. The message property that we have attached to the scope is the model. myApp.controller("myController", function ($scope) { $scope.message = "AngularJS Tutorial"; }); The view will then use the data-binding expression to retrieve the model from the scope. This means the controller is not manipulating the DOM directly, thus keeping that clean separation between the model, view and the controller. So when you are developing controllers, make sure, you are not breaking that clean separation between the model, view and the controllers. The controller should only be used for setting up the $scope object and adding behavior it. We will discuss, when and why should we add behvior to the scope object in a later video. In the example above, message is a simple property. You can also attach a complex object to the scope. In the example below, we have an employee object which is a complex object with 3 properties attached to the view. myApp.controller("myController", function ($scope) { var employee = { firstName: 'Mark', lastName: 'Hastings', gender: 'Male' }; $scope.employee = employee; }); With in the view, we can then retrieve the employee properties and display them in the view as shown below [div ng-controller="myController"] [div]First Name : {{ employee.firstName }}[/div] [div]Last Name : {{ employee.lastName }}[/div] [div]Gender : {{ employee.gender}}[/div] [/div] What happens if the controller name is misspelled When the controller name is misspelled, 2 things happen 1. An error is raised. To see the error, use browser developer tools 2. The binding expressions in the view that are in the scope of the controller will not be evaluated If you are using the minified version of the AngularJS script, the error messages may not be readable. To get readable error message 1. In the developer tools, click on the link next to the error. This will lead you to a page, where you can see a much clean error message without all the encoding symbols. 2. Another option you have is, if you are in the development environment, you may use the non-minified version of the AngularJS script, which produces readable error message. What happens if a property name in the binding expression is misspelled Expression evaluation in angular is forgiving, meaning if you misspell a property name in the binding expression, angular will not report any error. It will simply return null or undefined. How to create module, controller and register the controller with the module, all in one line Use the method chaining mechanism as shown below var myApp = angular .module("myModule", []) .controller("myController", function ($scope) { var employee = { firstName: 'Mark', lastName: 'Hastings', gender: 'Male' }; $scope.employee = employee; }); 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/controllers-in-angularjs.html
Views: 494502 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 Reactive Forms Tutorial (Angular 4)
 
25:10
Prefer reading a tutorial? https://goo.gl/6RBuJD http://coursetro.com for more awesomeness. Source files: https://github.com/designcourse/reactive-forms-tutorial In this tutorial, we'll take a look at the most robust way to manage forms in Angular; Reactive Forms. - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS weekly! My Patreon: https://www.patreon.com/designcourse My site: https://coursetro.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!
Views: 112915 DesignCourse
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: 408 ng- Course
AngularJS lesson 2 - using expressions in HTML tags, ng-model directive, JSON objects
 
10:46
AngularJS lesson 2 - using expressions in HTML tags, ng-model directive, JSON objects
Views: 74 Magic Monk
AngularJS Tutorial - 10 - ng-model Directive In AngularJS - Hindi
 
04:47
AngularJS Tutorial Playlist : https://www.youtube.com/playlist?list=PLNHw_0qv1zy_kNK9V8NbGhyc3g7ngXRA0 JavaScript Tutorial Playlist : https://www.youtube.com/playlist?list=PLNHw_0qv1zy-gfo9o2ZvbvQGxiBIKEI0t JSON Tutorial Playlist : https://www.youtube.com/playlist?list=PLNHw_0qv1zy9KKnGlwLhzJpgM2eKNqHG2 How To Download Netbeans IDE Video : https://www.youtube.com/watch?v=fu7rAlfLp4I AngularJS Website : https://angularjs.org/ Netbeans IDE Website : https://netbeans.org/downloads/index.html Java JRE 8 ( Required For Netbeans IDE ) : http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html
Views: 66 Ganguly Tech
Angular JS 2 Features and Beyond Part 1
 
14:43
Also 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: 713 Thanxman Uk
04 Forms in AngularJS - 010 radio buttons and ng value
 
05:25
Forms in AngularJS Radio buttons and ng value
Views: 4813 Rankit Ranjan
How To Set The Value Property In AngularJS ng-options - initial selected value of a select element
 
02:25
Please visit http://technomark.in/How-To-Set-The-Value-Property-In-AngularJS-ng-options.aspx for more information. Here we explain how to Set The Value Property for ng-options. In latest version of AngularJS, this can be achieved by using track by expression. We can set the actual value for the value attribute of select element. Let ArrayData be the datasource and ScopeObject is the scope object attached. On ArrayData, the Value Field is DisplayID and Text Field is DisplayText. Then inside select statement, we can use ng-option as follows. ng-options = " data.DisplayText for data in ScopeObject.ArrayData track by data.DisplayID" Here we have used the track by data.DisplayID. By this way we can Set The Value Property for ng-options. How To Set The Value Property In AngularJS' ng options, Set The Value Property In AngularJS' ng options, track by in AngularJS ng options, how to use ng-option to set default value, angularjs - Can't set selected value of ng-options, How to set the initial selected value of a select element using AngularJS' ng options, HTML, PHP, Asp.Net
Views: 5164 Admin Technomark
AngularJS For Everyone Tutorial #3 - Basic Filtering In Angular
 
04:57
Here we show off Angular's easy basic filtering on an object with an input and ng-model. Subscribe for more free tutorials https://goo.gl/6ljoFc, more Angular Tutorials: https://goo.gl/vFi0CQ Support Free Tutorials https://www.leveluptutorials.com/store/ The best shared web hosting http://www.bluehost.com/track/leveluptutorials/ Subscribe to Level Up Pro for extra features! https://www.leveluptutorials.com/store/products/pro Subscribe to the Level Up Newsletter http://eepurl.com/AWjGz To Support Level Up Tuts: http://leveluptuts.com/donations Simple cloud hosting, built for developers.: https://www.digitalocean.com/?refcode=67357174b09e HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Views: 21884 LevelUpTuts
ng include directive in AngularJS
 
07:52
angularjs ng include example In this video we will discuss ng-include directive in Angular ng-include directive is used to embed an HTML page into another HTML page. This technique is extremely useful when you want to reuse a specific view in multiple pages in your application. The value of ng-include directive can be the name of the HTML page that you want to reuse or a property on the $scope object that points to the reusable HTML page. EmployeeList.html : This is the HTML page that we intend to reuse on multiple HTML pages [table] [thead] [tr] [th]Name[/th] [th]Gender[/th] [th]Salary[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees"] [td] {{ employee.name }} [/td] [td] {{ employee.gender}} [/td] [td] {{ employee.salary}} [/td] [/tr] [/tbody] [/table] Script.js : var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { name: "Ben", gender: "Male", salary: 55000 }, { name: "Sara", gender: "Female", salary: 68000 }, { name: "Mark", gender: "Male", salary: 57000 }, { name: "Pam", gender: "Female", salary: 53000 }, { name: "Todd", gender: "Male", salary: 60000 } ]; $scope.employees = employees; }); HTMLPage1.html : This is the HTML page where we want to reuse EmployeeList.html. Notice that we are using ng-include directive and the value for it is the name of the HTML file that we want to reuse. [!DOCTYPE html] [html xmlns="http://www.w3.org/1999/xhtml"] [head] [title][/title] [script src="Scripts/angular.js"][/script] [script src="Scripts/Script.js"][/script] [link href="Styles.css" rel="stylesheet" /] [/head] [body ng-app="myModule"] [div ng-controller="myController"] [div ng-include="'EmployeeList.html'"] [/div] [/div] [/body] [/html] In this example, we have specified the name of the HTML file in the view. You can also have a property attached to the $scope object that points to the HTML file that you want to reuse , and use that property with ng-include directive. Example : Create an HTML page with a dropdownlist that allows the user to select the view - Table or List. Depending on the selection we want to load the respective HTML page into the current HTML page i.e HTMLPage1.html If the user selects Table from the dropdownlist, the employee data should be presented using a Table If the user selects List from the dropdownlist, the employee data should be presented using an unordered list EmployeeTable.html : This HTML page presents the employee data using a table element [table] [thead] [tr] [th]Name[/th] [th]Gender[/th] [th]Salary[/th] [/tr] [/thead] [tbody] [tr ng-repeat="employee in employees"] [td] {{ employee.name }} [/td] [td] {{ employee.gender}} [/td] [td] {{ employee.salary}} [/td] [/tr] [/tbody] [/table] EmployeeList.html : This HTML page presents the employee data using 2 unordered list elements [ul ng-repeat="employee in employees"] [li]{{employee.name}} [ul] [li]{{employee.gender}}[/li] [li]{{employee.salary}}[/li] [/ul] [/li] [/ul] Script.js : The controller function attaches employeeView property to the $scope object and sets it to EmployeeTable.html. This means when the page is initially loaded the employee data will be presented using a table. var app = angular .module("myModule", []) .controller("myController", function ($scope) { var employees = [ { name: "Ben", gender: "Male", salary: 55000 }, { name: "Sara", gender: "Female", salary: 68000 }, { name: "Mark", gender: "Male", salary: 57000 }, { name: "Pam", gender: "Female", salary: 53000 }, { name: "Todd", gender: "Male", salary: 60000 } ]; $scope.employees = employees; $scope.employeeView = "EmployeeTable.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-include-directive-in-angularjs.html
Views: 162389 kudvenkat
Getting Started with Angular 2 p1
 
14:33
Also check out : "Learn and Understand AngularJS tutorials" : http://bit.ly/angularjstutorials Angular JS 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: 203 Thanxman Uk
Angular switch case example
 
05:20
In this video, we will discuss angular ngSwitch directive. Let us understand switch case with an example. Switch case in angular is a combination of 3 directives 1. ngSwitch directive 2. ngSwitchCase directive 3. ngSwitchDefault directive Text version of the video http://csharp-video-tutorials.blogspot.com/2018/03/angular-switch-case-example.html Slides http://csharp-video-tutorials.blogspot.com/2018/03/angular-switch-case-example-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 Consider the following department data. Depending on the employee's department id we want to display department name. departments: Department[] = [ { id: 1, name: 'Help Desk' }, { id: 2, name: 'HR' }, { id: 3, name: 'IT' }, { id: 4, name: 'Payroll' } ]; ngSwitch example : For example code please refer to our blog using the link below. http://csharp-video-tutorials.blogspot.com/2018/03/angular-switch-case-example.html Code Explanation 1. [ngSwitch]="employee.department". The expression (employee.department) returns department id (1, 2 , 3 etc) 2. [span *ngSwitchCase="1"] Help Desk [/span]. If the department id is 1, then this switchcase is executed and it displays Help Desk 3. [span *ngSwitchDefault] N/A [/span]. The default switch case is executed if the department id is not 1, 2, 3 and 4 4. Jus like ngIf and ngFor, the directives ngSwicthCase and ngSwitchDefault are also structural directives, hence they have an asterisk in front of them 5. If multiple ngSwitchCases match the switch expression value, then all those ngSwitchCases are displayed
Views: 6393 kudvenkat
Getting Started with Angular 2 p2
 
14:33
Also 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: 85 Thanxman Uk
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: 239 TutorialsPoint2K16