AngularControls

Angular - Controls - Ngx-ToastR

ToastR is one of those programs that provides messages. It’s a replacement to a write statement. What is does is puts a message in the upper right side of the browser window for a moment.

Sending a few ToastR messages will stack the messages. Releasing one at a time until they are all gone.

Typical use

1
2
3
4
this.toastr.success("The Program has been added into the system.");
this.toastr.success("The Program has been added into the system.", “Toaster Title”);
this.toastr.info("The Program has been deleted from the database.");
Swal.fire('Event Detail', message, 'warning')

Sample

App.Module.Ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:
import { ToastrModule } from 'ngx-toastr';
:

@NgModule({
  declarations: [
:
  ],
  imports: [
:
    , ToastrModule.forRoot()
  ],
})
export class AppModule { 
}

Toastr is used everywhere so a reference was added to the app.module.ts

It was added to imports block

Program-details.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
:
import { ToastrService } from 'ngx-toastr';
:

@Component({
  selector: 'program-details',
  templateUrl: './program-details.component.html',
  styleUrls: ['./program-details.component.css'],
})

export class ProgramDetailsComponent implements OnInit{
:
  constructor(
:
    private toastr: ToastrService
    ) { 
  }

  saveProgram() {
:
    if (this.isAddForm()) {
      // add
      this.service.createNewProgram( program )
          .subscribe(result => {
            if (result.wasSuccessful === true) {

              this.toastr.success(
               "added Successfully.");

              this.closeForm();      
:

In components where I want to use Toastr

  • Import the toaster service
  • Inject it into the class in the constructor.
  • Use it the same way you would use an alert statement..

Note: Code continues immediately after the message is displayed.

References: