title: Angular2 Typescript Customized Alert
body: <p>I am totally new to Angular2, And I am stuck on how to create an customized alert like this:
  <a href="https://embed.plnkr.co/mbPzd8/" rel="nofollow noreferrer">check this alert box here</a></p>
  
  <p>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.</p>
  
  <p><strong>Here is the UI :</strong></p>
  
  <p><a href="https://i.stack.imgur.com/hJMm1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hJMm1.png" alt="enter image description here"></a></p>
  
  <p><strong>Here's my table.component.ts:</strong></p>
  
  <pre><code>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) =&gt; {
                  setTimeout(() =&gt; {
                      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) =&gt; {
          return a.city.length;
      }
  }
  </code></pre>
  
  <p><strong>Here's my table.module.ts</strong>:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>Here's my app.module.ts:</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>I tried to implement this <a href="https://embed.plnkr.co/mbPzd8/" rel="nofollow noreferrer">code</a> in my above app, but it was mess.
  Please Any help is appreciated,
  Thanks in advance</p>