import { Component , OnInit } from '@angular/core' ; import { AngularFireDatabase , AngularFireList } from '@angular/fire/database' ; import { MatSnackBar } from '@angular/material/snack-bar' ; import { MatDialog , MatDialogRef } from '@angular/material/dialog' ; import { DeleteDialogComponent } from '../delete-dialog/delete-dialog.component' ; import { Observable } from 'rxjs' ; @ Component ( { selector : 'app-admin-menus' , templateUrl : './admin-menus.component.html' , styleUrls : [ './admin-menus.component.scss' ] } ) export class AdminMenusComponent implements OnInit { nav : Observable < any > ; selectedOption : any ; dialogRef : MatDialogRef < any > ; menuList : any ; menuObject : any ; constructor ( public db , public snackBar , public dialog ) { this . menuList = [ ] ; this . menuObject = { } ; this . nav = db . list ( '/menus/nav' ) . valueChanges ( ) ; this . nav . subscribe ( items => { this . menuList = [ ] ; for ( let x = 0 ; x < items . length ; x ++ ) { this . menuList . push ( items [ x ] ) ; } } ) ; } addMenuItem ( ) { this . menuList . push ( { label : '' , url : '' } ) ; } saveMenu ( ) { this . menuObject = this . menuList . reduce ( function ( acc , cur , i ) { acc [ i ] = cur ; return acc ; } , { } ) ; this . db . object ( '/menus/nav' ) . set ( this . menuObject ) ; let snackBarRef = this . snackBar . open ( 'Menu saved' , 'OK!' , { duration : 3000 } ) ; } saveMenuItem ( key , newLabel , newURL ) { this . db . object ( '/menus/nav/' + key ) . update ( { label : newLabel , url : newURL } ) ; let snackBarRef = this . snackBar . open ( 'Menu item saved' , 'OK!' , { duration : 3000 } ) ; } deleteMenuItem ( index ) { this . menuList . splice ( index , 1 ) ; } ngOnInit ( ) { } }