Transfer Data from Parent to Child Component in Angular 8

Sravani Alamanda
Updated on 21-Feb-2023 18:25:24

13K+ Views

In Angular 8, to transfer data from the parent component to the child component, we use the @Input decorator. The @Input decorator is one of the property decorators in angular. Now, Let’s look into the steps of how the @Input decorator works from the parent component to the child component. Prerequisites First, we need some prerequisites before proceeding. Like Minimal knowledge on angular. Any IDE like WebStorm, Intellij or Visual studio/code installed. Angular CLI must be installed. Nodejs must be installed. Steps Here, I explained steps to transfer data from the parent to child component. First create ... Read More

Transfer Data from Child to Parent Component in Angular 8

Sravani Alamanda
Updated on 21-Feb-2023 18:23:02

9K+ Views

In this, we will learn how to get the data from the child component to the parent component. In angular 8, using @Output decorator and EventEmitter we can transfer the data from the child component to the parent component. Here, takes an example like in the child component we have an input field and button. Whenever the user clicks on the button parent components get to know about the input value from the child component. Let’s see how to do that. Prerequisites Knowledge on angular. Install node and CLI. Create a project. Create child and parent components using NPM ... Read More

Inject a Service into a Component in Angular 8

Sravani Alamanda
Updated on 21-Feb-2023 18:18:48

5K+ Views

In Angular, services are singleton objects which normally get instantiated only once for the entire angular application. Every service contains several methods and that includes some functionality to do. It is a mechanism to share functionality or responsibility within one or more than components. We know, using Angular we can create nested-based component. Once our applications are nested, we may need to use the same functionality. Instead of writing same code in multiple components. We can write one place and we can share data with different components. The best way to use service to handle this. In first versions of ... Read More

Display Tables Using AngularJS

Sravani Alamanda
Updated on 21-Feb-2023 18:14:43

2K+ Views

The data in tables are basically repeatable. In AngularJS, a better way to display tables is the ng-repeat directive. The ng-repeat directive will help us to loop through the array data in the DOM elements and helps us to display tables very easily. Let’s check how to use ng-repeat for creating tables. Ng-repeat The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Syntax Here, to create tables follow given steps. Set ... Read More

Difference Between Constructor and ngOnInit in Angular 8

Sravani Alamanda
Updated on 21-Feb-2023 17:46:31

9K+ Views

We can create robust applications using a number of life cycle functions using Angular. As it is the response of the event, the constructor and ngOnInit play important roles in developing applications. May this constructor and ngOnInit terms often confuse us. Constructor and ngOnInit will be available from the life cycle hooks of a component. This will provide extensive benefits to us in developing applications. Let’s check the differences below. Before that, let’s discuss the constructor and ngOnInit in detail. What is the Constructor in Angular 8? Constructor is a default method for a class and is called whenever we ... Read More

Generate CSS Selector Path of a DOM Element

Saurabh Anand
Updated on 21-Feb-2023 17:38:14

335 Views

The generateSelector method is a helpful tool for determining the path to a specific portion of a website known as a DOM element. Understanding how CSS selectors work and how to build them can be useful in a variety of situations, such as testing automation or the construction of shortcuts for easy element selection. We will discuss the function's concept and offered a clear example of how to use it in this article. Imagine you want to make a change to one specific element on a website. But how do you know what selector to use? That's where our ... Read More

Create Button to Submit Form and Download PDF Simultaneously

Saurabh Anand
Updated on 21-Feb-2023 17:33:07

3K+ Views

By using HTML, JavaScript and jsPDF, we can create a button that can submit the form and download a pdf simultaneously. We will use HTML to create a form, JavaScript to handle the submission process and jsPDF to generate the PDF document. The act of submitting a form and getting a PDF is among the most frequent use cases. On the internet, PDFs are a common format for documents. They may be used to keep track of contracts, invoices, and other crucial data. In many instances, submitting a form is required before receiving a PDF. Let’s discuss the complete procedure ... Read More

Create Bootstrap Spinner to Display While Loading Data from API

Saurabh Anand
Updated on 21-Feb-2023 17:31:43

8K+ Views

Using Bootstrap, we will create a Bootstrap spinner and display it on the screen until data from an API is loaded. This will give customers visual indications that something is going on in the background and can be an excellent method to improve the user experience. In this blog, we will be utilizing Bootstrap, a famous front-end programming framework. Follow the below steps to create a Bootstrap spinner and display on screen till the data from the API loads - Step 1: Include the Bootstrap CSS and JavaScript Files We will begin with our first step by importing JavaScript ... Read More

Create a Binary Calculator Using HTML, CSS, and JavaScript

Saurabh Anand
Updated on 21-Feb-2023 17:29:03

1K+ Views

A binary calculator is a program that performs mathematical calculation on binary numbers. Now, as of you remember the binary numbers are those numbers which are formed from only two numbers i.e., 0 and 1. In this blog, we will use this program to calculate addition, subtraction, multiplication and division on binary numbers. This will be a basic calculator that will use basic concepts of HTML, CSS and JavaScript to do the same. So, let’s get started with the HTML structure. HTML Structure Firstly, we will make a form which will be divided into table rows giving features like ... Read More

Create 3D Geometries in WebGL and p5.js

Saurabh Anand
Updated on 21-Feb-2023 17:27:50

826 Views

Creating 3D geometries in webGL and p5.js is a powerful way to create interactive and visually interesting web applications. With the ability to create basic shapes, add textures, lighting, and materials, and transform 3D geometries, we can create a wide range of 3D graphics and animations. By understanding the basics of webGL and p5.js, we can create stunning 3D geometries for their web applications. 3D Shapes creation The first step is to generate some 3D geometries using webGL and p5.js built-in functions. These shapes can be produced using the library's built-in methods, such as sphere(), box(), and cylinder(). ... Read More

Advertisements