Angular 8: Implementing functionality for the Parent Component to detect when the User clicks outside of the Child Component Textbox

I am working on a scenario where I have a Parent Component and a Child Component containing a Formbuilder and a ZipCode textbox.

Is there a way to notify the Parent Component when the user clicks out of the Child Component Textbox? I need to trigger some business logic after the user interacts with the textbox. Currently, the textbox is using a Material Angular wrapper.

The Child Component includes a Formbuilder with multiple textboxes, as shown below:

this.editAddressForm = this.formBuilder.group({
   'city': [null, [Validators.maxLength(50)]],
   'zipCode': [null, [Validators.maxLength(10)]],

<app-input-textbox class="zipcodeclass" div="zipcode" formControlName="zipCode">
angulartypescriptangular8

Answer №1

Ensure that you trigger an event to the parent when the blur event occurs.

To achieve this, include (blur)="onBlur()" in the HTML template and assign a template reference to each input element (for example, #templateReference1, #templateReference2, and #templateReference3).

Subsequently, within the child component:

@Output() noInputFocused = new EventEmitter();

@ViewChild('templateReference1') templateReference1: ElementRef;
@ViewChild('templateReference2') templateReference2: ElementRef;
@ViewChild('templateReference3') templateReference3: ElementRef;

inputs;

constructor(@Inject(DOCUMENT) private document: Document) {}

ngOnInit() {
    this.inputs = [templateReference1, templateReference2, templateReference3];
}

onBlur() {
    if(this.inputs.map(x => x.nativeElement).indexOf(this.document.activeElement) < 0) {
        this.noInputFocused.next();
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The behavior of K6 test execution capabilities

Hey there, I'm new to K6 and I've got a query about how tests are executed. Take this small test with a given configuration for example: export const options = { stages: [ { target: 10, duration: '30s'} ]} When I run the test with ...

typescriptperformance-testingk6

Can we streamline a generic overloaded function's signature to make it more concise?

I have developed a streamlined Axios wrapper function that integrates zod-parsing and presents a discriminated union for improved error handling. While the implementation successfully maintains the default behavior of Axios to throw errors in certain cas ...

typescriptgenericsoverloading

Removing the gridlines in a Linechart using Apexcharts

I am experiencing issues with the grid and Nodata options on my Apexchart line chart. noData: { text: none , align: 'center', verticalAlign: 'middle', offsetX: 0, offsetY: 0, style: { color: undefined, fontSize: &apo ...

javascripthtmlcssangular

Ways to implement es6 in TypeScript alongside react, webpack, and babel

Being new to front-end development, I have found that following a simple tutorial can quickly help me start tackling problems in this field. One issue I've encountered is with ES5, which lacks some of the tools that are important to me, like key-value ...

typescriptnpmwebpackecmascript-6babeljs

There seems to be a problem fetching the WordPress menus in TypeScript with React and Next

Recently I've started working on a project using React with TypeScript, but seems like I'm making some mistake. When trying to type the code, I encounter the error message: "TypeError: Cannot read property 'map' of undefined". import Re ...

reactjstypescriptnext.js

Updating a one-to-one relationship in TypeORM with Node.js and TypeScript can be achieved by following these steps

I am working with two entities, one is called Filter and the other is Dataset. They have a one-to-one relationship. I need help in updating the Filter entity based on Dataset using Repository with promises. The code is written in a file named node.ts. Th ...

node.jstypescripttypeormnode.js-typeorm

Resolving CORS Error in Angular and PHP: A Comprehensive Guide

My current project involves learning Angular and creating a solution that communicates with an IIS Server running on PHP as an API. The IIS server is set up with Windows Authentication to authenticate users, and the combination of IIS/PHP is functioning p ...

phpangulariiscors

Looking to display cities based on the country chosen in Angular?

Hi everyone! I need help with creating a cascade type dropdown for displaying cities based on the selected country. I have a list of about 3,000 cities, but I only want to show the cities from the chosen country. Here is the structure of the country: " ...

angulardropdownhtml-select

Unable to assign a value to the HTMLInputElement's property: The input field can only be set to a filename or an empty string programmatically

When attempting to upload an image, I encountered the error message listed in the question title: This is my template <input type="file" formControlName="avatar" accept=".jpg, .jpeg .svg" #fileInput (change)="uploa ...

javascripthtmlcssangulartypescript

Encountering an error when setting up a React-TypeScript ContextAPI

I am currently attempting to understand and replicate the functionality of a specific package found at: https://github.com/AlexSegen/react-shopping-cart Working within a React-Typescript project, I have encountered challenges when creating the ProductCont ...

javascriptreactjstypescript

What is preventing type-graphql from automatically determining the string type of a class property?

I have a custom class named Foo with a property called bar that is of type string. class Foo { bar: string } When I use an Arg (from the library type-graphql) without explicitly specifying the type and set the argument type to string, everything works ...

typescriptgraphqltypegraphql

What does the concept of "signaling intent" truly signify in relation to TypeScript's read-only properties?

Currently diving into the chapter on objects in the TypeScript Handbook. The handbook highlights the significance of managing expectations when using the readonly properties. Here's a key excerpt: It’s crucial to clarify what readonly truly signif ...

typescript

Tips for displaying dynamic images using the combination of the base URL and file name in an *ngFor loop

I have a base URL which is http://www.example.com, and the file names are coming from an API stored in the dataSource array as shown below: [ { "bid": "2", "bnam": "ChickenChilli", "adds": "nsnnsnw, nnsnsnsn", "pdap": " ...

htmlangulartypescript

Differences between Object and Typecasted Literal Object in TypeScript

I'm currently grappling with the decision of whether to use an interface or a class in my TypeScript code. Coming from a background in C#, I find the strictness of classes appealing, but there is also a certain allure to the flexibility offered by int ...

typescript

How can you transfer array elements to a new array using JavaScript?

I have a task to transform the fields of an array received from one server so that they can be understood by another server for upload. My approach involves first retrieving and displaying the original field names from the initial server's array to al ...

javascriptarraysangularobject

Angular Service: AppleID is not recognized following the loading of the Apple script

I'm new to this forum and have been struggling to find a solution for my problem. I am attempting to integrate AppleConnect into my Angular 8 app with the following approach: I have created an appleService.ts file that dynamically generates the Apple ...

angulartypescriptpromise

Enhancing Typescript Arrow Function Parameters using Decorators

Can decorators be used on parameters within an arrow function at this time? For instance: const func: Function = (@Decorator param: any) => { ... } or class SomeClass { public classProp: Function = (@Decorator param: any) => { ... } } Neither W ...

typescriptannotationsmetaprogrammingdecoratorarrow-functions

Leveraging Javascript Modules within a Typescript Vue Application

The issue at hand I've encountered a problem while attempting to integrate https://github.com/moonwave99/fretboard.js into my Vue project. My initial approach involved importing the module into a component as shown below: <template> <div&g ...

javascriptnode.jstypescriptvue.jsnode-modules

Is there a way to retrieve the attributes of a generic object using an index in TypeScript?

I'm currently working on a function that loops through all the attributes of an object and converts ISO strings to Dates: function findAndConvertDates<T>(objectWithStringDates: T): T { for (let key in Object.keys(objectWithStringDates)) { ...

node.jstypescriptgenericstypescript-genericsindex-signature

Integrate a service component into another service component by utilizing module exports

After diving into the nestjs docs and exploring hierarchical injection, I found myself struggling to properly implement it within my project. Currently, I have two crucial modules at play. AuthModule is responsible for importing the UserModule, which conta ...

typescriptnestjs