import { Component , OnInit } from '@angular/core' ; import { AngularFireDatabase , AngularFireObject } from '@angular/fire/database' ; import { MatSnackBar } from '@angular/material/snack-bar' ; @ Component ( { selector : 'admin-theme' , templateUrl : './admin-theme.component.html' , styleUrls : [ './admin-theme.component.scss' ] } ) export class AdminThemeComponent implements OnInit { theme : AngularFireObject < any > ; siteName : string ; constructor ( public db , public snackBar ) { this . theme = db . object ( '/theme' ) ; } ngOnInit ( ) { this . theme . valueChanges ( ) . subscribe ( ( item ) => { if ( item && item . siteName ) { this . siteName = item . siteName ; } } ) ; } saveTheme ( newSiteName ) { this . theme . update ( { siteName : newSiteName } ) ; let snackBarRef = this . snackBar . open ( 'Theme updated' , 'OK!' , { duration : 3000 } ) ; } }