import { Component, Input } from '@angular/core';
import { Alert, AlertType } from './alert';
import { AlertService } from './alert.service';
@Component({
selector: 'ap-alert',
templateUrl: 'alert.component.html'
})
export class AlertComponent{
@Input() timeout = 3000;
alerts: Alert[] = [];
constructor(private AlertService: AlertService){
this.AlertService
.getAlert()
.subscribe(alert => {
if(!alert){
this.alerts = [];
return;
}
this.alerts.push();
setTimeout(() => this.removeAlert(alert), this.timeout);
})
}
removeAlert(alertToRemove: Alert){
this.alerts = this.alerts.filter(alert => alert != alertToRemove);
}
getAlertClass(alert: Alert){
if(!alert) return '';
switch(alert.alertType){
case AlertType.DANGER:
return 'alert alert-danger';
case AlertType.WARNING:
return 'alert alert-warning';
case AlertType.SUCESS:
return 'alert alert-sucess';
case AlertType.INFO:
return 'alert alert-info';
}
}
}
export class Alert{
constructor(
public readonly alertType: AlertType,
public readonly message: string
){}
}
export enum AlertType{ SUCESS, WARNING, DANGER, INFO }
// const alert = new Alert(AlertType.SUCESS, 'concluido'); // alert.message;
import { Component, Input } from '@angular/core';
import { Alert, AlertType } from './alert';
import { AlertService } from './alert.service';
@Component({
selector: 'ap-alert',
templateUrl: 'alert.component.html'
})
export class AlertComponent{
@Input() timeout = 3000;
alerts: Alert[] = [];
constructor(private AlertService: AlertService){
this.AlertService
.getAlert()
.subscribe(alert => {
if(!alert){
this.alerts = [];
return;
}
this.alerts.push();
setTimeout(() => this.removeAlert(alert), this.timeout);
})
}
removeAlert(alertToRemove: Alert){
this.alerts = this.alerts.filter(alert => alert != alertToRemove);
}
getAlertClass(alert: Alert){
if(!alert) return '';
switch(alert.alertType){
case AlertType.DANGER:
return 'alert alert-danger';
case AlertType.WARNING:
return 'alert alert-warning';
case AlertType.SUCESS:
return 'alert alert-sucess';
case AlertType.INFO:
return 'alert alert-info';
}
}
}
import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; import { Alert, AlertType } from './alert';
@Injectable({ providedIn: 'root' }) export class AlertService{
alertSubject: Subject<Alert> = new Subject<Alert>();
sucess(message: string){
this.alert(AlertType.SUCESS, message);
}
warning(message: string){
this.alert(AlertType.WARNING, message);
}
danger(message: string){
this.alert(AlertType.DANGER, message);
}
info(message: string){
this.alert(AlertType.INFO, message);
}
//colocar alert como privado e fazer os metodos
private alert(alertType: AlertType, message: string){
this.alertSubject.next(new Alert(alertType, message));
}
getAlert(){
return this.alertSubject.asObservable();
}
}
import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RequestInterceptor } from './auth/request.interceptor';
import { FooterComponent } from './footer/footer.component';
import { AlertModule } from '../shared/alerts/alert.module';
@NgModule({
declarations: [
HeaderComponent,
FooterComponent
],
exports: [
HeaderComponent,
FooterComponent
],
imports: [
CommonModule,
RouterModule,
AlertModule
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: RequestInterceptor,
multi: true
}
]
})
export class CoreModule { }
{{ alert.message }}
`