43 |
44 |
45 |
46 |
52 |
53 |
54 |
2 |
3 |
38 |
39 |
129 |
--------------------------------------------------------------------------------
/src/app/article/article.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormControl } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 |
5 | import {
6 | Article,
7 | ArticlesService,
8 | Comment,
9 | CommentsService,
10 | User,
11 | UserService
12 | } from '../core';
13 |
14 | @Component({
15 | selector: 'app-article-page',
16 | templateUrl: './article.component.html'
17 | })
18 | export class ArticleComponent implements OnInit {
19 | article: Article;
20 | currentUser: User;
21 | canModify: boolean;
22 | comments: Comment[];
23 | commentControl = new FormControl();
24 | commentFormErrors = {};
25 | isSubmitting = false;
26 | isDeleting = false;
27 |
28 | constructor(
29 | private route: ActivatedRoute,
30 | private articlesService: ArticlesService,
31 | private commentsService: CommentsService,
32 | private router: Router,
33 | private userService: UserService,
34 | ) { }
35 |
36 | ngOnInit() {
37 | // Retreive the prefetched article
38 | this.route.data.subscribe(
39 | (data: { article: Article }) => {
40 | this.article = data.article;
41 |
42 | // Load the comments on this article
43 | this.populateComments();
44 | }
45 | );
46 |
47 | // Load the current user's data
48 | this.userService.currentUser.subscribe(
49 | (userData: User) => {
50 | this.currentUser = userData;
51 |
52 | this.canModify = (this.currentUser.username === this.article.author.username);
53 | }
54 | );
55 | }
56 |
57 | onToggleFavorite(favorited: boolean) {
58 | this.article.favorited = favorited;
59 |
60 | if (favorited) {
61 | this.article.favoritesCount++;
62 | } else {
63 | this.article.favoritesCount--;
64 | }
65 | }
66 |
67 | onToggleFollowing(following: boolean) {
68 | this.article.author.following = following;
69 | }
70 |
71 | deleteArticle() {
72 | this.isDeleting = true;
73 |
74 | this.articlesService.destroy(this.article.slug)
75 | .subscribe(
76 | success => {
77 | this.router.navigateByUrl('/');
78 | }
79 | );
80 | }
81 |
82 | populateComments() {
83 | this.commentsService.getAll(this.article.slug)
84 | .subscribe(comments => this.comments = comments);
85 | }
86 |
87 | addComment() {
88 | this.isSubmitting = true;
89 | this.commentFormErrors = {};
90 |
91 | const commentBody = this.commentControl.value;
92 | this.commentsService
93 | .add(this.article.slug, commentBody)
94 | .subscribe(
95 | comment => {
96 | this.comments.unshift(comment);
97 | this.commentControl.reset('');
98 | this.isSubmitting = false;
99 | },
100 | errors => {
101 | this.isSubmitting = false;
102 | this.commentFormErrors = errors;
103 | }
104 | );
105 | }
106 |
107 | onDeleteComment(comment) {
108 | this.commentsService.destroy(comment.id, this.article.slug)
109 | .subscribe(
110 | success => {
111 | this.comments = this.comments.filter((item) => item !== comment);
112 | }
113 | );
114 | }
115 |
116 | }
117 |
--------------------------------------------------------------------------------
/src/app/article/article.module.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders, NgModule } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 |
4 | import { ArticleComponent } from './article.component';
5 | import { ArticleCommentComponent } from './article-comment.component';
6 | import { ArticleResolver } from './article-resolver.service';
7 | import { MarkdownPipe } from './markdown.pipe';
8 | import { SharedModule } from '../shared';
9 | import { ArticleRoutingModule } from './article-routing.module';
10 |
11 | @NgModule({
12 | imports: [
13 | SharedModule,
14 | ArticleRoutingModule
15 | ],
16 | declarations: [
17 | ArticleComponent,
18 | ArticleCommentComponent,
19 | MarkdownPipe
20 | ],
21 |
22 | providers: [
23 | ArticleResolver
24 | ]
25 | })
26 | export class ArticleModule {}
27 |
--------------------------------------------------------------------------------
/src/app/article/markdown.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import * as marked from 'marked';
3 |
4 | @Pipe({name: 'markdown'})
5 | export class MarkdownPipe implements PipeTransform {
6 | transform(content: string): string {
7 | return marked(content, { sanitize: true });
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/auth/auth-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { AuthComponent } from './auth.component';
4 | import { NoAuthGuard } from './no-auth-guard.service';
5 |
6 | const routes: Routes = [
7 | {
8 | path: 'login',
9 | component: AuthComponent,
10 | canActivate: [NoAuthGuard]
11 | },
12 | {
13 | path: 'register',
14 | component: AuthComponent,
15 | canActivate: [NoAuthGuard]
16 | }
17 | ];
18 |
19 | @NgModule({
20 | imports: [RouterModule.forChild(routes)],
21 | exports: [RouterModule]
22 | })
23 | export class AuthRoutingModule {}
24 |
--------------------------------------------------------------------------------
/src/app/auth/auth.component.html:
--------------------------------------------------------------------------------
1 |
40 |
41 |
57 | 58 |
128 |
42 |
55 |
56 | 57 | 58 |
59 |
60 |
61 |
62 |
64 | Edit Article
65 |
66 |
67 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
83 | {{ article.favorited ? 'Unfavorite' : 'Favorite' }} Article ({{ article.favoritesCount }})
84 |
85 |
86 |
87 |
88 |
89 |
90 |
126 |
127 |
2 |
46 |
--------------------------------------------------------------------------------
/src/app/auth/auth.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 |
5 | import { Errors, UserService } from '../core';
6 |
7 | @Component({
8 | selector: 'app-auth-page',
9 | templateUrl: './auth.component.html'
10 | })
11 | export class AuthComponent implements OnInit {
12 | authType: String = '';
13 | title: String = '';
14 | errors: Errors = {errors: {}};
15 | isSubmitting = false;
16 | authForm: FormGroup;
17 |
18 | constructor(
19 | private route: ActivatedRoute,
20 | private router: Router,
21 | private userService: UserService,
22 | private fb: FormBuilder
23 | ) {
24 | // use FormBuilder to create a form group
25 | this.authForm = this.fb.group({
26 | 'email': ['', Validators.required],
27 | 'password': ['', Validators.required]
28 | });
29 | }
30 |
31 | ngOnInit() {
32 | this.route.url.subscribe(data => {
33 | // Get the last piece of the URL (it's either 'login' or 'register')
34 | this.authType = data[data.length - 1].path;
35 | // Set a title for the page accordingly
36 | this.title = (this.authType === 'login') ? 'Sign in' : 'Sign up';
37 | // add form control for username if this is the register page
38 | if (this.authType === 'register') {
39 | this.authForm.addControl('username', new FormControl());
40 | }
41 | });
42 | }
43 |
44 | submitForm() {
45 | this.isSubmitting = true;
46 | this.errors = {errors: {}};
47 |
48 | const credentials = this.authForm.value;
49 | this.userService
50 | .attemptAuth(this.authType, credentials)
51 | .subscribe(
52 | data => this.router.navigateByUrl('/'),
53 | err => {
54 | this.errors = err;
55 | this.isSubmitting = false;
56 | }
57 | );
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/auth/auth.module.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders, NgModule } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 |
4 | import { AuthComponent } from './auth.component';
5 | import { NoAuthGuard } from './no-auth-guard.service';
6 | import { SharedModule } from '../shared';
7 | import { AuthRoutingModule } from './auth-routing.module';
8 |
9 | @NgModule({
10 | imports: [
11 | SharedModule,
12 | AuthRoutingModule
13 | ],
14 | declarations: [
15 | AuthComponent
16 | ],
17 | providers: [
18 | NoAuthGuard
19 | ]
20 | })
21 | export class AuthModule {}
22 |
--------------------------------------------------------------------------------
/src/app/auth/no-auth-guard.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
3 | import { Observable } from 'rxjs';
4 |
5 | import { UserService } from '../core';
6 | import { map , take } from 'rxjs/operators';
7 |
8 | @Injectable()
9 | export class NoAuthGuard implements CanActivate {
10 | constructor(
11 | private router: Router,
12 | private userService: UserService
13 | ) {}
14 |
15 | canActivate(
16 | route: ActivatedRouteSnapshot,
17 | state: RouterStateSnapshot
18 | ): Observable
3 |
45 |
4 |
5 |
42 |
43 |
44 |
2 |
60 |
--------------------------------------------------------------------------------
/src/app/editor/editor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 |
5 | import { Article, ArticlesService } from '../core';
6 |
7 | @Component({
8 | selector: 'app-editor-page',
9 | templateUrl: './editor.component.html'
10 | })
11 | export class EditorComponent implements OnInit {
12 | article: Article = {} as Article;
13 | articleForm: FormGroup;
14 | tagField = new FormControl();
15 | errors: Object = {};
16 | isSubmitting = false;
17 |
18 | constructor(
19 | private articlesService: ArticlesService,
20 | private route: ActivatedRoute,
21 | private router: Router,
22 | private fb: FormBuilder
23 | ) {
24 | // use the FormBuilder to create a form group
25 | this.articleForm = this.fb.group({
26 | title: '',
27 | description: '',
28 | body: ''
29 | });
30 |
31 | // Initialized tagList as empty array
32 | this.article.tagList = [];
33 |
34 | // Optional: subscribe to value changes on the form
35 | // this.articleForm.valueChanges.subscribe(value => this.updateArticle(value));
36 | }
37 |
38 | ngOnInit() {
39 | // If there's an article prefetched, load it
40 | this.route.data.subscribe((data: { article: Article }) => {
41 | if (data.article) {
42 | this.article = data.article;
43 | this.articleForm.patchValue(data.article);
44 | }
45 | });
46 | }
47 |
48 | addTag() {
49 | // retrieve tag control
50 | const tag = this.tagField.value;
51 | // only add tag if it does not exist yet
52 | if (this.article.tagList.indexOf(tag) < 0) {
53 | this.article.tagList.push(tag);
54 | }
55 | // clear the input
56 | this.tagField.reset('');
57 | }
58 |
59 | removeTag(tagName: string) {
60 | this.article.tagList = this.article.tagList.filter(tag => tag !== tagName);
61 | }
62 |
63 | submitForm() {
64 | this.isSubmitting = true;
65 |
66 | // update the model
67 | this.updateArticle(this.articleForm.value);
68 |
69 | // post the changes
70 | this.articlesService.save(this.article).subscribe(
71 | article => this.router.navigateByUrl('/article/' + article.slug),
72 | err => {
73 | this.errors = err;
74 | this.isSubmitting = false;
75 | }
76 | );
77 | }
78 |
79 | updateArticle(values: Object) {
80 | Object.assign(this.article, values);
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/app/editor/editor.module.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders, NgModule } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 |
4 | import { EditorComponent } from './editor.component';
5 | import { EditableArticleResolver } from './editable-article-resolver.service';
6 | import { AuthGuard } from '../core';
7 | import { SharedModule } from '../shared';
8 | import { EditorRoutingModule } from './editor-routing.module';
9 |
10 | @NgModule({
11 | imports: [SharedModule, EditorRoutingModule],
12 | declarations: [EditorComponent],
13 | providers: [EditableArticleResolver]
14 | })
15 | export class EditorModule {}
16 |
--------------------------------------------------------------------------------
/src/app/home/home-auth-resolver.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
3 | import { Observable } from 'rxjs';
4 |
5 | import { UserService } from '../core';
6 | import { take } from 'rxjs/operators';
7 |
8 | @Injectable()
9 | export class HomeAuthResolver implements Resolve
3 |
59 |
4 |
58 |
5 |
6 |
57 |
2 |
3 |
9 |
10 |
66 |
--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | import { ArticleListConfig, TagsService, UserService } from '../core';
5 |
6 | @Component({
7 | selector: 'app-home-page',
8 | templateUrl: './home.component.html',
9 | styleUrls: ['./home.component.css']
10 | })
11 | export class HomeComponent implements OnInit {
12 | constructor(
13 | private router: Router,
14 | private tagsService: TagsService,
15 | private userService: UserService
16 | ) {}
17 |
18 | isAuthenticated: boolean;
19 | listConfig: ArticleListConfig = {
20 | type: 'all',
21 | filters: {}
22 | };
23 | tags: Array
11 |
65 |
12 |
13 |
64 |
14 |
40 |
41 |
15 |
36 |
37 |
38 |
42 |
61 |
62 |
63 |
2 |
3 |
59 |
--------------------------------------------------------------------------------
/src/app/profile/profile.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 |
4 | import { User, UserService, Profile } from '../core';
5 | import { concatMap , tap } from 'rxjs/operators';
6 |
7 | @Component({
8 | selector: 'app-profile-page',
9 | templateUrl: './profile.component.html'
10 | })
11 | export class ProfileComponent implements OnInit {
12 | constructor(
13 | private route: ActivatedRoute,
14 | private userService: UserService
15 | ) { }
16 |
17 | profile: Profile;
18 | currentUser: User;
19 | isUser: boolean;
20 |
21 | ngOnInit() {
22 | this.route.data.pipe(
23 | concatMap((data: { profile: Profile }) => {
24 | this.profile = data.profile;
25 | // Load the current user's data.
26 | return this.userService.currentUser.pipe(tap(
27 | (userData: User) => {
28 | this.currentUser = userData;
29 | this.isUser = (this.currentUser.username === this.profile.username);
30 | }
31 | ));
32 | })
33 | ).subscribe();
34 | }
35 |
36 | onToggleFollowing(following: boolean) {
37 | this.profile.following = following;
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/profile/profile.module.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders, NgModule } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 |
4 | import { ProfileArticlesComponent } from './profile-articles.component';
5 | import { ProfileComponent } from './profile.component';
6 | import { ProfileFavoritesComponent } from './profile-favorites.component';
7 | import { ProfileResolver } from './profile-resolver.service';
8 | import { SharedModule } from '../shared';
9 | import { ProfileRoutingModule } from './profile-routing.module';
10 |
11 | @NgModule({
12 | imports: [
13 | SharedModule,
14 | ProfileRoutingModule
15 | ],
16 | declarations: [
17 | ProfileArticlesComponent,
18 | ProfileComponent,
19 | ProfileFavoritesComponent
20 | ],
21 | providers: [
22 | ProfileResolver
23 | ]
24 | })
25 | export class ProfileModule {}
26 |
--------------------------------------------------------------------------------
/src/app/settings/settings-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { RouterModule, Routes } from '@angular/router';
3 | import { AuthGuard } from '../core';
4 | import { SettingsComponent } from './settings.component';
5 |
6 | const routes: Routes = [
7 | {
8 | path: '',
9 | component: SettingsComponent,
10 | canActivate: [AuthGuard]
11 | }
12 | ];
13 |
14 | @NgModule({
15 | imports: [RouterModule.forChild(routes)],
16 | exports: [RouterModule]
17 | })
18 | export class SettingsRoutingModule {}
19 |
--------------------------------------------------------------------------------
/src/app/settings/settings.component.html:
--------------------------------------------------------------------------------
1 |
4 |
26 |
27 |
5 |
25 |
6 |
7 |
24 |
8 | ![]()
9 |
15 |
16 |
19 | Edit Profile Settings
20 |
21 |
22 |
23 | {{ profile.username }}
10 |{{ profile.bio }}
11 |
28 |
57 |
58 |
29 |
30 |
56 |
31 |
54 |
55 |
32 |
50 |
51 |
52 |
2 |
69 |
--------------------------------------------------------------------------------
/src/app/settings/settings.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 |
5 | import { User, UserService } from '../core';
6 |
7 | @Component({
8 | selector: 'app-settings-page',
9 | templateUrl: './settings.component.html'
10 | })
11 | export class SettingsComponent implements OnInit {
12 | user: User = {} as User;
13 | settingsForm: FormGroup;
14 | errors: Object = {};
15 | isSubmitting = false;
16 |
17 | constructor(
18 | private router: Router,
19 | private userService: UserService,
20 | private fb: FormBuilder
21 | ) {
22 | // create form group using the form builder
23 | this.settingsForm = this.fb.group({
24 | image: '',
25 | username: '',
26 | bio: '',
27 | email: '',
28 | password: ''
29 | });
30 | // Optional: subscribe to changes on the form
31 | // this.settingsForm.valueChanges.subscribe(values => this.updateUser(values));
32 | }
33 |
34 | ngOnInit() {
35 | // Make a fresh copy of the current user's object to place in editable form fields
36 | Object.assign(this.user, this.userService.getCurrentUser());
37 | // Fill the form
38 | this.settingsForm.patchValue(this.user);
39 | }
40 |
41 | logout() {
42 | this.userService.purgeAuth();
43 | this.router.navigateByUrl('/');
44 | }
45 |
46 | submitForm() {
47 | this.isSubmitting = true;
48 |
49 | // update the model
50 | this.updateUser(this.settingsForm.value);
51 |
52 | this.userService
53 | .update(this.user)
54 | .subscribe(
55 | updatedUser => this.router.navigateByUrl('/profile/' + updatedUser.username),
56 | err => {
57 | this.errors = err;
58 | this.isSubmitting = false;
59 | }
60 | );
61 | }
62 |
63 | updateUser(values: Object) {
64 | Object.assign(this.user, values);
65 | }
66 |
67 | }
68 |
--------------------------------------------------------------------------------
/src/app/settings/settings.module.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders, NgModule } from '@angular/core';
2 | import { RouterModule } from '@angular/router';
3 |
4 | import { SettingsComponent } from './settings.component';
5 | import { AuthGuard } from '../core';
6 | import { SharedModule } from '../shared';
7 | import { SettingsRoutingModule } from './settings-routing.module';
8 |
9 | @NgModule({
10 | imports: [
11 | SharedModule,
12 | SettingsRoutingModule
13 | ],
14 | declarations: [
15 | SettingsComponent
16 | ]
17 | })
18 | export class SettingsModule {}
19 |
--------------------------------------------------------------------------------
/src/app/shared/article-helpers/article-list.component.css:
--------------------------------------------------------------------------------
1 | .page-link {
2 | cursor: pointer;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/shared/article-helpers/article-list.component.html:
--------------------------------------------------------------------------------
1 |
3 |
68 |
4 |
67 |
5 |
6 |
59 | 60 | 64 | 65 |
66 | Your Settings
7 | 8 |59 | 60 | 64 | 65 |
8 | Loading articles...
9 |
10 |
11 |
13 | No articles are here... yet.
14 |
15 |
16 |
30 |
--------------------------------------------------------------------------------
/src/app/shared/article-helpers/article-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | import { Article, ArticleListConfig, ArticlesService } from '../../core';
4 | @Component({
5 | selector: 'app-article-list',
6 | styleUrls: ['article-list.component.css'],
7 | templateUrl: './article-list.component.html'
8 | })
9 | export class ArticleListComponent {
10 | constructor (
11 | private articlesService: ArticlesService
12 | ) {}
13 |
14 | @Input() limit: number;
15 | @Input()
16 | set config(config: ArticleListConfig) {
17 | if (config) {
18 | this.query = config;
19 | this.currentPage = 1;
20 | this.runQuery();
21 | }
22 | }
23 |
24 | query: ArticleListConfig;
25 | results: Article[];
26 | loading = false;
27 | currentPage = 1;
28 | totalPages: Array
2 |
3 | ![]()
4 |
5 |
6 |
18 |
--------------------------------------------------------------------------------
/src/app/shared/article-helpers/article-meta.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | import { Article } from '../../core';
4 |
5 | @Component({
6 | selector: 'app-article-meta',
7 | templateUrl: './article-meta.component.html'
8 | })
9 | export class ArticleMetaComponent {
10 | @Input() article: Article;
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/shared/article-helpers/article-preview.component.html:
--------------------------------------------------------------------------------
1 |
7 |
9 | {{ article.author.username }}
10 |
11 |
12 | {{ article.createdAt | date: 'longDate' }}
13 |
14 |
15 |
16 |
2 |
3 |
7 | {{article.favoritesCount}}
8 |
9 |
10 |
11 |
12 |
23 |
--------------------------------------------------------------------------------
/src/app/shared/article-helpers/article-preview.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | import { Article } from '../../core';
4 |
5 | @Component({
6 | selector: 'app-article-preview',
7 | templateUrl: './article-preview.component.html'
8 | })
9 | export class ArticlePreviewComponent {
10 | @Input() article: Article;
11 |
12 | onToggleFavorite(favorited: boolean) {
13 | this.article['favorited'] = favorited;
14 |
15 | if (favorited) {
16 | this.article['favoritesCount']++;
17 | } else {
18 | this.article['favoritesCount']--;
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/shared/article-helpers/index.ts:
--------------------------------------------------------------------------------
1 | export * from './article-list.component';
2 | export * from './article-meta.component';
3 | export * from './article-preview.component';
4 |
--------------------------------------------------------------------------------
/src/app/shared/buttons/favorite-button.component.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/app/shared/buttons/favorite-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | import { Article, ArticlesService, UserService } from '../../core';
5 | import { of } from 'rxjs';
6 | import { concatMap , tap } from 'rxjs/operators';
7 |
8 | @Component({
9 | selector: 'app-favorite-button',
10 | templateUrl: './favorite-button.component.html'
11 | })
12 | export class FavoriteButtonComponent {
13 | constructor(
14 | private articlesService: ArticlesService,
15 | private router: Router,
16 | private userService: UserService
17 | ) {}
18 |
19 | @Input() article: Article;
20 | @Output() toggle = new EventEmitter{{ article.title }}
13 |{{ article.description }}
14 | Read more... 15 | 21 | 22 |-
2 |
- 3 | {{ error }} 4 | 5 |