Angular 9 component Interaction - html

Question

I have two components in my angular project that I need a data in one component to get from the other component.seat-modal is where my data is.following is seat-modal.ts.
import { Component, OnInit } from '#angular/core';
import {NgbModal, ModalDismissReasons} from '#ng-bootstrap/ng-bootstrap';
import {FormBuilder, FormGroup, Validators} from '#angular/forms';
import { SocketService} from '../../_services/socket.service';
#Component({
selector: 'app-seat-modal',
templateUrl: './seat-modal.component.html',
styleUrls: ['./seat-modal.component.less']
})
export class SeatModalComponent implements OnInit {
formRequestSeat: FormGroup;
socket;
public seat;
showModal: boolean;
public screenName: string;
constructor(private socketService: SocketService,
private modalService: NgbModal,
private formBuilder: FormBuilder) { }
ngOnInit(){
this.formRequestSeat = this.formBuilder.group({
seatRequest: ['', Validators.required]
});
}
hide(){
this.modalService.dismissAll();
}
join(seat){
const userToken = localStorage.getItem('userToken');
const tableToken = localStorage.getItem('tableToken');
this.socket = this.socketService.init(userToken);
const displayName = this.formRequestSeat.controls.seatRequest.value;
if (!displayName){
alert('Please enter a display name');
return;
}
this.socket.emit('join', {tableToken, displayName, seat}, (data) => {
// data.forEach((index, value) => {
// // this.seatsFormGroup.controls['seat-' + index].value(value);
// });
console.log(data.screenName);
this.screenName = data.screenName;
});
this.hide();
}
}
Follow is seat-modal.html
<div class="modal" id="{{seat.id}}" [style.display]="showModal ? 'block' : 'none'">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Seat{{seat.id}}</h4>
<button type="button" class="close" data-dismiss="modal" (click)="hide()">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form [formGroup]="formRequestSeat" (submit)="join(seat.id)">
<div class="form-group col-6">
<label for="name">Your Name</label>
<input formControlName="seatRequest" type="text"/>
</div>
<div>
<button type="submit" class="button-request-seat">Request The Seat</button>
</div>
</form>
</div>
</div>
</div>
</div>
<app-play-game [parentData]="screenName"></app-play-game>
Follow is my other component ts
import {Component, Input, OnInit} from '#angular/core';
import {AlertService} from '../../_services/alert.service';
import {SocketService} from '../../_services/socket.service';
import { FormBuilder, FormGroup, FormArray, FormControl,
ValidatorFn}
from '#angular/forms';
import { of } from 'rxjs';
import {NgbModal} from '#ng-bootstrap/ng-bootstrap';
import {SeatModalComponent} from '../../_components/seat-modal/seat-
modal.component';
#Component({
selector: 'app-play-game',
templateUrl: './play-game.component.html',
styleUrls: ['./play-game.component.less']
})
export class PlayGameComponent implements OnInit {
#Input() public parentData;
seatsFormGroup: FormGroup;
seats = [];
showModal: boolean;
public seatModalRef;
private socket;
constructor(private socketService: SocketService,
private formBuilder: FormBuilder,
private modalService: NgbModal) {
this.seatsFormGroup = this.formBuilder.group({
'seat-0': [''],
'seat-1': [''],
'seat-2': [''],
'seat-3': [''],
'seat-4': [''],
'seat-5': [''],
'seat-6': [''],
'seat-7': [''],
'seat-8': [''],
'seat-9': ['']
});
for (let i = 0; i < 10; i++) {
this.seats.push( 'seat-' + i);
}
}
ngOnInit(){
console.log('name=' + this.parentData);
}
sit(seat){
this.seatModalRef = this.modalService.open(SeatModalComponent);
this.seatModalRef.componentInstance.seat = seat;
this.seatModalRef.componentInstance.showModal = true;
}
}
I have tried a console.log(this.parentData) but it is undefined. Please help with codes I'm a begginer in angular.

Answer 1

your seat component should be change from
export class SeatModalComponent implements OnInit {public screenName: 'Sahan';}
to
export class SeatModalComponent implements OnInit {public screenName: string = 'Sahan';}
Currently you have given it Sahan string as a type not a value. Colon (:) is used to give a type where equals(=) is used to assign a value.

Answer 2

Please fix the SeatModalComponent with below.
public screenName: String = 'Sahan';