File

src/app/component/notification/notification.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
host {
}
moduleId module.id
selector stbui-notification
styleUrls ./notification.component.scss
templateUrl ./notification.component.html

Index

Properties
Methods

Constructor

constructor(notificationRef: NotificationRef, data: any)
Parameters :
Name Type Optional
notificationRef NotificationRef<NotificationComponent> No
data any No

Methods

action
action()
Returns : void

Properties

data
Type : literal type
Public notificationRef
Type : NotificationRef<NotificationComponent>
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Inject } from '@angular/core';
import { STBUI_NOTIFICATION_DATA } from './notification.config';
import { NotificationRef } from './notification.ref';
import { NotificationAnimations } from './notification.animation';

@Component({
  moduleId: module.id,
  selector: 'stbui-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [NotificationAnimations.contentFade],
  host: {
    '[@contentFade]': '',
  }
})
export class NotificationComponent {

  data: { message: string, title: string, type: string };

  constructor(
    public notificationRef: NotificationRef<NotificationComponent>,
    @Inject(STBUI_NOTIFICATION_DATA) data: any
  ) {
    this.data = data;
  }

  action() {
    this.notificationRef.dismissWithAction();
  }
}
<mat-card class="notification" [class.mat-accent]="data.type==='success'" [class.mat-primary]="data.type==='info'" [class.mat-warn]="data.type==='warn'">
  <mat-card-subtitle class="notification-title">
    {{data.title}}
    <span style="flex: 1 1 1e-09px;"></span>
    <button mat-icon-button>
      <mat-icon (click)="action()">close</mat-icon>
    </button>
  </mat-card-subtitle>
  <mat-card-content class="notification-content" [innerHTML]="data.message"></mat-card-content>
</mat-card>

./notification.component.scss

$notification-min-width: 300px !default;
$notification-color: #fff !default;

.notification {
  min-width: 300px;
  color: #fff;
  font-weight: 700;

  &-title {
    display: flex;
    align-items: center;
    color: #fff;
  }

  &-content {
    color: #fff;
  }

}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""