angular populate disabled input field on a button click

Question

I have two components (not parent-child). First component has search input field that should be populated on a button click, with a value that is available in second component. Button click also happens in second component. I tried Input Output, but it seems this is only for parent-child connection. I also tried to save the value I need in a service, and then fetch it in the first component through that service, but I get undefined. Appreciate help.

Here is my code:

FIRST COMPONENT

<mat-form-field>
      <mat-label class="mat-uppercase has-events">
       <span> {{ "SEARCH_DEVICES" | translate | uppercase }}</span>
      </mat-label>
      <input type="text" formControlName="actorDevice" matInput />
    </mat-form-field>

SECOND COMPONENT

TS

passDevice(id: string) {
 this.deviceService.getDeviceById(id).subscribe((res) => {
  this.deviceName = res.deviceName[0].name;
});
this.deviceService.selectedDeviceName = this.deviceName;

}

HTML

<ng-container matColumnDef="selectRow">
  <mat-header-cell *matHeaderCellDef>
    {{ "SELECT" | translate }}
  </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-button type="button" (click)="passDevice(row.id)">
      Select
    </button>
  </mat-cell>
</ng-container>

zainhassan · Accepted Answer · 2022-02-22 10:53:19Z

2

You are setting selectedDeviceName in service before data is returned from API. Thats why it is undefined. You need to set it inside subscription

passDevice(id: string) {
 this.deviceService.getDeviceById(id).subscribe((res) => {
  this.deviceName = res.deviceName[0].name;
  this.deviceService.selectedDeviceName = this.deviceName;
});

answered Feb 22, 2022 at 10:53

zainhassan

1,7929 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fadingbeat · Accepted Answer · 2022-02-22 14:55:25Z

As soon as I posted the question, I found the solution. I have used a service in which I have defined a variable of type Subject (rxjs), and used it in first component to fill the variable with the value I need, and then in the second component I have fetched this value and passed it in the html input field.

SERVICE

export class SearchAppointmentService {
  addName: Subject<string>;
  constructor() {
    this.addName = new Subject<string>();
  }
}

FIRST COMPONENT

this.deviceService.getDeviceById(id).subscribe((res) => {
      this.deviceName = res.deviceName[0].name;
      this.searchAppointmentService.addName.next(this.deviceName);
    });

SECOND COMPONENT

 addNameSubscription: Subscription;

 this.addNameSubscription = this.searchAppointmentService.addName.subscribe(
      (res) => {
        this.inputDeviceName = res;
      }
    );

HTML

<input
  type="text"
  formControlName="actorDevice"
  matInput
  [value]="inputDeviceName | uppercase"
/>

Collectives™ on Stack Overflow

angular populate disabled input field on a button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related