Data | Kevin Chisholm

Aug72018 by dcmNo Comments

How do I use the Angular ngModel directive?

The ngModel directive creates a two-way data binding between an HTML form element and the component.

In the most recent version of Angular, data binding is one-way by default. Notably, this is one of the key improvements over Angular 1.x in that it eliminates unnecessary performance issues that can crop up quickly. But the beauty of the ngModel directive is that it provides a way to explicitly give your template and your component’s data a two-way binding. So, when it is changed on one end, it is updated on the other. In other words, your data becomes “live”.

Now the most common case for two-way data binding is HTML forms. Here, as the user makes changes to a form, you want to capture those changes in your data. And conversely, you’ll also want any changes in your data to be reflected in the form. And here’s where Angular’s ngModel directive comes in; it’s the key to this live relationship. You simply assign a data point from your component to this directive in your template and your binding becomes two way. Take a look at the examples below, for further examination.

Example # 1

import {Component} from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html'
})
export class HomeComponent {
  content: string = "";
  title: string = ""; 
}

import {Component} from '@angular/core';

@Component({

selector: 'home',

templateUrl: 'src/home/home.html'

})

export class HomeComponent {

content: string = "";

title: string = "";

}

In Example # 1, we have our component. There are two properties: content and title. These properties will be connected to our form input elements via the ngModel directive. This two-way data-binding means that when the property is changed in one place, it is updated any place else that it is referenced, and vice verse.

Example # 2

<div>
    <h2>Create Content</h2>
    <input
    type="text"
    [(ngModel)]="title"
    placeholder="Enter a title" />
    <textarea
    type="text"
    [(ngModel)]="content"
    placeholder="Enter some text here...."></textarea>
</div>
<hr />
<div>
    <h2>{{title}}</h2>
    {{content}}
</div>

<div>

<h2>Create Content</h2>

<input

type="text"

[(ngModel)]="title"

placeholder="Enter a title" />

<textarea

type="text"

[(ngModel)]="content"

placeholder="Enter some text here...."></textarea>

</div>

<hr />

<div>

<h2>{{title}}</h2>

</div>

In Example # 2, we have our Angular template. There is a text-input element and a textarea element. The text-input element has an ngModel directive and its value is: title. This means that two-way data binding is set up for the title property. The textarea element has an ngModel directive and its value is: content. This means that two-way data binding is set up for the content property.

Below the input elements is a div element with two placeholders: {{title}} and {{content}}. The net result of this is that when you enter any text in the text input, that text will update the {{title}} placeholder in the UI. Also, when you enter any text in the textarea, that text will update the {{content}} placeholder in the UI

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: github.com/kevinchisholm/video-code-examples/tree/master/angular/templates-and-data/ngModel

Summary

So, Angular’s default one-way data binding methodology is a key benefit of its 2+ upgrade. And, of course, in most cases, this approach is sufficient. But, as it turns out, in some cases, such as HTML forms, you want a “live” connection between your form and your data source. So this is where ngModel directive comes in. It provides the “live” connection otherwise known as two-way data binding.

Jan172014 by dcm2 Comments

Angular 1.x Data-Binding Basics: the ng-model Directive (Part I)

Angular

Data-binding with Angular.js is surprisingly simple. To get started, you need only specify an ng-model directive.

One of the most common tasks for any JavaScript developer is to inject a value into the DOM. This value can be a variable or the property of an object. When doing so, you need to make a reference to the target element, and then use a native JavaScript or jQuery method to inject that value (e.g. [SOME_ELEMENT].innerHTML or $(SOME_ELEMENT).html() ). But if that value is injected into more than one element, your work grows exponentially. You now have to manage multiple DOM element references, write code that makes the injections, and also code that pays attention to the data you are working with, so that when that data changes, you can update the DOM element(s) that need to know about that update.

Angular.js provides jaw-dropping abstraction that not only takes care of your messy DOM injection & data-management tasks, but does so with a simplicity and elegance that is truly to be admired.

This scenario can quickly spiral into a frustrating mess of nested-callbacks, hard-coded DOM element references and data-handling functions.

One of the main features of Angular is “Directives.” Angular.js directives are extensions of HTML. They look / function much like HTML attributes; each directive is part of the element’s opening HTML tag, and requires a value, which is enclosed in double-quotes. The ng-model directive specifies the name of a piece of data, which one or more elements can be bound to.

Before we get started, we’ll need to let Angular.js know that we want it to manage our web page. We can do this by adding an ng-app directive to the markup that we want managed (or an element on the page that is a descendant of that markup, such as HTML or BODY).

Example # 1

<body ng-app>

1	<body ng-app>

In Example # 1, we see the ng-app directive. This simply tells Angular to manage everything inside of the BODY tag. We could have placed this close to the elements that we actually want Angular so manage, but it is most simple, and not uncommon, to place it in the BODY tag.

Example # 2

<input type="text" ng-model="myData" />
<p class="content"><b>The Value of NG-MODEL is:</b><span class="val">{{myData}}</span></p>

1 2	<input type="text" ng-model="myData" /> <p class="content"><b>The Value of NG-MODEL is:</b><span class="val">{{myData}}</span></p>

In Example # 2, we have a text box (an input that has a type attribute of “text”), and a paragraph. We have provided an ng-model attribute for the input element, and provided a value of “myData”. Behind the scenes, Angular has created an object that is a private variable of a function, given it a property named “myData”, and bound the value of it to this element. Anything that we type into this textbox will become the updated value of the “myData” property, and when that same “myData” property is changed elsewhere, this textbox will reflect that new value. This two-way data-binding is one of the most powerful features of Angular.js. You’ll also notice that in the HTML of Example # 2, there is a set of double-curly braces, with the text “myData” inside of it. This tells Angular that the value of myData should go inside of the double-curly braces, and be updated whenever the value of myData changes. If you click the link below, it will take you to the JsFiddle.net link for the fully working demo of Example # 1’s code.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 2: http://jsfiddle.net/L69aq/

How to Demo: Type anything in the text box. You’ll see that whatever you type is updated in the element below the text box. Both the text-box and the element that displays the text are bound to the “myData” property of the same object, which has been created by Angular.

Example # 3

<select ng-model="myData"/>
  <option>Small</option>
  <option>Medium</option>
  <option>Large</option>
  <option>Super-Size</option>
</select>

<option>Small</option>

<option>Medium</option>

<option>Large</option>

<option>Super-Size</option>

</select>

In Example # 3, we have added a select element to the page. We have included an Angular ng-model directive and specified a value of “myData”. This means that the select element is bound to the exact same data as the two elements in Example # 2’s code.

If you click the link below, it will take you to the JsFiddle.net link for the fully working demo of Example # 3’s code.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 3: http://jsfiddle.net/L69aq/1/

How to Demo: In addition to typing something in the text box, you can now select one of the options from the drop-down box. Now that SELECT element, the text-box, and the element that displays the text are bound to the “myData” property of the same object, which has been created by Angular.

Summary

In this article, we covered the bare-bones basics of data-binding in Angular.js. The key component here is the ng-model directive. We discussed how the ng-model directive creates a property of an object that is a private variable of a function, and bound to any element whose ng-model directive’s value is the same. We also demonstrated that when more than one element’s ng-model directive values are the same, there is a two-way data binding because when one element changes the value of the data, the rest of the elements bound to that data are updated, and vice versa.

This article merely scratches the surface of data-binding in Angular.js, but the hope is that it has provided a foundation upon which you can start to understand the incredibly powerful and elegant JavaScript library.

Helpful Links for Angular.js Data Binding Basics

http://docs.angularjs.org/guide/databinding

http://docs.angularjs.org/api/ng.directive:ngModel

http://en.wikipedia.org/wiki/AngularJS#Two-way_data_binding

Jan232012 by dcmNo Comments

Building Dynamic HTML Markup with JavaScript – the Basics

JavaScript

When you need to iterate over a data set, and build markup using its elements, there are a few techniques that make this a snap

Sometimes you may need to build markup and insert it into the page, but perhaps you do not know what that markup will be. Actually, you would probably know most of what will happen: you have some markup that needs to be repeated one or more times, and in each iteration, the text in certain elements will change. A typical scenario is one in which you have multiple records in a data set, and you need to create a series of elements that will be similar, but each row in the data set will have it’s own copy of the markup and display its values. Same markup, but unique values with each iteration.

Example # 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dynamic Markup with JavaScript Example</title>
       <script language="javascript"  src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
	<script id="demo" type="text/javascript">
		$(document).ready(function() {
			// our array of objects for some data to play with
			var arr = [
				{ fname : "Bart", lname : "Simpson", email: "bsimpson@somedomain.com"},
				{ fname : "Alfred E", lname : "Newman", email: "aenewman@somedomain.com"},
				{ fname : "Steve", lname : "Austin", email: "saustin@somedomain.com"}
			]

			var i = 0,
				arrLen = arr.length - 1
				str = "";
			// loop through all elements in the array, building a form for each object
			for (; i <= arrLen; i++ ) {
			str = str + '<form>'
							+ '<label for="fname"><b>First Name:</b></label> <input type="text" name="fname" size="20" value="' + arr[i].fname + '" />'
							+ '<label for="lname"><b>Last Name:</b></label> <input type="text" name="lname" size="20" value="' + arr[i].lname + '" />'
							+ '<label for="email"><b>Email:</b></label> <input type="text" name="email" size="20" value="' + arr[i].email + '" />'
							+ '<button type="submit">Submit</button>'
						+ "</form>";
			};
			//append the markup to the DOM
			$("#foo").html(str);
		});
	</script>
    <body>
		<div id="foo"></div>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dynamic Markup with JavaScript Example</title>

</head>

$(document).ready(function() {

// our array of objects for some data to play with

var arr = [

{ fname : "Bart", lname : "Simpson", email: "bsimpson@somedomain.com"},

{ fname : "Alfred E", lname : "Newman", email: "aenewman@somedomain.com"},

{ fname : "Steve", lname : "Austin", email: "saustin@somedomain.com"}

]

var i = 0,

arrLen = arr.length - 1

str = "";

// loop through all elements in the array, building a form for each object

for (; i <= arrLen; i++ ) {

str = str + '<form>'

+ '<label for="fname"><b>First Name:</b></label> <input type="text" name="fname" size="20" value="' + arr[i].fname + '" />'

+ '<label for="lname"><b>Last Name:</b></label> <input type="text" name="lname" size="20" value="' + arr[i].lname + '" />'

+ '<label for="email"><b>Email:</b></label> <input type="text" name="email" size="20" value="' + arr[i].email + '" />'

+ '<button type="submit">Submit</button>'

+ "</form>";

};

//append the markup to the DOM

$("#foo").html(str);

});

</script>

<body>

</body>

</html>

In Example # 1, we first created our data set (the variable “arr”), which is a JavaScript array. Each element of the array is an object literal, containing three fields. We then proceed to loop through all the elements of the array and for each one, we create a form. In each form, we mix the markup (which is the same with each iteration), but mix in the values from the data set so that when finished, each element in our data set has its own HTML form (think of it as rows in a table or records in a database). When we are finished creating the markup, we simply use the jQuery .html() method to insert our markup into the DOM, using the ID of a specific HTML element.

Two Quick Notes:

Variable Declarations – When declaring multiple variables, keep in mind that you can do so with one “var” statement, and separate each variable name with a comma. This makes things a bit easier to read and some argue that it is faster.

String Concatenation – Instead of one insanely long string, you can use the “+” operator, and break your assignments into multiple lines. Although this is JavaScript, it makes it look a bit more like actual markup.

Summary

There are, of course, much more elegant ways to do this; John Resig’s JavaScript Micro-Templating technique is a cool example. And there are plenty of others out there. Here, I’ve simply covered the basic concept of working with data, and creating HTML on the fly to present that data in the page, regardless of the amount of data, or values it contains.

Helpful links for building dynamic HTML markup with JavaScript

http://markalexanderbain.suite101.com/an-introduction-to-dynamic-html-with-javascript-a74777

http://www.scriptingmaster.com/javascript/outputting-dynamic-HTML.asp

http://stackoverflow.com/questions/6106402/php-vs-javascript-for-dynamic-html-pages