Set two javascript variables at once, ANGULAR

Question

im trying to set two variables at once using a dialog popup but for some reason, it only shows the playerRequested variable but not the activity variable. here it my html code

<body>
    <h1>Create A Team</h1>
    <p>Players Needed</p>
    <input matInput type="number" min="1" max="4" [(ngModel)]="data.requestedPlayers">

    <p>Activity</p>
    <mat-button-toggle-group #togglegroup = "matButtonToggleGroup" [(ngModel)]="data.activity">
        <mat-button-toggle value="Unrated">Unrated</mat-button-toggle>
        <mat-button-toggle value="Competitive">Competitive</mat-button-toggle>
    </mat-button-toggle-group>
    {{togglegroup.value}}
    <button mat-raised-button [mat-dialog-close]="data.activity" [mat-dialog-close]="data.requestedPlayers" cdkFocusInitial>Post</button>
</body>

and here is my .ts file

import { Component, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogClose, MatDialogConfig} from '@angular/material/dialog';

export interface DialogData {
  requestedPlayers: string;
  activity: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'val-app';


  requestedPlayers : string;
  activity : string;

  constructor(public dialog: MatDialog) {}

  openDialog(){
    const dialogConfig = new MatDialogConfig();

    let dialogRef = this.dialog.open(CreateTeamOptions, {
      height: '326px',
      width: '237px',
      data: {requestedPlayers: this.requestedPlayers, activity: this.activity}
    });

    dialogRef.afterClosed().subscribe(result =>{
      console.log('Dialog result is: '+ result.activity);
      this.requestedPlayers = result;
      this.activity = result;
    });
  }
}

@Component({
  selector: 'create-team-options',
  templateUrl: 'create-team-options.html',
  styleUrls: ['./create-team-options.scss']
})

export class CreateTeamOptions {


  constructor(
    public dialogRef: MatDialogRef<CreateTeamOptions>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

on the open dialog it should save both variables from the html file where they were set but for some reason it doesnt.

if you lads could help that would be much appreciated!! thanks

Edited: just tried switching which one it sets first for the post button on html and it sets the first one to both but not sure how to set them differently

Sujeet Sinha · Accepted Answer · 2020-05-16 03:33:47Z

2

Change the button in your dialog component to return the entire data and it should work. Something like this:

<button mat-raised-button [mat-dialog-close]="data" cdkFocusInitial>Post</button>

With that done, your result object would have both the values.

answered May 16, 2020 at 3:33

Sujeet Sinha

2,4332 gold badges20 silver badges27 bronze badges

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

2 Comments

Isaac Lyne Over a year ago

Omg ur a God, thanks took me legit an hour and never thought of something simple like that. Thanks so much!

Isaac Lyne Over a year ago

also i dont know how to close a question so if someone could tell me or do that it would be awesome

Hojat Afsharan · Accepted Answer · 2020-05-16 03:39:15Z

0

In your dialog afterClose subscription, you should put result.activity in this.activity and result.requestedPlayers in this.requestedPlayers variables.

edited May 16, 2020 at 3:39

answered May 16, 2020 at 3:34

Hojat Afsharan

609 bronze badges

Collectives™ on Stack Overflow

Set two javascript variables at once, ANGULAR

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related