TypeScript @angular/material MatSnackBar Examples

Example #1

File: photo-upload.component.ts Project: jacobbowdoin/RapidWords

    async startUpload(event: FileList) {

        const file = event.item(0);

        // Client-side validation: Must be an image and smaller than 10MB.
        if (file.type.split('/')[0] !== 'image') {
            return this.snackBar.open('Unsupported File Type', '', { duration: 3000, panelClass: 'snackbar-error' });
        }
        // Must be smaller than 20MB, http://www.unitconversion.org/data-storage/megabytes-to-bytes-conversion.html
        if (file.size > 10485760) {
            return this.snackBar.open('Images must be smaller than 10MB', '', { duration: 5000, panelClass: 'snackbar-error' });
        }

        const dictionary = await this.dictionariesService.getDictionary();

        // Replace spaces w/ underscores in dict name, remove special characters from lexeme so image converter can accept filename
        const _dictName = dictionary.name.replace(/\s+/g, '_');
        const _lexeme = this.entry.lx.replace(/[^a-z0-9+]+/gi, '_');
        const fileTypeSuffix = file.name.match(/\.[0-9a-z]+$/i)[0];

        const path = `images/${_dictName}_${dictionary.id}/${_lexeme}_${this.entry.id}_${new Date().getTime()}${fileTypeSuffix}`;

        // optional metadata
        const { displayName, uid } = await this.auth.getUser();
        const customMetadata = { uploadedBy: displayName };

        this.task = this.storage.upload(path, file, { customMetadata });
        this.percentage = this.task.percentageChanges();
        this.task.then(snap => {
            if (snap.state === 'success') { this.savePhoto(path, displayName, uid, this.entry.lx, dictionary.id); }
        }).catch(() => {
            this.snackBar.open('Image Upload Failed', '', { duration: 3000, panelClass: 'snackbar-error' });
        });
    }

Example #2

File: register-user.component.ts Project: idot/betterplay

 const result = this.betterdb.createUser(details).subscribe( result => {
     if(result['ok']){
         this.snackBar.openFromComponent(ToastComponent, { data: { message: result['ok'], level: "ok"}})
         this.router.navigate([`/users`])
     } else {
         const message = result['type'] == 'not unique' ? "duplicate username or e-mail" : result['error']
         this.snackBar.openFromComponent(ToastComponent, { data: { message: message, level: "error"}})
     }
 })

Example #3

File: app.component.ts Project: skalagi/pogoda-cli

    this.sw.available.subscribe(evt => {
      const snack = this.snack.open('Dostępna aktualizacja', 'ODŚWIEŻ');

      snack.onAction()
        .subscribe(() => window.location.reload());

      setTimeout(() => {
        snack.dismiss();
      }, 7000);
    });

Example #4

File: reset-password-confirm.component.ts Project: CatoTH/OpenSlides

 setTimeout(() => {
     this.matSnackBar.open('');
     this.matSnackBar.open(
         this.translate.instant('The link is broken. Please contact your system administrator.'),
         this.translate.instant('OK'),
         {
             duration: 0
         }
     );
     this.router.navigate(['/login']);
 });

Example #5

File: dotstar-notifiers.component.ts Project: alexeden/dotstar-node

 map(connected =>
   connected
   ? this.snackBar.open(`Connected to Dotstar`, '', {
       panelClass: ['bgc-green', 'c-black'],
       duration: 3000,
       verticalPosition: 'top',
     })
   : this.snackBar.open(`Connection closed`, 'Reconnect', {
       duration: 3000,
       verticalPosition: 'top',
     })

Example #6

File: example-viewer.ts Project: karthik12ui/fuse-angular-full

 /**
  * Copy the source
  *
  * @param {string} text
  */
 copySource(text: string): void
 {
     if ( this._fuseCopierService.copyText(text) )
     {
         this._matSnackBar.open('Code copied', '', {duration: 2500});
     }
     else
     {
         this._matSnackBar.open('Copy failed. Please try again!', '', {duration: 2500});
     }
 }

Example #7

File: login.component.ts Project: camilolozano/finalAndroid2018-front

 d => {
   if (d.success) {
     this.snackBar.open(d.msg, '', {
       duration: 5000,
     });
   } else {
     this.snackBar.open(d.msg, '', {
       duration: 5000,
     });
     this.loadEmail = true;
   }
 }, (err) => {

Example #8

File: dotstar-notifiers.component.ts Project: alexeden/dotstar-node

 map(error =>
   (error instanceof CloseEvent)
   ? this.snackBar.open(`Connection was closed by the server`, 'Reconnect', {
       panelClass: ['bgc-red', 'c-white'],
       duration: 5000,
       verticalPosition: 'top',
     })
   : this.snackBar.open(`Couldn't connect to the device`, 'Retry', {
       panelClass: ['bgc-red', 'c-white'],
       duration: 5000,
       verticalPosition: 'top',
     })

Example #9

File: settings.service.ts Project: jacobbowdoin/RapidWords

 public async toggleSetting(setting: string, value: boolean) {
   try {
     const newSetting = { [setting]: !value };
     const dictionary = await this.dictionariesService.currentDictionary.pipe(first()).toPromise();
     await this.afs.doc(`dictionaries/${dictionary.id}/config/settings`).set(newSetting, { merge: true });
     this.snackBar.open('Setting updated', '', { duration: 2000 });
   } catch (err) {
     this.snackBar.open('Failed to update setting.', '', {
       panelClass: 'snackbar-error',
       duration: 3000
     });
   }
 }

Example #10

File: contact-new.component.ts Project: Rockncoder/ng-contacts

 onSubmit() {
   // this method is called if the contact is valid and dirty (no point updating if no changes made)
   this.snackBar.open('Contact created.', '', {duration: 3000});
   this.contact.photo = 'https://robohash.org/etquasiqui.jpg?size=250x250&set=set1';
   this.contactService.createContact(this.contact);
   this.router.navigate(['contacts']);
 }