Argthtjtr

I have a custom component that allows for editing a user. It displays a dialog which can be fed an existing user. Or not. It has the markup:

<button mat-button (click)="openUserDialog()">Edit</button>

and the controller:

@Component({

  selector: 'app-user-edit',

  templateUrl: './user-edit.component.html',

})

export class UserEditComponent implements OnChanges {



  @Input() existingUser: User;

  @Output() userEditedEvent: EventEmitter<User> = new EventEmitter<User>();



  userDialogRef: MatDialogRef<UserDialogComponent>;



  constructor(

    private matDialog: MatDialog,

    private userService: UserService

  ) { }



  ngOnChanges() {

  }



  openUserDialog() {

    this.userDialogRef = this.matDialog.open(UserDialogComponent, {

      hasBackdrop: false,

      data: {

        user: this.existingUser

      }

    });



    this.userDialogRef

      .afterClosed()

      .subscribe(user => {

        // TODO validate the edited user

        if (user) {

          if (this.existingUser) {

            user.id = this.existingUser.id;

            this.userService.fullUpdate(user)

              .subscribe(updatedUser => {

                this.userEditedEvent.emit(updatedUser);

                // TODO Add a hint that the user has been added

              });

          } else {

            this.userService.add(user)

              .subscribe(addedUser => {

                this.userEditedEvent.emit(addedUser);

                // TODO Add a hint that the user has been updated

              });

          }

        }

      });

  }



}

The component is then being used in the users list page, once on top of the list to add a new user, with the markup:

<app-user-edit (userEditedEvent)="refreshList($event)"></app-user-edit>

and on each row of the list to edit the user, with the markup:

<app-user-edit [existingUser]="user" (userEditedEvent)="refreshList($event)"></app-user-edit>

The trouble is that the view displays the Edit label both to add and to edit a user.

How could I have a custom Add label on top of the list, and another Update label for each user ?

I feel like I may have overengineered the whole thing.

You can add another @Input parameter say label and pass the value of the label from the mark up.

export class UserEditComponent implements OnChanges {



  @Input() existingUser: User;

  @Input() label: string = "Edit" // set default to EDIT. If preferred can initialised to empty.

Mark up for ADD:

<app-user-edit (userEditedEvent)="refreshList($event)" label="ADD"></app-user-edit>

Mark up for EDIT:

<app-user-edit [existingUser]="user" (userEditedEvent)="refreshList($event)" label="EDIT"></app-user-edit>

Also, bind parameter label in view where it needs to be shown.