Sharing selected value between Angular 2 components: A step-by-step guide

Is there a way to pass the value selected from one of the options to another component using ngModel? I am able to save the value with ngModel but struggling to figure out how to pass it.

Component1.ts

  <select [(ngModel)]="selectedElement.id">
    <option *ngFor="let type of types" [ngValue]="type.id"> {{type.Name}}</option>
  </select>
  @Input() selectedElement:any= {id:2,Name:'abdfsdgsc'};
  types:any[]=[
    {id:1,Name:'abc'},
    {id:2,Name:'abdfsdgsc'}
];

component2.ts

constructor() {
  if(this.selectedElement.id==1){
     themeConfig.config();
  }else {
     themeConfig.theme();
  }
}

Answer №1

To obtain the output value using eventemitter, and then input it into the second component.

Answer №2

To input a value into Component 2 and perform a check during the ngOnInit life-cycle method, simply include the desired value in your code.

HTML

<component2 [valueToCheck]="element.id"></component2>

TS

@Input() valueToCheck:number;

ngOnInit() {
  if(this.valueToCheck === 1){
     doSomething();
  }else {
     doSomethingElse();
  }
}

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

Angular 2 - Can a Content Management System Automate Single Page Application Routing?

I am interested in creating a single-page application with an integrated content management system that allows users to edit all aspects of the site and add new pages. However, I have found it challenging to configure the SPA to automatically route to a n ...

Switch up the border color of the input in PrimeNG

Currently, I am utilizing PrimeNG with Angular and seeking to modify the shadow of the input box upon focusing it. Presently, it appears as follows: https://i.sstatic.net/o4eLw.png My preference is to change that blue portion to green. Upon reviewing the ...

Merging sort and uniq functionalities to create a single function in JavaScript

I've been working with the sortBy and uniqBy functions, but I find myself iterating over the array twice when using the combined sortUniqBy. If you want to check out the code, feel free to click on this link to the codesandbox. Here's a snippet o ...

Is there a way to reach a class from within another class in TypeScript?

Let's take a look at my main class A export class A { public sourceReference: string; public charge: Charge; } Here is how my Charge class is structured: export class Charge { public chargeType: string; public chargeAccountNum ...

Using JSDoc with TypeScript's generic types: A guide

Can you provide some guidance on the best way to use JSDoc for generic TypeScript functions? I attempted to implement it as shown below, but received a prompt suggesting that JSDoc types may be moved to TypeScript types.ts(80004). When I clicked on the "q ...

Handling errors in nested Promises and rxjs Observables in Angular 12 with Typescript and rxjs

My current code involves a mix of nested Promises and subscriptions, but all I want to do is this: Call my function bar() and determine if it executed successfully or encountered an error Current approach: Currently, my bar() function returns a boolean O ...

Exploring the capabilities of .map alongside HTTP requests in Angular 2

I'm curious to know if the use of .map is necessary when making API calls with http in Angular 2. Take a look at my code below. It seems to work both with and without .map. If the API returns data, it signals success; otherwise, it indicates an err ...

The script type `(close: any) => Element` cannot be assigned to type `ReactNode`

Encountering a problem while adding a popup in my TypeScript code Error: Type '(close: any) => Element' is not compatible with type 'ReactNode'. <Popup trigger={ <button className="fixed bott ...

Encountering an Error While Trying to Add Typescript Support to Create React App Using Yarn

Encountering an issue while setting up a new Typescript/React project. Here's the error message: Installing template dependencies using yarnpkg... yarn add v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... error <a href="/cdn-cgi/l/em ...

The Angular ngx-color Color Picker is missing the option to customize the width of the color picker

I am currently utilizing the ngx-color Color Picker: https://www.npmjs.com/package/ngx-color#material This is the section where I am implementing the Color Picker and trying to specify the width <div> <div class="flex-title"> ...

Expanding Classes through Index signatories

My attempt at creating an abstract class is not going as smoothly as I hoped. I suspect my limited knowledge of TypeScript is the primary issue, even though this seems like a common scenario. The abstract class I'm working on is called Program. It co ...

What steps can I take to set a strict boundary for displaying the address closer to the current location?

While the autocomplete feature works perfectly for me, I encountered an issue where it suggests directions away from my current location when I start typing. I came across another code snippet that uses plain JavaScript to solve this problem by setting bou ...

Guide on utilizing TypeScript declarations imported as `* as`

Currently, I am working with react-icons and attempting to import all icon definitions using the syntax import * as Icons from 'react-icons/fi'. However, I am facing a dilemma on how to create a type that must be one of the types exported from Ic ...

What is the reason for the extended delay in nodejs before it exits?

Attempting to create a Creation Operator to obtain an observable from a wsprovider on polkadot.js and access polkadot events. Here is the code snippet: import {from, fromEvent, of,Observable} from 'rxjs'; import {tap,mergeMap} from "rxjs/op ...

Error loading ng2-toastr

Currently, I am utilizing systemjs.config alongside angular 4 and ng2-toastr version 4.0.1. Unfortunately, an error arose during the app's execution stating "Cannot read property 'forRoot' of undefined." It appears that the ToastModule or an ...

Cannot see the template on the Angular Typescript component

After encountering and resolving this issue: AngularJS directive not displaying the template I decided to experiment with an Angular component and TypeScript, but unfortunately, I can't seem to make it work. The component refuses to display. This is ...

What is the correct method for updating RxJS to the most recent version?

While attempting to update to the most recent version of RxJS, I followed the instructions from this documentation: https://github.com/reactivex/rxjs However, I encountered these warnings: npm warn @angular/[email protected] requires a peer of rxjs@ ...

Resolving Vue and TypeScript Typing Issues

Here's an example of a component: <script setup type="ts"> interface Props { items: string[] } const props = defineProps<Props>(); </script> <template> <ul> <li v-for="item in props.i ...

A guide on updating the button color in Bootstrap using Angular

I am trying to implement a feature where the button changes color based on user input. For example, when the user enters 2 figures, the button should turn blue instead of its default red color. How can I achieve this using Bootstrap and Angular? This is w ...

When the Material Sidenav is closed, the Mat button automatically gains focus

Is there a way to automatically unfocus the mat button after the sidenav is closed? https://i.sstatic.net/NrFNq.gif <mat-drawer-container> <mat-drawer #drawer mode="over" position="end">I'm a drawer</mat-drawer> ...