Knowledge Factory

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

In this article, we will show you how to develop a  REST-style web service with Kotlin, Spring Boot, MongoDB. A quick overview of Kotlin, Spring Boot, and MongoDB    Kotlin: It’s a modern programming language targeting the Java platform. Kotlin is concise, safe, pragmatic, and fixated on interoperability with Java code. It can be used virtually everywhere Java is utilized today: for server-side development, Android apps, and much more. Kotlin works great with all subsisting Java libraries and frameworks and runs with the same level of performance as Java.   MongoDB: MongoDB is a document database built on a scale-out architecture that has to propagate with developers of all kinds who are building scalable applications utilizing agile methodologies. MongoDB was built for people who are building internet and business applications who need to evolve expeditiously and scale elegantly. If you are doing that, you should consider MongoDB. Companies and development teams of all sizes use Mongo

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

Modules consist of one or more components. It is a mechanism to group components, directives, pipes, and services that are related, in such a way that can be coalesced with other modules to engender an application. They do not control any HTML. Our modules declare which components can be utilized by components belonging to other modules, which classes will be injected by the dependency injector, and which component gets bootstrapped. Modules sanction us to manage our components to bring modularity to our app. To be able to define modules we have to utilize the decorator NgModule . import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { AppRoutingModule } from './app-routing.module' ; import { AppComponent } from './app.component' ; import { KnfDemoComponentComponent } from './knf-demo-component/ knf-demo-component.component' ; @NgModule({ declarations: [ ......

A component is one of the rudimentary building blocks of an Angular app. An app can have more than one component. In a normal app, a component contains an HTML view page class file, a class file that controls the comportment of the HTML page, and the CSS/SCSS file to style your HTML view. A component that can be engendered utilizing the @Component decorator that is a component of the @angular/core module. import { Component } from '@angular/core' ; To create the component, ng g c knf_demo_component Now, if we go and check the file structure, we will get the knf_demo_component new folder created under the src/app folder. The following files are created in the knf_demo_component folder −  knf-demo-component.component.css knf-demo-component.component.html knf-demo-component.component.spec.ts knf-demo-component.component.ts Changes are added to the app.module.ts file as follows − import { BrowserModule } from '@angular/platform-browser' ;