angularjs 6 message success on submit

Question

How can I make a message which can contain "operation successfully" inside my function on submit?

  onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
      });
  }

I'd prefer to append my empty paragraph with my html content.

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

    <p class="msg_success"></p>

    <button class="btn btn-success">Add user</button>
  </form>
</div>

Answer 1

using string interpolation({{...}}) will not give you much control over html you want to display,

You can take advantage of *ngIf if want to display more then just simple string like below:

showMsg: boolean = false;

onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
        this.showMsg= true;
      });
  }

then you can use showMsg boolean to show/hide dive like below

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

   <div class="row"  *ngIf="showMsg">
        <div class="col-xs-12">
          <p class="alert alert-success">
              <strong>Registration Success!</strong> Please click here to login!.

          </p>
        </div>
      </div>

    <button class="btn btn-success">Add user</button>
  </form>
</div>

That will result in something like below on submit:

note that I am using some bootstrap classes for styling.

Answer 2

You can declare a variable into the component like this:

msg: string = null;

onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
        this.msg = 'success';
      });
  }

Then you can bind msg variable into your template like this:

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

    <p class="msg_success">{{ msg }}</p>

    <button class="btn btn-success">Add user</button>
  </form>
</div>