Angular 2 Simple Alert Component (SweetAlert Inspired)
We use icon from SweetAlert
https://mazipan.github.io/ng2-simplert/
npm install ng2-simplert --save
-- OR --
yarn add ng2-simplert
Or download latest release here : https://github.com/mazipan/ng2-simplert/releases
....
import { SimplertComponent } from '~ng2-simplert/src/app/simplert.component';
import { SimplertService } from '~ng2-simplert/src/app/simplert.component.service';
...
@NgModule({
declarations: [
...
SimplertComponent
],
imports: [
...
],
providers: [
SimplertService
]
})
See here : https://github.com/mazipan/ng2-simplert/blob/master/src/app/app.module.ts
....
import { SimplertService } from '~ng2-simplert/src/app/simplert.component.service';
...
@Component({
selector: 'app-root',
template: `
<button class="open--info" (click)="showPopup('Information!', 'Hey, I am Opened...')">Open Information Alert</button>
<SimplertComponent [isUseRadius]="true"></SimplertComponent>
`
})
export class AppComponent {
constructor(private _simplertService: SimplertService){}
showPopup(title: string, message: string){
this._simplertService.openPopupBlock(title, message);
}
}
See here : https://github.com/mazipan/ng2-simplert/blob/master/src/app/app.component.ts
You can add this attribute below in :
Attribute | Parameter | Description |
---|---|---|
[isUseRadius] | booleanParam: boolean | true : will use radius, false : not use radius |
[isUseIcon] | booleanParam: boolean | true : will use icon, false : not use icon |
You can access this below method from SimplertService :
Method Name | Parameter | Description |
---|---|---|
openPopupBlock | title: string | Title of alert (can be empty) |
message: string | Message of alert (can be HTML syntax) | |
openPopupBlockWithType | title: string | Title of alert (can be empty) |
message: string | Message of alert (can be HTML syntax) | |
type: string | info (default), success, warning, error | |
changeShown | booleanParam: boolean | true : show, false : hide |
setTitle | title: string | Title of alert (can be empty) |
setMessage | message: string | Message of alert (can be HTML syntax) |
setType | type: string | info (default), success, warning, error |
setColorBtn | btnColor: string | string hex color (default: #068AC9) |
Hope will usefull for you all.
Contact Me :