As a newcomer to Angular, I'm facing an issue where I need to access a variable from ComponentA in ComponentB. Here's the code snippet that demonstrates what I'm trying to achieve (I want to utilize the "favoriteSeason" input result in the "Result" component).
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn }
from '@angular/forms';
import {MatRadioModule} from '@angular/material/radio';
import { ResultComponent } from '../result/result.component';
import { HostBinding } from '@angular/core';
@Component({
selector: 'app-answer-three',
templateUrl: './answer-three.component.html',
styleUrls: ['./answer-three.component.css']
})
export class AnswerThreeComponent {
disableBtn: boolean;
favoriteSeason: string;
seasons: string[] = ['Cheesburger', 'Cheesecake', 'Fondue', 'Pizza'];
submit() {
this.disableBtn = !this.disableBtn;
const result = this.favoriteSeason;
console.log(result);
}
} <div class="co">
<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason" (ngSubmit)="submit()">
<div class="form-check">
<h1>Choose a food:</h1>
</div>
<mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
{{season}}
</mat-radio-button>
</mat-radio-group>
<div class="example-selected-value">Your favorite food is: {{favoriteSeason}}</div>
<nav>
<div class="column">
<button class="btn btn-primary" [disabled]="disableBtn" name="button" (click)="submit()">save
</button>
<button class="btn btn-primary" [disabled]="!disableBtn" name="button" (click)="submit()">
<a routerLink="/result">Next</a>
</button>
</div>
</nav>
</div>I also aim to utilize the result obtained from "favoriteSeason" in the Result component. Component B
import { NgModule, Output } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
import { Subject } from 'rxjs';
import { Injectable } from '@angular/core';
import { AnswerThreeComponent } from '../answer-three/answer-three.component';
import { HostListener } from '@angular/core';
@Component({
selector: 'app-result',
templateUrl: './result.component.html',
styleUrls: ['./result.component.css'],
})
export class ResultComponent {
@Input() answer: AnswerThreeComponent;
@Input() res: AnswerThreeComponent['submit'];
@HostListener('click')
click() {
const result = this.answer.favoriteSeason;
console.log(this.answer.favoriteSeason);
}
}However, I encountered an error stating "can't find favoriteSeason name." What could be the issue here? Any assistance would be greatly appreciated, and apologies if my question is unclear (it's my first time asking).