DEV Community: Abhishek Jaiswal

Event Emitter in Angular Not in AngularJs!

Abhishek Jaiswal — Thu, 02 Nov 2023 08:29:44 +0000

"EventEmitter" is used in Angular, starting from version 2 and later.

In Angular, EventEmitter is a class provided by the @angular/core module, and it is used to create custom events that can be emitted from components and listened to by other components. It plays a crucial role in the parent-child communication or component interaction within an Angular application.

Here's how you can use EventEmitter in Angular:

Import EventEmitter: You need to import EventEmitter from @angular/core at the beginning of your component file where you want to use it.

   import { EventEmitter } from '@angular/core';

Declare an EventEmitter Property: Inside your component class, you declare an EventEmitter property. You can specify the event type as a generic parameter, indicating what kind of data the event will emit.

   myEvent = new EventEmitter<string>();

Emitting an Event: To emit an event, you can call the emit method on your EventEmitter instance and pass the data you want to emit. For example:

   this.myEvent.emit('Data to send to other components');

Listening to the Event: In another component or the parent component, you can subscribe to the event using the (eventEmitterName) syntax in the component's template. For example:

   <app-child (myEvent)="handleEvent($event)"></app-child>

Here, when the "myEvent" event is emitted in the app-child component, the handleEvent method in the parent component will be called with the emitted data.

Handling the Event: In the parent or listening component, you define a method that will be executed when the event is emitted. In the example above, handleEvent($event) is the method that handles the emitted event. You can access the emitted data via the $event parameter.

By using EventEmitter, you can establish communication between components in your Angular application, enabling parent-child or custom component interaction. It's a way to implement a publish-subscribe mechanism within your application, allowing components to notify and react to events without direct coupling.

Why do we use Modules in angular?

Abhishek Jaiswal — Thu, 02 Nov 2023 08:26:07 +0000

Module is a container for various parts of your applications - controller, services, filters, directive, etc.

Most applications have a main method that instantiates and wires together the different parts of the application.
Angular apps don't have main method.
But in AngularJS the declarative process is easy to understand and one can package code as reusable modules.
Modules can be loaded in any order because modules delay execution.

In Angular, modules are an essential part of the framework's architecture and are used for several important purposes:

Organizing Code: Modules help in organizing an Angular application into smaller, manageable, and reusable pieces. They allow you to group related components, services, and other Angular features together. This organization is essential for maintaining code readability, scalability, and collaboration among developers.
Encapsulation: Modules encapsulate the components, services, directives, and other Angular constructs within a specific context. This encapsulation prevents naming conflicts and makes it easier to manage dependencies.
Dependency Management: Angular modules manage the dependencies for the components, services, and other elements they contain. By specifying dependencies in the module's metadata, Angular can resolve and inject the necessary dependencies at runtime.
Lazy Loading: Angular supports lazy loading, which allows you to load parts of your application on-demand. Modules play a critical role in enabling lazy loading by allowing you to define which parts of your application should be loaded separately when needed.
Reusability: Modules make it easy to reuse code within different parts of your application or in other Angular projects. You can create feature modules that encapsulate specific functionality and then import and use these modules in various parts of your application.
Testing: Modules facilitate unit testing and end-to-end testing. You can create testing modules to configure the environment for testing specific components or services. This isolation makes it easier to write and maintain tests for your application.
Configuration: Modules provide a way to configure and set up various aspects of an Angular application, such as routes, providers, and other settings. You can define configurations specific to each module, making it easier to manage application settings.
Separation of Concerns: Angular encourages the separation of concerns in your application. You can have separate modules for different aspects of your application, like one for the main application, one for routing, one for feature components, and one for shared services. This separation enhances code maintainability and modularity.

In Angular, you typically create at least one root module (often named AppModule) that serves as the entry point of your application and import other modules as needed. Angular's modular system allows you to build complex applications while maintaining code organization, separation of concerns, and reusability.

Uploading multiple and Single files using Node.js and Express.js with MongoDB.

Abhishek Jaiswal — Tue, 13 Sep 2022 16:11:15 +0000

Multiple File

As shown in the above image of that we have to upload 3 files but that should be of different sections EMD,PAN,AADHAR and if we use the .multiple() the at a time we can select multiple file for only one field, but to do for different fields we shoud use .any(), In this you can type any number of file paths.

const upload_PAN = multer({
        storage: multer.diskStorage({
            destination: function (req, file, cb) {
                cb(null, "uploads_tender")
            },
            filename: function (req, file, cb) {
                let name = file.originalname;
                cb(null, file.fieldname + "_" + Date.now() + ".pdf")
            }
        })
    }).any('PAN_file', 'EMD_file', 'Aadhar_file')

Single File

To upload for single file only one thing we have to change
i.e.,

const upload_PAN = multer({
        storage: multer.diskStorage({
            destination: function (req, file, cb) {
                cb(null, "uploads_tender")
            },
            filename: function (req, file, cb) {
                let name = file.originalname;
                cb(null, file.fieldname + "_" + Date.now() + ".pdf")
            }
        })
    }).single('Aadhar_file')

Calling Function is the same for both.

  app.post("/upload_tender_file", upload_PAN, (req, res) => {
        let k = req.body;
        let f = req.files;
        let temp = req.files.length;
        let edm=f[0];
        let pan=f[1];
        let aadhar=f[2]

        console.log(temp);
        console.log(k);

        let size = 1;
        if (req.session && req.session.userid) {
            res.json({
                status: "warn",
                message: "Session already exists !",
                isLogged: true,
                lastUpdated: req.session.lastUpdated,
                isLatest: false,
                profile: req.session.profile,
            });
        }
        // check if any value is not null
        else if (size != 0
            && edm
            && pan
            && aadhar
            && k.tenderName
            && k.email
            && k.tenderValue
            && k.amountWords
            && k.endDate) {
            // check if record already exists...
            db.collection("tender_files").findOne(
                { projection: { _id: 1, email: 1, tenderName: 1 } },
                (error, result) => {
                    if (result && result._id) {
                        res.json({
                            status: "error",
                            message: "File already exists !",
                            isLogged: false,
                        });
                    }
                    // tenserName doesn't exists, create one
                    else {
                        let obj = {
                            tenderName: k.tenderName,
                            email: k.email,
                            profile: {
                                tenderName: k.tenderName,
                                email: k.email,
                                endDate: k.endDate,
                                amountWords: k.amountWords,
                                edm: edm,
                                pan:pan,
                                aadhar:aadhar,
                                tenderValue: k.tenderValue,
                            },
                        };
                        db.collection("tender_files").insertOne(obj, (error, results) => {
                            if (error) {
                                res.json({
                                    status: "error",
                                    message: error,
                                    isLogged: false,
                                });
                                throw error;
                            }
                            // Records inserted, auto log in
                            else {
                                // log it in
                                res.json({
                                    status: "success",
                                    message: "File Uploaded !",
                                    isLatest: true,
                                    isLogged: true,
                                    profile: obj.profile,
                                });
                            }
                        });
                    }
                }
            );
        } else {
            res.json({
                status: "error",
                message: "Empty or invalid data",
                isLogged: false,
            });
        }
    });

Java Android Studio Error

Abhishek Jaiswal — Sun, 05 Jun 2022 09:37:46 +0000

Error

The minCompileSdk (31) specified in a dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties) is greater than this module's compileSdkVersion (android-30). Dependency: androidx.lifecycle:lifecycle-runtime:2.4.0. AAR metadata file: C:\Users\jaisw.gradle\caches\transforms-3\55824bd6c9b41f557d64668e082ada18\transformed\lifecycle-runtime-2.4.0\META-INF\com\android\build\gradle\aar-metadata.properties.

The solution is in the error itself. There can be two solutions:

Before

Use Android SDK version 31 in your project. Find compileSdkVersion 30 in your app\build.gradle file, and change it to compileSdkVersion 31.
Force gradle to use an older version of the dependency androidx.lifecycle:lifecycle-process:2.4.0. If you are not directly using this dependency, force gradle to use an older version like this:

After

Thank You!

ReactDOM.render is no longer supported in React 18.

Abhishek Jaiswal — Sat, 16 Apr 2022 21:19:36 +0000

ReactDom.render is no longer supported in React latest update 18.0.0. UsecreateRoot instead untill you switch to the new API, your app will behave as it it's running React 17.
If you will try to run the ReactDom.render in index.js

then you will get warning like this.

A better alternative of this warning is change your dependency version of react and react-dom to some older version like 17.0.2 or some other which is better for you and for your project in package.json file inside the your project

or else you can use different method as well.
To solve the error, create a root element and use the ReactDOMClient.render method instead.

Make sure you are changing the index.js file




import {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// ⛔️ ReactDOM.render is no longer supported in React 18.
// Use createRoot instead. Until you switch to the new API,
// your app will behave as if it's running React 17.
ReactDOM.render( // 👈️ deprecated starting React 18
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root'),
);

To solve the error, create a root element and use the ReactDOMClient.render method instead.



import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

// 👇️ IMPORTANT: use correct ID of your root element
// this is the ID of the div in your index.html file
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ if you use TypeScript, add non-null (!) assertion operator
// const root = createRoot(rootElement!);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Let's see what's new in this React!!

React 18 introduces a new root API which provides better tools for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.



// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

for more information plase visit it's official website:
Reactjs

Private Constructor in JAVA

Abhishek Jaiswal — Mon, 11 Apr 2022 12:44:03 +0000

In JAVA the constructor is a special type of method that has the same name as the class name or file name.
And when we call an object then internally constructor always called, basically it is use to initialize the state of object or the variables values in the class.

Now Let's see what is private constructors

JAVA allows us to modify the methods based on the our use.
So can we make constructor as a private like other methods? and if YES! then what is the use of private constructor?.
Let's check it out!!

So the answer is yes we can declare a constructor in java as a private constructor by using private access specifier. And the most important thing comes into picture that if we declare a constructor as a private then we are not able to create an object of the class. Instead we can use this private constructor in Singleton Design Pattern.

Let's Check it out the Rules for Private Constructors

It doesn't allow a class to be sub-classed
It doesn't allow to create an object outside the class
If a class has a private constructor and when we try to extend the class, a compile-time error occurs.
We cannot access a private constructor from any other class.
If all the constant methods are there in our class, we can use a private constructor.
If all the methods are static then we can use a private constructor.
We can use a public function to call the private constructor if an object is not initialized.
We can return only the instance of that object if an object is already initialized.

public class PrivateConstructorDemo   
{  
     //creating an instance variable of the class Tester  
     private static PrivateConstructorDemo pcd;  
     //creating a private constructor  
     private PrivateConstructorDemo()  
     {  
     }  
    //creating a static method named getInstance()  
    public static PrivateConstructorDemo getInstance()  
    {  
       if(pcd == null)  
       {  
        //creating a constructor of the class      
        pcd = new PrivateConstructorDemo();  
       }  
     return pcd;  
    }  
    //main() method  
    public static void main(String args[])   
    {  
     PrivateConstructorDemo pcd = PrivateConstructorDemo.getInstance();  
    PrivateConstructorDemo pcd1 = PrivateConstructorDemo.getInstance();  
    //invokes the getInstance() method and prints the corresponding result  
    System.out.println(pcd.equals(pcd1));  
   }    
}

output

true

Let's see the Use Cases of Private Contractors

The main purpose of using a private constructor is to restrict object creation. We also use private constructors to implement the Singleton design pattern. The use-cases of the private constructor are as follows:

It can be used with static members-only classes.
It can be used with static utility or constant classes.
It can also be used to create singleton classes.
It can be used to assign a name, for instance, creation by utilizing factory methods.
It is also used to avoid sub-classing.
It incorporates the factory methods.

Now it's time for you to explore more about the JAVA constructors.

HTML6 and CSS4 — Future of HTML

Abhishek Jaiswal — Sun, 10 Apr 2022 15:54:14 +0000

HTML6

Well, HTML5 has been great, for creating interesting webpages and enhanced graphics and especially with CSS3,
it allows usage of jQuery API’s and many more. Lot of new tags came in like <header>, <footer> and <nav>. Lots of new functionalities came in like geolocation or drag and drop API’s and enhanced local storage. Developers and designers have used above features extensively to create new applications as well as lot of migration has also happened.

But the rate at which the technology is speeding up had never been this fast. A graphic designer or a web developer has to update themselves every now and then. So knowing one technology well is good but not the requirement of time, instead ability to grasp quickly is the key!!!

So here I would like to peek into what possibly to expect from html6, and what is being talked about of the same.

Concept of sponsored/User Defined Tags

An easy to use and express tag, a better mark-up technique is one of the features. For e.g. <div> tag has been used with multiple id’s like a wrapper or container, instead of marking up specifically by rules, you can mark it as <wrapper> or a directly. Imagine using tags like <logo></logo> to mark up your logo or using <breadcrumb></breadcrumb> or <toolbar></toolbar> and you can define all these tags using CSS4.

Requirements and Results

Latest versions of browsers will be required or even an update for all browsers will pop in, once html6 is in the picture. Security will be enhanced, peer to peer file transfer will be enabled and many such features will come into play. As for the output quality, security and coding techniques provide quicker and better graphical web pages or applications.

At Azilen we explore and innovate, and one of the definite area which looks like it is expanding from HTML5 to a more evolved web technology!!

HTML6 .

CSS 4

I am proposing that we web developers, supported by the W3C CSS WG, start saying “CSS4 is here!” and excitedly chatter about how it will hit the market any moment now and transform the practice of CSS.

Of course “CSS4” has no technical meaning whatsoever. All current CSS4 specifications have their own specific versions ranging from 1 to 4, but CSS as a whole does not have a version, and it doesn’t need one, either.

Regardless of what we say or do, CSS 4 will not hit the market and will not transform anything. It also does not describe any technical reality.

I think he’s probably right. If we all got together on it, it could have a similar good-for-everybody bang the way CSS3 did.

If it’s going to happen, what will give it momentum is if there is a single clear message about what it is. CSS3 was like:

border-radius
gradients
animations and transitions
transforms
box-shadow

Oh gosh, it’s hard to remember now. But at the time it was a pretty clear set of things that represented what there was to learn and they were all fairly exciting.

Then why do it? For the marketing effect. Let's find out while using😜.
CSS4.