What is the best way to retrieve the output value using the EventEmitter module?

I have an element that sends out a simple string when it is clicked

Here is the HTML code for my element:

<div (click)="emitSomething($event)"></div>

This is the TypeScript code for my element:

@Output() someString: EventEmitter<string> = new EventEmitter();

emitSomething(event: string) {
  this.someString.emit(event)
}

Now, I would like to pass this string to another element so that I can utilize it there, how can I achieve that?

This is what I attempted in the second element:

<component-one (someString)="variable"></component-one>

The TypeScript code for my second element:

@Output() someString: EventEmitter<string> = new EventEmitter();

variable: string; // This variable should hold the string value from the first element 

UPDATE: When I try this method, I receive the following error message in the console

Can't bind to 'someString' since it isn't a known property of 'component-one'.

Answer №1

To transfer the emitted value from a child component to a variable in the parent component, you can use the following method:

<child-component (emittedValue)="parentVariable = $event"></child-component>

Answer №2

To set a string in your main component, you can create a function like this:

public setString(input: string){
    this.text = input;
}

Then use it in the following way:

<custom-component (inputString)="setString($event)"></custom-component>

Answer №3

In order for this component to receive the emitted value, it must be a child of 'another component' where you use EventEmitter to emit the value. Add the following code to your parent component:

<child-component (someString)="someStringFunction($event)"></child-component>

You can then create a function in your parent component like this:

public someStringFunction(eventValue: string){
    this.variable = eventValue;
}

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

Updating a boolean value when the checkbox is selected

Hey there! I'm currently working on a project using Angular and have a collection of elements that can be checked, which you can check out here. In terms of my business logic: stateChange(event: any, illRecipe: Attendance){ var state: State = { ...

Automatically shift focus to the next input when reaching the maximum length in Angular

Looking for a smoother way to focus the next input element in Angular without manually specifying which one. Here's my current HTML setup... <div class="mb-2 digit-insert d-flex align-items-center"> <div class="confirmation-group d-flex"&g ...

The confirm alert from Material UI is being obscured by the dialog

How can I ensure that a material ui dialog does not hide the alert behind it when confirming an action? Is there a way to adjust the z index of the alert so that it appears in front of the dialog? import Dialog from "@material-ui/core/Dialog"; i ...

Implementing Angular 8 with Server-Side Rendering

After upgrading my app from Angular 5 to Angular 8 and enabling server side rendering, I encountered an issue. Despite starting the SSR server without any errors via terminal, I kept receiving the error below when running the application in the browser. I ...

Error in Typescript SPFx: The property 'news' is not found in the type 'Readonly<{}>'

Currently, I am working on developing a spfx react component to showcase an RSS feed in the browser. My prototype is functional in a test environment, however, as spfx utilizes TypeScript, I am encountering a type error that I am unsure how to resolve. Rs ...

resolved after a new promise returned nothing (console.log will output undefined)

Here is my Promise Function that iterates through each blob in Azure BlobStorage and reads each blob. The console.log(download) displays the values as JSON. However, when trying to close the new Promise function, I want the resolve function to return the ...

What is preventing the CKEditor 4 Angular module from properly validating form fields?

Why is it that the form field validation for the CKEditor 4 Angular module does not seem to be functioning properly? You can find my code here. I have experimented with different combinations of .touched, .pristine, and .valid. Despite this, the CKEdito ...

Modifying tooltip format in React ApexChart from dots to commas

I am in the process of creating an app targeted towards German users, who traditionally use commas (20,00) instead of dots (20.00) for numbers. I am using react-apexcharts and struggling to figure out how to replace the dots with commas in both my chart an ...

Can you explain the meaning and significance of the @Injectable annotation?

Is the use of @Injectable indicating that we are able to inject MyService into other classes, or does it mean that we can inject other classes into MyService? @Injectable({ providedIn: 'root' }) export class MyService { constructor() { } } ...

Utilizing the onBlur event to control focus within a React element

In the React component I'm working on, I have implemented an onBlur event handler. The logic inside this handler is supposed to return focus back to the target element. This code is written in TypeScript. emailBlur(e: React.FocusEvent<HTMLInputEle ...

The data in my MySQL table is not appearing on an Angular Material table when using Node.js

HTML file content <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef> No. </th> <td mat-cell *matCellDef="let element"> {{ele ...

Date Polyfill with Internationalization API in Angular 4/Angular-cli is not functioning as expected

I am struggling to make the polyfill of the Internationalization API work properly. The documentation (https://angular.io/docs/ts/latest/guide/pipes.html) states that all you need to do is add a script to your index.html: <script src="https://cdn.poly ...

What is the best way to handle a ReadableStream for a POST request?

I'm currently working on implementing basic CRUD operations using the latest Next.js 13 route handlers in combination with Prisma using TypeScript. This is how my POST request handler appears: export async function POST(req: NextRequest) { const c ...

What causes TypeScript to convert a string literal union type to a string when it is assigned in an object literal?

I am a big fan of string literal union types in TypeScript. Recently, I encountered a situation where I expected the union type to be preserved. Let me illustrate with a simple example: let foo = false; const bar = foo ? 'foo' : 'bar' ...

Sending a post request to an Express.js API from a different device

I currently have a server running on localhost:3000, with my app.js set up to utilize the angular router. When attempting to access localhost:3000 in my browser (for example: app.use('/', express.static(path.join(__dirname, '/dist/Client&apo ...

Is it possible to exclude a certain prop from a styled component that has emotions?

Within my code, there exists a component called BoxWithAs, which is defined as follows: const BoxWithAs = styled.div( { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale' // And more … } ); Everythin ...

Using TypeScript, effortlessly retrieve objects within React components based on their keys

I am looking for a way to dynamically choose a React component based on a key within an object import React, {useState, useEffect} from 'react' import ComponentA from '@components/ComponentA'; import ComponentB from '@components/Co ...

Having trouble viewing the initial value in an AngularJS2 inputText field

I'm having trouble displaying the initial value in inputText. I'm unsure of what mistake I'm making, but the value should be showing up as expected. Kind regards, Alper <input type="text" value="1" [(ngModel)]="Input.VSAT_input1" name= ...

Sharing properties between components

While this topic has been discussed extensively, I am still struggling with my specific example. In my setup, I have a react-select component nested within another component, which is then part of the larger App component. SubjectSelect.tsx export default ...

Error: Module 'redux/todo/actions' could not be located. Please check the file path

Despite reading numerous posts and articles on getting absolute imports to work in a TypeScript project, I have not encountered any issues with this. My project is functioning properly with absolute imports. However, within VS Code, all absolute imports a ...