Angular 5 - Data Binding Part 1


Data Binding - 1

We use data binding for communication in an angular application.We used data binding mainly for the communication between TypeScript and components.There are two ways for data binding.

Method 01 - One way data binding

We use One way data binding for one way communication .In one way data binding HTML template is changed when we make changes in TypeScript code.That means you can update your view file using model.But you cant change model file using view file.

Examples for one way data binding are,
  • Angular Interpolation / String Interpolation
  • Property Binding
  • Event Binding

Method 02- Two way data binding

In two way data binding if we change the model (TypeScript File) it reflects to view (HTML File) and if we change the view it reflects to the model.This happens immediately and automatically, after we do changes.It ensures that the HTML template and the TypeScript code are updated at all times.

String Interpolation 

By using String Interpolation make changes on component.ts file and fetch that data from HTML file. (component.html file).When we need to concatenate strings, we must use interpolation.
  • As a example i have given values to the studentID and studentName varibles in my component.ts file.

  • I have fetch the variables data which i included in component.ts file in component.html file.




Property Binding

Property binding is also used for data binding.We can use Property Binding when you have to set an element property to a non-string data value.
eg 1 : In this example we used property biding for string property.
          The value from studentSchool property and inserts it using the html property innerHtml of <h1> element.



eg 2: In this example we used property biding for non-string property.(for a boolean value)






Comments

Post a Comment

Popular posts from this blog

Angular 6 - Data Binding Part 2

Image
 Data Binding - 2 Event Binding Event binding used to build interactive angular applications with the flow of data from component to the element and from element to component . Event binding syntax will have a target event name within parentheses on the left of an equal sign, and a quoted template statement on the right. Eg 1: In this example I used a button to demonstrate the event binding. In here we are binding an onClick() event to the button element. When the user clicks on the button, event binding listens to the button's click event and calls the component's onClick() method in component.ts file. Eg:2  . In here there is  a method named "onUpdateServerName" and add an event with it.
Read more

Machine Learning

Image
Machine Learning  What is  Machine Learning? "Machine learning is the scientific study of algorithms and statistical models that computer systems use to effectively perform a specific task without using explicit instructions, relying on patterns and inference instead. It is seen as a subset of artificial intelligence." In traditional programming, we feed a set of instructions for a defined set of scenarios to the computer. Then the computer will utilize its computing capabilities to help human process the data efficiently. In machine learning, a large amount of data is input into the computer. Then computer processes all the data and comes up with a trained model(solution). After this model is used to solve the unseen problems of the real world. Applications of  Machine Learning Machine Learning has started growing fast because nowadays we have less expensive computational power and lots of data which we can use the train our models. Therefore Machin
Read more

Angular

Image
Angular Angular is a structural framework for building dynamic web apps. With Angular designers can use HTML as the template language and it allows for the extension of HTML's syntax to convey the application's components effortlessly. Angular has components and those components are highly reusable in the Angular application. Angular is a cross platform language. It supports multiple platforms. You can build different types of apps by using Angular.Those application are Desktop applications, Native applications, Progressive web applications. Angular provides Testing, animation and Accessibility. It provides full stack development along with Node.js, Express.js, and MongoDB. Special Characteristics of Angular MVC –  This is a design pattern used in all modern day web applications. Data Model Binding – You don’t need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code. Writing less code
Read more