Data Binding and Regular Expressions in Angular 4

Posted by

Data Binding and Regular Expression in Angular 4

https://youtu.be/dr5N6Rz7ruI

Welcome to another lesson of Angular 4 by PodinaTutorials.com. Here we will discuss, what is data binding and Regular Expressions? This lesson contains two separate topics. The first one is Data binding and the second one is Regular expressions. So in first part, we are going to discuss, what is data binding, and then in the second part, we will discuss what is Regular Expressions and how we can use it in our project. So let’s have a look at our first part:

Part 1: Data Binding

Data Binding is an important term in Angular 4, and was available from the previous versions of AngularJS, and Angular 2. {{}}; Curly braces is used for data binding and the process is also called interpolation. As you previously seen, How to declare variables, like the one declared for title and string. Let’s remind it again:

Example

The variable in the file app.component.html is referred as this {{title}} which is already initialized in the file app.component.ts.

app.component.ts

import { Component } from ‘@angular/core’;

@Component ({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’
styleUrls: [‘./app.component.css’]
})

export class AppComponent{
  title = ‘Our Course’;
  string = ‘hello world’;
}

app.component.html

<div>
  <h1> Welcome to {{title}}!  </h1>
  <h1> {{string}} </h1> 
  <app-content> </app-content> 
</div>

Part 2: Regular Expressions

In Angular 4, we can use Regular Expressions. Regular Expressions, sometimes called RegExp or RegEx, can be used in Angular 4. If you already know JavaScript! you might use it with form validation, where through validation we ensure that the form take the correct input from the user. I use them most of the time. Let’s see the following example for clear understanding.

{{ 2 < 5 ? “True” : “False” }}

The output of the above Regular expression will be true. The above condition mean;

Also Read  Angular-4 Series from Beginning to Advance

If 2 is less than 5, Then display True otherwise display False. Similarly, we can take more examples according to our requirements.

Let’s consider some more examples:

{{ 3 > 9 ? “The Condition is Right” : “The Condition is Wrong” }}

The output will be The Condition is Wrong.

{{ 3 + 5 }}

The result will be 8.

{{ 8 -  2 }}

Result will be 6.

{{ 6 * 4 }}

Output will be 24.

{{ 15 / 3 }}

You will get 5 as an output.

Similarly, you can write as many expressions as you can. But for now, let’s just know that what actually regular expression is? You can use it like if statement and in a loop. In the upcoming lessons, we will more elaborate this, but for now, just learn how it works.

Conclusion

In this lesson, we discus two things. The data binding and the regular expressions. Data Binding is also called interpolation, where we call the variable in app.component.html, which is already defined in app.component.ts file. The second thing is the Regular Expression, where we define the logic.

Suggested Book

Beginning Angular with Typescript (updated to Angular 5)

In this book, you will learn Data Binding and Regular Expression in Angular 4. You'll start building Angular apps within minutes.
Angular is one of the leading frameworks to develop apps across all platforms. Reuse your code and build fast and high performing apps for any platform be it web, mobile web, native mobile and native desktop. Here you will also learn about What is Data Binding and Regular Expression in Angular 4 You use small manageable components to build a large powerful app. No more wasting time hunting for DOM nodes!

Also Read  How to Nest Component in Angular 4

5 comments

Leave a Reply

Your email address will not be published. Required fields are marked *