projects/davita/bridge-library/snack-bar/push-notification/push-notification.component.ts
OnInit
| selector | bri-push-notification |
| styleUrls | ./push-notification.component.scss |
| templateUrl | ./push-notification.component.html |
Properties |
|
Methods |
constructor(snackBarRef: MatSnackBarRef<PushNotificationComponent>, data: any)
|
|||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Public data |
Type : any
|
Decorators :
@Inject(MAT_SNACK_BAR_DATA)
|
| Public snackBarRef |
Type : MatSnackBarRef<PushNotificationComponent>
|
import { Component, Inject, OnInit } from '@angular/core';
import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
@Component({
selector: 'bri-push-notification',
templateUrl: './push-notification.component.html',
styleUrls: ['./push-notification.component.scss'],
})
export class PushNotificationComponent implements OnInit {
constructor(
public snackBarRef: MatSnackBarRef<PushNotificationComponent>,
@Inject(MAT_SNACK_BAR_DATA) public data: any
) {}
ngOnInit(): void {}
}
<div class="push-notification">
<div>
<div class="title">{{ data?.title }}</div>
<div class="message">{{ data?.message }}</div>
</div>
<img src="{{ data.imageUrl }}" />
</div>
<div class="action">
<button mat-button (click)="snackBarRef.dismiss()">{{ data?.action }}</button>
</div>
<!--
<button mat-flat-button class="mat-focus-indicator mat-button mat-button-base">
<span class="mat-button-wrapper">Dismiss</span>
<span class="mat-button-focus-overlay"></span>
</button> -->
./push-notification.component.scss
@import '../../scss/style/colors';
.push-notification {
color: $light-color-ui-background;
display: flex;
.title {
font-size: 14px;
font-weight: bold;
letter-spacing: 1.25px;
text-transform: capitalize;
}
.message {
font-size: 16px;
letter-spacing: 0.5px;
}
img {
margin: 0 0 0 20px;
}
}
button.mat-mdc-button {
color: $light-color-ui-background;
display: flex;
margin: 10px 0 0 auto;
text-transform: uppercase;
}