This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
AnimationTriggerMetadata, | |
trigger, | |
state, | |
transition, | |
style, | |
animate, | |
} from '@angular/animations'; | |
export const toastAnimations: { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.toast { | |
position: relative; | |
display: flex; | |
justify-content: space-around; | |
margin-bottom: 20px; | |
padding: 10px 15px 10px 48px; | |
width: 290px; | |
background: #fff; | |
border-width: 1px; | |
border-style: solid; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="toast"> | |
<mat-icon>done</mat-icon> | |
<div>This is a toast message</div> | |
<mat-icon (click)="close()">close</mat-icon> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const filteredSearchStream$ = this.searchStream$.pipe( | |
debounceTime(200), | |
distinctUntilChanged(), | |
startWith('') | |
); | |
const devFilterStream$ = this.filterStream$.pipe(startWith(false)); | |
combineLatest(filteredSearchStream$, devFilterStream$).subscribe( | |
([searchTerm, onlyDevs]) => this.filterEmployees(searchTerm, onlyDevs) | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, OnInit, OnDestroy } from '@angular/core'; | |
import { ToastData } from './toast-config'; | |
import { ToastRef } from './toast-ref'; | |
@Component({ | |
selector: 'app-toast', | |
templateUrl: './toast.component.html', | |
}) | |
export class ToastComponent implements OnInit, OnDestroy { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable, Injector } from '@angular/core'; | |
import { Overlay } from '@angular/cdk/overlay'; | |
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; | |
import { ToastComponent } from './toast.component'; | |
import { ToastData } from './toast-config'; | |
import { ToastRef } from './toast-ref'; | |
@Injectable({ | |
providedIn: 'root' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { OverlayRef } from '@angular/cdk/overlay'; | |
export class ToastRef { | |
constructor(readonly overlay: OverlayRef) { } | |
close() { | |
this.overlay.dispose(); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { NgModule } from '@angular/core' | |
import { OverlayModule } from '@angular/cdk/overlay'; | |
import { MatIconModule } from '@angular/material/icon'; | |
import { ToastComponent } from './toast.component'; | |
@NgModule({ | |
imports: [OverlayModule, MatIconModule], | |
declarations: [ToastComponent], | |
entryComponents: [ToastComponent] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Injectable } from '@angular/core'; | |
@Injectable({ | |
providedIn: 'root' | |
}) | |
export class ToastService { | |
show() { } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { NgModule } from '@angular/core' | |
import { ToastComponent } from './toast.component'; | |
@NgModule({ | |
declarations: [ToastComponent], | |
entryComponents: [ToastComponent] | |
}) | |
export class ToastModule { } |