From c67697e43ed3bad7f526700acf5246c425e8ca0d Mon Sep 17 00:00:00 2001 From: pastorsj Date: Sun, 19 Nov 2017 14:17:57 -0500 Subject: [PATCH] Added take until methods to observables --- package.json | 1 + src/app/_services/editor.service.ts | 1 + src/app/app.component.html | 2 +- .../create-article-modal.component.ts | 18 ++++++-- .../delete-article-modal.component.ts | 14 +++++- .../article-portal/editor/editor.component.ts | 34 ++++++++++---- .../image-preview/image-preview.component.ts | 1 + .../settings-modal.component.ts | 46 ++++++++++++------- .../article-list/article-list.component.ts | 38 ++++++++++----- src/app/articles/articles.component.ts | 20 ++++++-- src/app/login-modal/login-modal.component.ts | 26 +++++++---- src/app/nav-bar/nav-bar.component.ts | 22 +++++++-- .../register-modal.component.ts | 18 ++++++-- 13 files changed, 173 insertions(+), 68 deletions(-) diff --git a/package.json b/package.json index 30fa2fe..e1b2025 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "scripts": { "ng": "ng", "start": "ng serve", + "aot": "ng serve --aot", "https": "ng serve --ssl --ssl-key key.pem --ssl-cert certificate.pem", "build": "ng build", "predeploy": "npm run build-prod && npm run precache", diff --git a/src/app/_services/editor.service.ts b/src/app/_services/editor.service.ts index adf8661..87cb7f5 100644 --- a/src/app/_services/editor.service.ts +++ b/src/app/_services/editor.service.ts @@ -4,6 +4,7 @@ import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; +import 'rxjs/add/observable/forkJoin'; import 'rxjs/add/observable/throw'; import { AuthenticationService } from 'app/_services/authentication.service'; diff --git a/src/app/app.component.html b/src/app/app.component.html index f368f6b..435cdfd 100755 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,2 +1,2 @@ - + diff --git a/src/app/article-portal/create-article-modal/create-article-modal.component.ts b/src/app/article-portal/create-article-modal/create-article-modal.component.ts index f48034f..a4e269c 100644 --- a/src/app/article-portal/create-article-modal/create-article-modal.component.ts +++ b/src/app/article-portal/create-article-modal/create-article-modal.component.ts @@ -1,7 +1,9 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup, FormControl, Validators, FormsModule } from '@angular/forms'; import { Router } from '@angular/router'; import { MatDialogRef } from '@angular/material'; +import { Subject } from 'rxjs/Subject'; +import 'rxjs/add/operator/takeUntil'; import { EditorService } from 'app/_services/editor.service'; @@ -10,10 +12,12 @@ import { EditorService } from 'app/_services/editor.service'; templateUrl: './create-article-modal.component.html', styleUrls: ['./create-article-modal.component.scss'] }) -export class CreateArticleModalComponent { +export class CreateArticleModalComponent implements OnDestroy { - title = 'Create a new article'; - formGroup: FormGroup; + private destroyed: Subject = new Subject(); + + public title = 'Create a new article'; + public formGroup: FormGroup; constructor( private fb: FormBuilder, @@ -27,6 +31,11 @@ export class CreateArticleModalComponent { }); } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + create(formValue: any, isFormValid: boolean) { if (isFormValid) { @@ -34,6 +43,7 @@ export class CreateArticleModalComponent { const articleDescription = formValue['articleDescription']; this.editorService.createArticle(articleTitle, articleDescription) + .takeUntil(this.destroyed) .subscribe(results => { const id = results._id; if (!Number.isNaN(id)) { diff --git a/src/app/article-portal/delete-article-modal/delete-article-modal.component.ts b/src/app/article-portal/delete-article-modal/delete-article-modal.component.ts index 03707f0..c7ec364 100644 --- a/src/app/article-portal/delete-article-modal/delete-article-modal.component.ts +++ b/src/app/article-portal/delete-article-modal/delete-article-modal.component.ts @@ -1,5 +1,7 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, OnDestroy } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material'; +import { Subject } from 'rxjs/Subject'; +import 'rxjs/add/operator/takeUntil'; import { EditorService } from 'app/_services/editor.service'; import { Article } from 'app/_models/Article'; @@ -9,8 +11,10 @@ import { Article } from 'app/_models/Article'; templateUrl: './delete-article-modal.component.html', styleUrls: ['./delete-article-modal.component.scss'] }) -export class DeleteArticleModalComponent { +export class DeleteArticleModalComponent implements OnDestroy { + private destroyed: Subject = new Subject(); + public article: Article; constructor( @@ -20,8 +24,14 @@ export class DeleteArticleModalComponent { this.article = data; } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + deleteArticle() { this.editorService.deleteArticle(this.data) + .takeUntil(this.destroyed) .subscribe(result => { if (result) { this.dialogRef.close('closed'); diff --git a/src/app/article-portal/editor/editor.component.ts b/src/app/article-portal/editor/editor.component.ts index 1086380..82d498b 100644 --- a/src/app/article-portal/editor/editor.component.ts +++ b/src/app/article-portal/editor/editor.component.ts @@ -1,9 +1,11 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { FormBuilder, FormGroup, FormControl, Validators, FormsModule } from '@angular/forms'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import { Observable } from 'rxjs/Observable'; +import { Subject } from 'rxjs/Subject'; +import 'rxjs/add/operator/takeUntil'; import { EditorService } from 'app/_services/editor.service'; import { ArticleService } from 'app/_services/article.service'; @@ -21,7 +23,7 @@ import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.servi templateUrl: './editor.component.html', styleUrls: ['./editor.component.scss'] }) -export class EditorComponent implements OnInit { +export class EditorComponent implements OnInit, OnDestroy { private tb = ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineStyle', @@ -52,6 +54,8 @@ export class EditorComponent implements OnInit { toolbarButtonsXS: this.tb, }; private content: string; + private destroyed: Subject = new Subject(); + public editorContent: string; public editing = false; @@ -94,6 +98,7 @@ export class EditorComponent implements OnInit { ngOnInit() { this.selectedTags = new Set(); this.formGroup.get('tags').valueChanges + .takeUntil(this.destroyed) .subscribe((input) => { this.filteredTags = this.filterTags(input); }); @@ -106,6 +111,7 @@ export class EditorComponent implements OnInit { this.editorService.setArticleId(params['id']); this.articleService.getArticle(id) + .takeUntil(this.destroyed) .subscribe(article => { this.formGroup.setValue({ 'articleTitle': article.title, @@ -122,6 +128,11 @@ export class EditorComponent implements OnInit { }); } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + updateContent(editor) { this.content = editor.html.get(); } @@ -139,6 +150,7 @@ export class EditorComponent implements OnInit { formData.append('coverPhoto', file); this.editorService.saveArticle(this.content, articleTitle, articleDescription, tags, formData) + .takeUntil(this.destroyed) .subscribe(result => { this.snackbarMessageService.displayError('Successfully saved article', 4000); }, error => { @@ -146,6 +158,7 @@ export class EditorComponent implements OnInit { }); } else { this.editorService.saveArticle(this.content, articleTitle, articleDescription, tags) + .takeUntil(this.destroyed) .subscribe(result => { this.snackbarMessageService.displayError('Successfully saved article', 4000); }, error => { @@ -164,6 +177,7 @@ export class EditorComponent implements OnInit { publishArticle() { this.editorService.publishArticle() + .takeUntil(this.destroyed) .subscribe(result => { this.snackbarMessageService.displayError('Successfully published article', 4000); }, error => { @@ -196,6 +210,7 @@ export class EditorComponent implements OnInit { } else { const input = this.tagInput; this.editorService.addTag(input) + .takeUntil(this.destroyed) .subscribe(result => { this.selectedTags.add(input); this.snackbarMessageService.displayError(`Added the tag: ${input}`, 2000); @@ -226,13 +241,14 @@ export class EditorComponent implements OnInit { } }); - dialogRef.afterClosed().subscribe(result => { - if (result) { - this.formGroup.patchValue({ - coverPhoto: result - }); - } - }); + dialogRef.afterClosed() + .subscribe(result => { + if (result) { + this.formGroup.patchValue({ + coverPhoto: result + }); + } + }); } previewImage(): boolean { diff --git a/src/app/article-portal/image-preview/image-preview.component.ts b/src/app/article-portal/image-preview/image-preview.component.ts index c6a0a64..bed48ea 100644 --- a/src/app/article-portal/image-preview/image-preview.component.ts +++ b/src/app/article-portal/image-preview/image-preview.component.ts @@ -1,6 +1,7 @@ import { Component, Inject, OnInit, OnDestroy } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; import Cropper from 'cropperjs' + import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.service'; import { Image } from 'app/_models/Image'; diff --git a/src/app/article-portal/settings-modal/settings-modal.component.ts b/src/app/article-portal/settings-modal/settings-modal.component.ts index 269d9b4..a2112e7 100644 --- a/src/app/article-portal/settings-modal/settings-modal.component.ts +++ b/src/app/article-portal/settings-modal/settings-modal.component.ts @@ -1,12 +1,14 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms'; import { MatDialogRef, MatDialog } from '@angular/material'; +import { Subject } from 'rxjs/Subject'; +import 'rxjs/add/operator/takeUntil'; import { AuthenticationService } from 'app/_services/authentication.service'; import { AuthorService } from 'app/_services/author.service'; import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.service'; - import { FileValidator } from 'app/_directives/fileValidator.directive'; + import { ImagePreviewComponent } from 'app/article-portal/image-preview/image-preview.component'; @Component({ @@ -14,17 +16,18 @@ import { ImagePreviewComponent } from 'app/article-portal/image-preview/image-pr templateUrl: './settings-modal.component.html', styleUrls: ['./settings-modal.component.scss'] }) -export class SettingsModalComponent implements OnInit { +export class SettingsModalComponent implements OnInit, OnDestroy { + + private profilePictureUpdated: boolean; + private destroyed: Subject = new Subject(); - settingsGroup: FormGroup; - fileContent: any; - username: string; + public settingsGroup: FormGroup; + public username: string; public saveInProgress: boolean; public image: any; - private profilePictureUpdated: boolean = false; constructor( - fb: FormBuilder, + private fb: FormBuilder, private auth: AuthenticationService, private dialogRef: MatDialogRef, private dialog: MatDialog, @@ -39,6 +42,7 @@ export class SettingsModalComponent implements OnInit { ngOnInit() { this.authorService.getAuthor() + .takeUntil(this.destroyed) .subscribe(author => { this.settingsGroup.setValue({ 'name': author.name, @@ -52,6 +56,11 @@ export class SettingsModalComponent implements OnInit { this.saveInProgress = false; } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + saveSettings(formValue: any, isFormValid: boolean) { if (isFormValid) { this.saveInProgress = true; @@ -65,8 +74,8 @@ export class SettingsModalComponent implements OnInit { formData.append('profilePicture', file); this.authorService.updateUserSettings(this.username, name, email, formData) + .takeUntil(this.destroyed) .subscribe(result => { - console.log('Results', result); this.saveInProgress = false; this.snackBarMessagingService.displayError('Updated user settings', 4000); this.dialogRef.close({name, image: result.data.profilePicture || ''}); @@ -76,6 +85,7 @@ export class SettingsModalComponent implements OnInit { }); } else { this.authorService.updateUserSettings(this.username, name, email) + .takeUntil(this.destroyed) .subscribe(result => { this.saveInProgress = false; this.snackBarMessagingService.displayError('Updated user settings', 4000); @@ -119,14 +129,16 @@ export class SettingsModalComponent implements OnInit { } }); - dialogRef.afterClosed().subscribe(result => { - if (result) { - this.settingsGroup.patchValue({ - profilePicture: result - }); - this.profilePictureUpdated = true; - } - }); + dialogRef.afterClosed() + .takeUntil(this.destroyed) + .subscribe(result => { + if (result) { + this.settingsGroup.patchValue({ + profilePicture: result + }); + this.profilePictureUpdated = true; + } + }); } previewImage(): boolean { diff --git a/src/app/article-portal/user-articles/article-list/article-list.component.ts b/src/app/article-portal/user-articles/article-list/article-list.component.ts index c43f3e3..77c7e76 100644 --- a/src/app/article-portal/user-articles/article-list/article-list.component.ts +++ b/src/app/article-portal/user-articles/article-list/article-list.component.ts @@ -1,11 +1,13 @@ -import { Component, ViewChild, OnInit, ElementRef } from '@angular/core'; +import { Component, ViewChild, OnInit, ElementRef, OnDestroy } from '@angular/core'; import { MatDialog, MatDialogRef, MatSort, MatPaginator } from '@angular/material'; import { Router } from '@angular/router'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; -import {Observable} from 'rxjs/Observable'; +import { Observable } from 'rxjs/Observable'; +import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; import 'rxjs/add/observable/fromEvent'; +import 'rxjs/add/operator/takeUntil'; import { AuthorService } from 'app/_services/author.service'; import { ArticleDataSource } from './article-data/article.datasource'; @@ -17,10 +19,13 @@ import { DeleteArticleModalComponent } from 'app/article-portal/delete-article-m templateUrl: './article-list.component.html', styleUrls: ['./article-list.component.scss'] }) -export class ArticleListComponent implements OnInit { - dataSource: ArticleDataSource; - dataSubject = new BehaviorSubject([]); - displayedColumns: string[]; +export class ArticleListComponent implements OnInit, OnDestroy { + + private destroyed: Subject = new Subject(); + + public dataSource: ArticleDataSource; + public dataSubject = new BehaviorSubject([]); + public displayedColumns: string[]; @ViewChild(MatSort) sort: MatSort; @ViewChild(MatPaginator) paginator: MatPaginator; @@ -35,9 +40,11 @@ export class ArticleListComponent implements OnInit { } ngOnInit() { - this.authorService.getArticlesByAuthor().subscribe((results) => { - this.dataSubject.next(results); - }); + this.authorService.getArticlesByAuthor() + .takeUntil(this.destroyed) + .subscribe((results) => { + this.dataSubject.next(results); + }); this.dataSource = new ArticleDataSource(this.dataSubject, this.sort, this.paginator); Observable.fromEvent(this.filter.nativeElement, 'keyup') .debounceTime(150) @@ -48,6 +55,11 @@ export class ArticleListComponent implements OnInit { }); } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + viewArticle(article: Article) { this.router.navigateByUrl('/article/' + article._id); } @@ -63,8 +75,10 @@ export class ArticleListComponent implements OnInit { height: '40vh', width: '40vw' }); - dialogRef.afterClosed().subscribe(() => { - this.dataSubject.next(articles.filter(a => a !== article)); - }); + dialogRef.afterClosed() + .takeUntil(this.destroyed) + .subscribe(() => { + this.dataSubject.next(articles.filter(a => a !== article)); + }); } } diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts index 57c03d7..dcd342b 100644 --- a/src/app/articles/articles.component.ts +++ b/src/app/articles/articles.component.ts @@ -1,6 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router } from '@angular/router'; import { Observable } from 'rxjs/Observable'; +import { Subject } from 'rxjs/Subject'; +import 'rxjs/add/operator/takeUntil'; import { ArticleService } from 'app/_services/article.service'; import { TagService } from 'app/_services/tags.service'; @@ -12,7 +14,9 @@ import { ArticleList } from 'app/_models/ArticleList'; templateUrl: './articles.component.html', styleUrls: ['./articles.component.scss'] }) -export class ArticlesComponent implements OnInit { +export class ArticlesComponent implements OnInit, OnDestroy { + + private destroyed: Subject = new Subject(); public articles; public tags: Promise>; @@ -29,17 +33,23 @@ export class ArticlesComponent implements OnInit { ngOnInit() { this.articles = this.articleService.getAllArticles(); this.tagService.getAllTags() + .takeUntil(this.destroyed) .subscribe((tags) => { this.tagData = tags; this.tags = Promise.resolve(Object.keys(tags)); - this.maxSize = Object.keys(tags).map((tag) => { - return parseInt(tags[tag], 10); - }).reduce((accumulator, currentValue) => { + this.maxSize = Object.keys(tags) + .map((tag) => parseInt(tags[tag], 10)) + .reduce((accumulator, currentValue) => { return Math.max(accumulator, currentValue); }, 0); }); } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + selectedArticle(e) { this.articleService.setArticleId(e._id); this.router.navigate(['article', e._id]); diff --git a/src/app/login-modal/login-modal.component.ts b/src/app/login-modal/login-modal.component.ts index 0c566ae..f5039c0 100755 --- a/src/app/login-modal/login-modal.component.ts +++ b/src/app/login-modal/login-modal.component.ts @@ -1,7 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup, FormControl, Validators, FormsModule } from '@angular/forms'; import { Router } from '@angular/router'; -import { MatDialogRef } from '@angular/material' +import { MatDialogRef } from '@angular/material'; +import { Subject } from 'rxjs/Subject'; +import 'rxjs/add/operator/takeUntil'; import { AuthenticationService } from 'app/_services/authentication.service'; import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.service'; @@ -11,13 +13,15 @@ import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.servi templateUrl: './login-modal.component.html', styleUrls: ['./login-modal.component.scss'] }) -export class LoginModalComponent implements OnInit { +export class LoginModalComponent implements OnInit, OnDestroy { - title = 'Login'; - formGroup: FormGroup; + private destroyed: Subject = new Subject(); + + public title = 'Login'; + public formGroup: FormGroup; constructor( - fb: FormBuilder, + private fb: FormBuilder, private router: Router, private auth: AuthenticationService, private snackbarMessagingService: SnackbarMessagingService, @@ -32,22 +36,26 @@ export class LoginModalComponent implements OnInit { this.auth.logout(); } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + login(formValue: any, isFormValid: boolean) { if (isFormValid) { const username = formValue['username']; const password = formValue['password']; this.auth.login(username, password) + .takeUntil(this.destroyed) .subscribe(result => { - if (result === true) { + if (result) { this.dialogRef.close(username); this.router.navigate(['articles']); } else { this.snackbarMessagingService.displayError('Failed to login', 4000); } }, error => { - if (error.status === 401) { this.snackbarMessagingService.displayError('User or Password was incorrect', 4000); - } }); } else { this.snackbarMessagingService.displayError('Validation errors exist', 4000); diff --git a/src/app/nav-bar/nav-bar.component.ts b/src/app/nav-bar/nav-bar.component.ts index 6e68549..5e78f7d 100755 --- a/src/app/nav-bar/nav-bar.component.ts +++ b/src/app/nav-bar/nav-bar.component.ts @@ -1,8 +1,10 @@ -import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core'; import { Router } from '@angular/router'; import { MatDialog } from '@angular/material'; import { Observable } from 'rxjs/Observable'; +import { Subject } from 'rxjs/Subject'; +import 'rxjs/add/operator/takeUntil'; import { AuthenticationService } from 'app/_services/authentication.service'; import { AuthorService } from 'app/_services/author.service'; @@ -17,11 +19,13 @@ import { SettingsModalComponent } from 'app/article-portal/settings-modal/settin templateUrl: './nav-bar.component.html', styleUrls: ['./nav-bar.component.scss'] }) -export class NavBarComponent implements OnInit { +export class NavBarComponent implements OnInit, OnDestroy { - title = `The Lighthouse`; - name: Promise; - image: Promise; + private destroyed: Subject = new Subject(); + + public title = `The Lighthouse`; + public name: Promise; + public image: Promise; constructor( private auth: AuthenticationService, @@ -41,10 +45,16 @@ export class NavBarComponent implements OnInit { }); } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + login() { this.dialog.open(LoginModalComponent, { minWidth: '30vw' }).afterClosed() + .takeUntil(this.destroyed) .subscribe(result => { if (result) { this.name = this.authorService.getAuthorName(result); @@ -59,6 +69,7 @@ export class NavBarComponent implements OnInit { width: '25vw', minWidth: '300px' }).afterClosed() + .takeUntil(this.destroyed) .subscribe(result => { if (result) { this.name = Promise.resolve(result.name); @@ -71,6 +82,7 @@ export class NavBarComponent implements OnInit { this.dialog.open(SettingsModalComponent, { minWidth: '40vw' }).afterClosed() + .takeUntil(this.destroyed) .subscribe(result => { if (result.name) { this.name = Promise.resolve(result.name); diff --git a/src/app/register-modal/register-modal.component.ts b/src/app/register-modal/register-modal.component.ts index 07ccdc5..001e2ee 100755 --- a/src/app/register-modal/register-modal.component.ts +++ b/src/app/register-modal/register-modal.component.ts @@ -1,7 +1,9 @@ -import { Component } from '@angular/core'; +import { Component, OnDestroy } from '@angular/core'; import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { MatDialogRef } from '@angular/material'; +import { Subject } from 'rxjs/Subject'; +import 'rxjs/add/operator/takeUntil'; import { AuthenticationService } from 'app/_services/authentication.service'; import { SnackbarMessagingService } from 'app/_services/snackbar-messaging.service'; @@ -18,9 +20,11 @@ function equalValidator({value}: FormGroup): {[key: string]: any} { templateUrl: './register-modal.component.html', styleUrls: ['./register-modal.component.scss'] }) -export class RegisterModalComponent { +export class RegisterModalComponent implements OnDestroy { - title = 'Register'; + private destroyed: Subject = new Subject(); + + public title = 'Register'; public registerGroup: FormGroup; constructor( @@ -41,6 +45,11 @@ export class RegisterModalComponent { }); } + ngOnDestroy() { + this.destroyed.next(); + this.destroyed.complete(); + } + register(formValue: any, isFormValid: boolean) { if (isFormValid) { const username = formValue.username; @@ -50,8 +59,9 @@ export class RegisterModalComponent { const name = formValue.name; this.auth.register(username, password, email, name) + .takeUntil(this.destroyed) .subscribe(result => { - if (result === true) { + if (result) { this.dialogRef.close(name); this.router.navigate(['articles']); } else {