Posts

Showing posts with the label Angular 10

Angular 10 - Event Binding

Image
In Angular, event binding is utilized to handle the events raised by the utilizer actions like button click, mouse movement, etc. When the DOM event transpires at an element(e.g. click, key down, etc...) it calls the designated method in the particular component. Syntax < button (click) = " onShow() " > Show </ button > Let us consider an example to understand this better. Example1: Using click event on the input element. app.component.html <h1> Knowledgefactory </h1> <input (click)= "myAction($event)" value= "Knowledgefactory" > app.component.ts import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { myAction(event) { alert(event.toElement.value) } } In the app.component.html file, we have defined a button and added a

Angular 10 - Data Binding

Image
Data binding is a core concept in Angular and sanctions to define communication between a component and the DOM, making it very facile to define interactive applications without worrying about pushing and pulling data.  It has mainly two components: HTML Template It contains a view for the component (HTML elements: input, select, button, etc.) Component Class It contains logic for a component like classes, variables, functions, API calls, etc. The interaction between the HTML template and component class can be done through data binding. There are four forms of data binding and they differ in the way the data is flowing. Types of Data Binding: String Interpolation Property binding Event Binding Two Way Data Binding Data binding can be one-way data binding or two-way data binding. One-way databinding One way databinding is a simple one-way communication where HTML template is changed when we make changes in TypeScript code. From the Component to the DOM Interpolation: {{ value }} This a

Angular10 + Python + MongoDB CRUD application example

Image
Hello everyone, today we will learn how to develop a  web application that is a basic User Management Application using MongoDB, Angular10, Python, and Flask. GitHub repository link is provided at the end of this tutorial. You can download the source code. More Related Topics, React.js + Python + MongoDB CRUD application Python + MongoDB + Vue.js CRUD Application  Angular10 + Python + MongoDB CRUD application Python-Create a CRUD Restful Service API using FLASK and MYSQL Python-Simple CRUD Web App with Python, Flask, and Mysql Python with MongoDB Atlas - CRUD Architecture   We’re gonna build the application with the following architecture: Angular Client sends HTTP Requests and retrieves HTTP Replications utilizing HTTPClient, consuming data on the components. Angular Router is utilized for navigating to pages. Python Flask exports REST APIs & interacts with MongoDB Database using PyMongo  -View all Users: -Add a User: -Update User: -View User: We divided this tutorial into two par