text: We.
  We.
  In two-way databinding, automatic synchronization of data happens between the Model and the View. Here, change is reflected in both components. Whenever you make changes in the Model, it will be reflected in the View and when you make changes in View, it will be reflected in Model.
  This happens immediately and automatically, ensures that the HTML template and the TypeScript code are updated at all times.
  In two way data binding, property binding and event binding are combined together.
  Syntax:
  [(ngModel)] = "[property of your component]"
  Let's take an example to understand it better.
  Open your project's app.module.ts file JavaTpoint"; }
  app.component.html file:
  <h2>Two-way Binding Example</h2> <input [(ngModel)]="fullName" /> <br/><br/> <p> {{fullName}} </p>
  Now, start your server and open local host browser to see the result.
  Output:
  You can check it by changing textbox value and it will be updated in component as well.
  For example:
  Thank you for reading!
  In this article, You’ll learn how to implement AES encryption and decryption in Angular 8 while developing an application.
  Introduction
  In this article, You’ll learn how to implement AES encryption and decryption in Angular 8 while developing an application.
  Concepts
  The AES is the advanced encryption standard. So, these algorithms have been the standard of encryption for organizations like the NSA and anyone else that wants to hide their data. So, it’s a critical part of the computer science curriculum. that you should understand if you’re a software developer.
  Actually, DES and AES were both developed to solve the same problem in 1971. this algorithm was invented by two Belgian cryptographers, Vincent Rijmen and Joan Daemen. IBM was the inventor of this algorithm called DES. it gradually became insecure and crackable as computer software or as computer hardware.
  In the late 1990s, the government the NSA, in particular, decided that they needed to have an improved algorithm. so they put open a worldwide search and took ideas from fifteen different groups. then they create something that has been a standard for now over 20 years so these algorithms are known as symmetric ciphers.
  You would have a single password or key that would encrypt your document and then that same key is going to unlock the document. so that key is important the alternative to symmetric encryption is called asymmetric encryption.
  When to use AES Encryption
  1. EncryptionDescryptionSample
  After that, we need to install a crypto.js file, by the below command.
  npm install crypto-js --save
  For better responsive UI, we also install bootstrap by the below command.
  npm install bootstrap --save
  Now, Let’s go an open “app.component.html” file and replace the existing code with the following>
  After that, open “app.component.ts” file and write the following code, we used the Encrypt method of AES and passed our plain text with a password to encrypt the string. then Similarly, we used the Decrypt method of AES and passed our encrypted text with a password to decrypt the string. Be assured that both times, your password we’ll be the same. so, using both of these methods, you just need to import “CryptoJS” from crypto-js libraries.); } } }
  Now, Run the project by using the below command.
  ng serve --o
  Here is the output.
  I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others. Thank you !.
  In this post, we'll learn about reading XML file in Angular 8. Reading XML files is very important in certain circumstances, especially when the server returns the data in XML format.Introduction
  In this post, we'll learn about reading XML file in Angular 8. Reading XML files is very important in certain circumstances, especially when the server returns the data in XML format.
  We will use a static XML file stored in the local system in the assets folder of our project.
  Prerequisites
  XML File
  <?xml version="1.0" encoding="UTF-8"?> <Employee> <emp> <id>1</id> <name>Faisal</name> <gender>Male</gender> <mobile>514545</mobile> </emp> <emp> <id>2</id> <name>Bhavdip</name> <gender>Male</gender> <mobile>5431643</mobile> </emp> <emp> <id>3</id> <name>Irshad</name> <gender>Male</gender> <mobile>43265436</mobile> </emp> <emp> <id>4</id> <name>Keyur</name> <gender>Male</gender> <mobile>5435431</mobile> </emp> <emp> <id>5</id> <name>Tabish</name> <gender>Male</gender> <mobile>432656</mobile> </emp> </Employee>
  Create a new project in Angular 8 by typing the following command.
  ng new read-xml-angular8 --routing
  After creating the project, open the project in your favorite editor and install the "timers" npm package.
  npm install timers
  This package is necessary for reading an XML file with xml2js package.
  Open the index.html present at root folder and add a reference for Bootstrap and jQuery.
  <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>ReadXmlAngular8</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href=""> <script src=""></script> <script src=""></script> <script src=""></script> </head> <body> <app-root></app-root> </body> </html>
  Open the app.component.ts file and add the following code in it.
  import { Component } from '@angular/core'; import xml2js from 'xml2js'; import { HttpClient, HttpHeaders } from '@angular/common/http'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'read-xml-angular8'; public xmlItems: any; constructor(private _http: HttpClient) { this.loadXML(); } loadXML() { this._http.get('/assets/users.xml', { headers: new HttpHeaders() .set('Content-Type', 'text/xml') .append('Access-Control-Allow-Methods', 'GET') .append('Access-Control-Allow-Origin', '*') .append('Access-Control-Allow-Headers', "Access-Control-Allow-Headers, Access-Control-Allow-Origin, Access-Control-Request-Method"), responseType: 'text' }) .subscribe((data) => { this.parseXML(data) .then((data) => { this.xmlItems = data; }); }); } parseXML(data) { return new Promise(resolve => { var k: string | number, arr = [], parser = new xml2js.Parser( { trim: true, explicitArray: true }); parser.parseString(data, function (err, result) { var obj = result.Employee; for (k in obj.emp) { var item = obj.emp[k]; arr.push({ id: item.id[0], name: item.name[0], gender: item.gender[0], mobile: item.mobile[0] }); } resolve(arr); }); }); } }
  Here is the code for app.component.html file.
  <div class="container"> <table class="table table-bordered table-hover"> <tr> <th>Id</th> <th>Name</th> <th>Gender</th> <th>Mobile</th> </tr> <tr * <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.gender}}</td> <td>{{item.mobile}}</td> </tr> </table> </div>
  Finally, add the HttpClientModule reference in the app.module.ts file and that’s it.
  OutputOutput { }
  Please give your valuable feedback/comments/questions about this article. Please let me know if you liked and understood this article and how I could improve it.
  Thank for reading!