Angular2 Typescript Customized Alert

Question

I am totally new to Angular2, And I am stuck on how to create an customized alert like this: check this alert box here

Since I am new to Angular2 concepts , I dont know how to use this code in my angular2 app in which I made a table with submit button. I want to create an alert on submit button.

Here is the UI :

Here's my table.component.ts:

import {Component, NgModule } from "@angular/core";
import { BrowserModule } from '@angular/platform-browser';
import {Http} from "@angular/http";

@Component({
    selector: 'demo',
    templateUrl: './app/table/table.component.html'

})

export class TableComponent{

    public data;
    constructor(private http: Http) {
    }

    ngOnInit(): void {
        this.http.get("app/table/data.json")
            .subscribe((data) => {
                setTimeout(() => {
                    this.data = data.json();
                }, 1000);
            });
    }
    addRow()
    {
    this.data.push({
    status:''
    })
    }

    deleteRow(index) {
        this.data.splice(index,1);
    }

    public toInt(num: string) {
        return +num;
    }
    public sortByWordLength = (a: any) => {
        return a.city.length;
    }
}

Here's my table.module.ts:

import { NgModule }      from '@angular/core';
import { CommonModule }      from '@angular/common';
import { FormsModule } from "@angular/forms";
import { DataTableModule } from "angular2-datatable";
import { HttpModule } from "@angular/http";

import { TableComponent }   from './table.component';
import { DataFilterPipe }   from './table-filter.pipe';





@NgModule({
    imports: [
        CommonModule,
        DataTableModule,
        FormsModule,
        HttpModule
    ],
    declarations: [TableComponent, DataFilterPipe],
    exports: [TableComponent]
})

export class TableModule { }

Here's my app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }   from './app.component';
import { TableModule }   from './table/table.module';


@NgModule({
    imports: [BrowserModule, TableModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

I tried to implement this code in my above app, but it was mess. Please Any help is appreciated, Thanks in advance

Answer 1

NG2-BOOTSTRAP is possible what you are looking for.

Demo here: https://valor-software.com/ng2-bootstrap/#/modals

Answer 2

Depending on the styling you are using and whether you're willing to accept beta code, you could use the angular material dialog

https://material.angular.io/components/component/dialog

Answer 3

There are a few ways to do it, you can either follow what was recommended by other users to use Bootstrap or Material to create that alert you are looking for.

There is another similar answer in stackoverflow that suggests you to use a service to trigger a modal.

1. Create a service to control the visibility of your alert.

import { Injectable } from '@angular/core';

@Injectable()
export class AlertService {

  alert = { 
    isVisible : false,
    message : ''
  };

  constructor() { }

  show(message){
    console.log('is visible');
    this.alert.isVisible = true;
  }

  hide(){
    this.alert.isVisible = false;
  }

}

2. Add alert to your app's root, this is to make sure we can use them anywhere in the app.

<!-- simulated html -->
<header class='header'>Hello World</header>
<main> lorem ipsum </main>
<footer>The bottom of the world</footer>

<!-- alert dialog -->
<app-alert *ngIf="alert.isVisible"></app-alert>

3. Make sure you've imported the AlertService into the view you want to activate

import { Component } from '@angular/core';
import { AlertService } from '../alert.service';

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

    private alertDialog;

    constructor(
      private alertSvc:AlertService
    ){
      this.alertDialog = this.alertSvc.alert;
    }
}

4. Lastly, don't forget to import into your module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AlertService } from './alert.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [AlertService],
  bootstrap: [AppComponent]
})
export class AppModule { }

I've imported alert service only in the module, this allows different pages to be working with one central variable in this case it will be AlertService's alert object.

I believe there is another way by injecting it directly into the DOM. For that you will have to read Valor's bootstrap library to understand what did they do to inject it into the DOM directly(I'm not too sure if they actually injects it into the DOM.

Hope this helps!