--- title: "Build a Dynamic Watchlist for Your Web App with Angular & GraphQL (Part 6)" published_at: "2024-07-01T13:38:30+00:00" modified_at: "2025-11-21T09:22:54+00:00" url: "https://www.syncfusion.com/blogs/post/build-dynamic-watchlist-angular-graphql" excerpt: "Learn how to build a dynamic watchlist for your web app with Angular and GraphQL." taxonomy_category: - "Angular" - "Development" - "Web" taxonomy_post_tag: - "Angular" - "Full Stack" - "GraphQL" - "Syncfusion" - "Web Development" --- # Build a Dynamic Watchlist for Your Web App with Angular & GraphQL (Part 6) [Ankit Sharma](https://www.syncfusion.com/blogs/author/ankit-sharma) ![Build a Dynamic Watchlist for Your Web App with Angular & GraphQL](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Build-a-Dynamic-Watchlist-for-Your-Web-App-with-Angular-GraphQL.jpeg) **TL;DR:** Implement a watchlist feature in your Angular application using the AddToWatchlist component. Integrate it with a Watchlist component via GraphQL. Learn step-by-step with code examples and best practices. In the [previous article](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-5) of this series, we learned how to add login functionality and implement role-based authorization in our application. In this article, we will cover how to implement a watchlist feature similar to the wishlist feature of e-commerce apps. When a user visits the movie details page, we will add a feature to display a list of movies from the same genre. ## Create the IWatchlist interface First, create a new file named **IWatchlist.cs** in the ** MovieApp\Interfaces** folder with the following method. ``` public interface IWatchlist { Task ToggleWatchlistItem(int userId, int movieId); Task GetWatchlistId(int userId); Task ClearWatchlist(int userId); } ``` ## Create the watchlist data access layer Second, implement the data access layer for the watchlist functionality in a file named **WatchlistDataAccessLayer.cs** inside the ** MovieApp.Server\DataAccess** folder. Add the following code inside it. ``` public class WatchlistDataAccessLayer: IWatchlist { readonly MovieDbContext _dbContext; public WatchlistDataAccessLayer(IDbContextFactory dbContext) { _dbContext = dbContext.CreateDbContext(); } public async Task GetWatchlistId(int userId) { try { Watchlist? watchlist = await _dbContext.Watchlists.FirstOrDefaultAsync(x => x.UserId == userId); if (watchlist is not null) { return watchlist.WatchlistId; } else { return await CreateWatchlist(userId); } } catch { throw; } } public async Task ToggleWatchlistItem(int userId, int movieId) { string watchlistId = await GetWatchlistId(userId); WatchlistItem? existingWatchlistItem = await _dbContext.WatchlistItems .FirstOrDefaultAsync(x => x.MovieId == movieId && x.WatchlistId == watchlistId); if (existingWatchlistItem is not null) { _dbContext.WatchlistItems.Remove(existingWatchlistItem); } else { WatchlistItem watchlistItem = new() { WatchlistId = watchlistId, MovieId = movieId, }; _dbContext.WatchlistItems.Add(watchlistItem); } await _dbContext.SaveChangesAsync(); } public async Task ClearWatchlist(int userId) { try { string watchlistId = await GetWatchlistId(userId); List watchlistItem = _dbContext.WatchlistItems.Where(x => x.WatchlistId == watchlistId).ToList(); if (!string.IsNullOrEmpty(watchlistId)) { foreach (WatchlistItem item in watchlistItem) { _dbContext.WatchlistItems.Remove(item); await _dbContext.SaveChangesAsync(); } } } catch { throw; } } async Task CreateWatchlist(int userId) { try { Watchlist watchlist = new() { WatchlistId = Guid.NewGuid().ToString(), UserId = userId, DateCreated = DateTime.Now.Date }; await _dbContext.Watchlists.AddAsync(watchlist); await _dbContext.SaveChangesAsync(); return watchlist.WatchlistId; } catch { throw; } } } ``` The **WatchlistDataAccessLayer** class implements the ** IWatchlist** interface and utilizes an ** IDbContextFactory**in its constructor to instantiate a ** MovieDbContext**, enabling seamless interaction with the database. The **GetWatchlistId** is an asynchronous method for retrieving the watchlist ID for a given user ID. If a watchlist for the user doesn’t exist, it creates a new one. The **ToggleWatchlistItem** is an asynchronous method for adding or removing a movie from a user’s watchlist. If the movie is already on the watchlist, it will be removed; otherwise, it will be added. The **ClearWatchlist** method asynchronously removes all movies from a user’s watchlist. The**CreateWatchlist** is a private asynchronous method for creating a new watchlist for a user. It generates a new GUID for the watchlist ID, sets the user ID, and sets the creation date as the current date. In each method, database changes are saved using the asynchronous **SaveChangesAsync** method, which records all modifications made within the database context. The try-catch blocks within the methods ensure any potential exceptions during database interactions are handled smoothly. ## Update the IMovie interface Update the **IMovie** interface by adding the method declaration like in the following code example in the ** IMovie.cs** file. ``` public interface IMovie { // other methods. Task> GetSimilarMovies(int movieId); Task> GetMoviesAvailableInWatchlist(string watchlistId); } ``` ## Update the MovieDataAccessLayer class Update the **MovieDataAccessLayer** class by implementing the newly added methods of the ** IMovie** interface. ``` public async Task> GetSimilarMovies(int movieId) { List lstMovie = new(); Movie? movie = await _dbContext.Movies.FindAsync(movieId); if (movie is not null) { lstMovie = _dbContext.Movies.Where(m => m.Genre == movie.Genre && m.MovieId != movie.MovieId) .OrderBy(u => Guid.NewGuid()) .Take(5) .ToList(); } return lstMovie; } public async Task> GetMoviesAvailableInWatchlist(string watchlistID) { try { List userWatchlist = new(); List watchlistItems = _dbContext.WatchlistItems.Where(x => x.WatchlistId == watchlistID).ToList(); foreach (WatchlistItem item in watchlistItems) { Movie? movie = await GetMovieData(item.MovieId); if (movie is not null) { userWatchlist.Add(movie); } } return userWatchlist; } catch { throw; } } ``` The asynchronous method **GetSimilarMovies** retrieves a list of movies with the same genre as the selected movie. Identified by the ** movieId** parameter, it queries the database to find the corresponding Movie object and stores the result in the movie variable. If the movie object is not null, it performs another query to find all the movies with the same genre but different MovieId, ensuring the list excludes the selected movie itself. The results are then randomly ordered using GUIDs to shuffle the titles. Finally, it selects and returns up to five movies from this shuffled list that are similar to the selected movie. The **GetMoviesAvailableInWatchlist** method asynchronously retrieves all movies in a specific watchlist identified by the ** watchlistID** parameter. It queries the database to get all ** WatchlistItem** objects where the ** WatchlistId** matches the provided ** watchlistID** and stores the result in the ** watchlistItems** list. The method then iterates over each watchlist item in the list, calling the ** GetMovieData** method with the ** MovieId** of each item to get the corresponding ** Movie** object. If the ** Movie** object is not null, it adds the movie to the ** userWatchlist**. Finally, it returns the ** userWatchlist**. ## Add the GraphQL server query resolver for the watchlist Add a class named **WatchlistQueryResolver.cs** inside the ** MovieApp****\**** GraphQL** folder. Refer to the following code example. ``` [ExtendObjectType(typeof(MovieQueryResolver))] public class WatchlistQueryResolver { readonly IWatchlist _watchlistService; readonly IMovie _movieService; readonly IUser _userService; public WatchlistQueryResolver(IWatchlist watchlistService, IMovie movieService, IUser userService) { _watchlistService = watchlistService; _movieService = movieService; _userService = userService; } [Authorize] [GraphQLDescription("Get the user Watchlist.")] public async Task> GetWatchlist(int userId) { bool user = await _userService.IsUserExists(userId); if (user) { string watchlistid = await _watchlistService.GetWatchlistId(userId); return await _movieService.GetMoviesAvailableInWatchlist(watchlistid); } else { return new List(); } } } ``` The **WatchlistQueryResolver** class has three private, read-only fields: **_watchlistService**, **_movieService**, and **_userService**. These fields are instances of the ** IWatchlist**, ** IMovie**, and ** IUser** interfaces, respectively, and they are initialized via dependency injection in the constructor. This class extends the ** MovieQueryResolver** type, adding additional fields to the existing GraphQL type. The **GetWatchlist** method checks if a user with the provided ** userId** exists by calling the ** IsUserExists** method of **_userService**. The result is stored in the user variable. If the user exists, it gets the ID of the user’s watchlist by calling the ** GetWatchlistId** method of **_watchlistService**. It then retrieves the movies available in the watchlist by calling the ** GetMoviesAvailableInWatchlist** method of **_movieService** with the watchlist ID. If the user does not exist, it returns an empty list of ** Movie** objects. This method is decorated with the ** Authorize** attribute, which requires the client to be authenticated to call this method. ## Add the GraphQL server mutation resolver for the watchlist Add a class named **WatchlistMutationResolver.cs** inside the ** MovieApp\GraphQL** folder. Refer to the following code example. ``` [ExtendObjectType(typeof(MovieMutationResolver))] public class WatchlistMutationResolver { readonly IWatchlist _watchlistService; readonly IMovie _movieService; readonly IUser _userService; public WatchlistMutationResolver(IWatchlist watchlistService, IMovie movieService, IUser userService) { _watchlistService = watchlistService; _movieService = movieService; _userService = userService; } [Authorize] [GraphQLDescription("Toggle Watchlist item.")] public async Task> ToggleWatchlist(int userId, int movieId) { await _watchlistService.ToggleWatchlistItem(userId, movieId); bool user = await _userService.IsUserExists(userId); if (user) { string watchlistid = await _watchlistService.GetWatchlistId(userId); return await _movieService.GetMoviesAvailableInWatchlist(watchlistid); } else { return new List(); } } [Authorize] [GraphQLDescription("Delete all items from Watchlist.")] public async Task ClearWatchlist(int userId) { await _watchlistService.ClearWatchlist(userId); return userId; } } ``` The **WatchlistMutationResolver** class has three private read-only fields: **_watchlistService**, **_movieService**, and **_userService**. These fields are instances of ** IWatchlist**, ** IMovie**, and** IUser** interfaces, respectively, and they are initialized via dependency injection in the constructor. The **ToggleWatchlist** method is an asynchronous method that toggles a movie in a user’s watchlist and then returns an updated list of movies in the watchlist. It’s decorated with the ** Authorize** attribute, which means it requires the client to be authenticated to call this method. The ** GraphQLDescription** attribute provides a description for this field in the GraphQL schema. The **ClearWatchlist** method is another asynchronous method that deletes all items from a user’s watchlist and then returns the user’s ID. It’s also decorated with the ** Authorize** and ** GraphQLDescription** attributes. ## Add a GraphQL server query to get similar movies Add the following method to the **MovieQueryResolver** class. ``` [GraphQLDescription("Gets the list of movies which belongs to the same genre as the movie whose movieId is passed as parameter.")] public async Task> GetSimilarMovies(int movieId) { return await _movieService.GetSimilarMovies(movieId); } ``` This asynchronous method returns a list of **Movie** objects with the same genre as the given movie, identified by the ** movieId** parameter. ## Configure the Program.cs file Since we have added new GraphQL resolvers, we need to register them in our middleware. Update the following code example in the **Program.cs** file. ``` builder.Services.AddGraphQLServer() .AddAuthorization() .AddQueryType() .AddTypeExtension() .AddMutationType() .AddTypeExtension() .AddTypeExtension() .AddFiltering() .AddErrorFilter(error => { return error; }); ``` We use the **AddTypeExtension** method to register new resolvers of the types ** WatchlistQueryResolver** and ** WatchlistMutationResolver**. We will register the transient lifetime of the **IWatchlist** service using the following code. ``` builder.Services.AddTransient(); ``` With the server configuration complete, we can now move to the client side of the app. ## Add the GraphQL query Add the following GraphQL queries to the **src\app\GraphQL\query.ts** file. ``` export const GET_SIMILAR_MOVIE = gql` query FetchSimilarMovies($movieId: Int!) { similarMovies(movieId: $movieId) { movieId title posterPath genre rating language duration overview } } `; export const GET_WATCHLIST = gql` query FetchWatchList($userId: Int!) { watchlist(userId: $userId) { movieId title posterPath genre rating language duration } } `; ``` The code uses the **gql** tag from the ** graphql-tag** library to define two GraphQL queries as described: - **GET_SIMILAR_MOVIE**: This query is named ** FetchSimilarMovies** and it takes a single parameter, **$movieId**, of type ** Int!.** The **‘!’** indicates that this parameter is required. The query fetches similar movies to the given movie ID, returning several fields for each similar movie, such as ** movieId**, ** title**, ** posterPath**, ** genre**, ** rating**, ** language**, ** duration**, and ** overview**. - **GET_WATCHLIST**: This query is named ** FetchWatchList** and takes a single parameter, **$userId**, of type ** Int!.** It fetches the watchlist for the given user ID and returning several fields for each movie in the watchlist, such as ** movieId**, ** title**, ** posterPath**, ** genre**, ** rating**, ** language**, and ** duration**. ## Add the GraphQL mutation Add the following GraphQL mutation in the **src\app\GraphQL\mutation.ts** file. ``` export const TOGGLE_WATCHLIST = gql` mutation toggleUserWatchlist($userId: Int!, $movieId: Int!) { toggleWatchlist(userId: $userId, movieId: $movieId) { movieId title posterPath genre rating language duration } } `; export const CLEAR_WATCHLIST = gql` mutation clearWatchlist($userId: Int!) { clearWatchlist(userId: $userId) } `; ``` The code uses the **gql** tag from the ** graphql-tag** library to define two GraphQL mutations as described below: - **TOGGLE_WATCHLIST**: This mutation is named ** toggleUserWatchlist,** and it takes two parameters, **$userId** and **$movieId**, of type ** Int!**. The **‘!’** indicates that these parameters are required. The mutation toggles a movie’s watchlist status for a user. If the movie is already on the user’s watchlist, it will be removed. If it’s not, it will be added. The mutation returns several fields for the toggled movie: ** movieId**, ** title**, ** posterPath**, ** genre**, ** rating**, ** language**, and ** duration**. - **CLEAR_WATCHLIST**: This mutation is named ** clearWatchlist** and takes a single parameter, **$userId**, of type ** Int!**. It clears the watchlist for the given user ID, removing all movies from it. ## Create the client side model Add the following type definitions to the **movie.ts** file under the ** src\app\models\movie.ts** folder. ``` export type SimilarMovieType = { similarMovies: Movie[]; }; export type WatchlistType = { watchlist: Movie[]; }; export type ToggleWatchlistType = { toggleWatchlist: Movie[]; }; ``` ## Create the required GraphQL services ### Generate the fetch similar movies service Run the following command in the **ClientApp** folder to generate a service file. ``` ng g s services\fetch-similar-movies ``` Add the following code to the **fetch-similar-movies.service.ts** file. ``` import { Injectable } from '@angular/core'; import { Query } from 'apollo-angular'; import { SimilarMovieType } from '../models/movie'; import { GET_SIMILAR_MOVIE } from '../GraphQL/query'; @Injectable({ providedIn: 'root', }) export class FetchSimilarMoviesService extends Query { document = GET_SIMILAR_MOVIE; } ``` This service performs a GraphQL query to fetch a list of similar movies for a given movie ID. ### Generate the fetch watchlist service Run the following command to generate a new service file. ``` ng g s services\fetch-watchlist ``` Add the following code to the **fetch-watchlist.service.ts** file. ``` import { Injectable } from '@angular/core'; import { Query } from 'apollo-angular'; import { GET_WATCHLIST } from '../GraphQL/query'; import { WatchlistType } from '../models/movie'; @Injectable({ providedIn: 'root', }) export class FetchWatchlistService extends Query { document = GET_WATCHLIST; } ``` This service performs a GraphQL query to fetch the watchlist for a logged-in user. ### Generate the toggle watchlist service Run the following command to generate a new service file. ``` ng g s services\toggle-watchlist ``` Add the following code to the **toggle-watchlist.service.ts** file. ``` import { Injectable } from '@angular/core'; import { Mutation } from 'apollo-angular'; import { TOGGLE_WATCHLIST } from '../GraphQL/mutation'; import { ToggleWatchlistType } from '../models/movie'; @Injectable({ providedIn: 'root', }) export class ToggleWatchlistService extends Mutation { document = TOGGLE_WATCHLIST; } ``` This service performs a GraphQL mutation to toggle the addition and removal of movies from the watchlist. ### Generate the clear watchlist service Run the following command to generate a new service file. ``` ng g s services\clear-watchlist ``` Add the following code to the **clear-watchlist.service.ts** file. ``` import { Injectable } from '@angular/core'; import { CLEAR_WATCHLIST } from '../GraphQL/mutation'; import { Mutation } from 'apollo-angular'; @Injectable({ providedIn: 'root', }) export class ClearWatchlistService extends Mutation { document = CLEAR_WATCHLIST; } ``` This service performs a GraphQL mutation to clear the watchlist, i.e., remove all the items from it. The next step is to update the **SubscriptionService** class in the ** src\app\services\subscription.service.ts** file by adding the following two properties. ``` export class SubscriptionService { // existing code. watchlistItemcount$ = new BehaviorSubject(0); watchlistItem$ = new BehaviorSubject([]); } ``` Run the following command to generate a new service file. ``` ng g s services\watchlist ``` Add the following code to the **watchlist.service.ts** file. ``` import { Injectable } from '@angular/core'; import { SubscriptionService } from './subscription.service'; import { FetchWatchlistService } from './fetch-watchlist.service'; import { ToggleWatchlistService } from './toggle-watchlist.service'; import { map } from 'rxjs'; import { Movie } from '../models/movie'; import { ClearWatchlistService } from './clear-watchlist.service'; @Injectable({ providedIn: 'root', }) export class WatchlistService { constructor( private readonly subscriptionService: SubscriptionService, private readonly fetchWatchlistService: FetchWatchlistService, private readonly toggleWatchlistService: ToggleWatchlistService, private readonly clearWatchlistService: ClearWatchlistService ) {} getWatchlistItems(userId: Number) { return this.fetchWatchlistService .watch( { userId: Number(userId), }, { fetchPolicy: 'network-only', } ) .valueChanges.pipe( map((result) => { if (result.data) { this.setWatchlist(result.data?.watchlist); } }) ); } toggleWatchlistItem(userId: number, movieId: number) { return this.toggleWatchlistService .mutate( { userId: Number(userId), movieId: Number(movieId), }, { fetchPolicy: 'network-only', } ) .pipe( map((result) => { if (result.data) { this.setWatchlist(result.data?.toggleWatchlist); } }) ); } clearWatchlist(userId: number) { return this.clearWatchlistService .mutate( { userId: Number(userId), }, { fetchPolicy: 'network-only', } ) .pipe( map((result) => { if (result.data) { this.setWatchlist([]); } }) ); } private setWatchlist(watchList: Movie[]) { this.subscriptionService.watchlistItemcount$.next(watchList.length); this.subscriptionService.watchlistItem$.next(watchlist); } } ``` The constructor of the **WatchlistService** class injects four services into the component: ** SubscriptionService**, ** FetchWatchlistService**, ** ToggleWatchlistService**, and ** ClearWatchlistService**. These services manage the user’s watchlist. The **getWatchlistItems** method fetches the watchlist items for a user by calling the ** watch** method on ** fetchWatchlistService** with the ** userId** and a fetch policy of ** network-only**. The watch method returns an ** Observable** that emits the result of the GraphQL query. The ** map** operator extracts the watchlist from the result and calls ** setWatchlist**. The **toggleWatchlistItem** method toggles the watchlist status of a movie for a user by calling the ** mutate** method on ** toggleWatchlistService** with the ** userId** and ** movieId** and a fetch policy of ** network-only**. The ** mutate** method returns an Observable that emits the result of the GraphQL mutation. The ** map** operator extracts the ** toggleWatchlist** from the result and calls ** setWatchlist**. The **clearWatchlist** method clears the watchlist for a user by calling the ** mutate** method on ** clearWatchlistService** with the ** userId** and a fetch policy of ** network-only**. The mutate method returns an Observable that emits the result of the GraphQL mutation. The ** map** operator is used to check if the data property of the result is ** true,** and if so, call ** setWatchlist** with an empty array. The private method **setWatchlist** updates the watchlist in the ** subscriptionService** by calling the ** next** method on two Observables: ** watchlistItemcount$** and ** watchlistItem$**. The ** next** method pushes the new values (the length of the watchlist and the watchlist itself, respectively) to any subscribers of these Observables. ## Create the AddToWatchlist component Run the following command to create the **AddToWatchlist** component. ``` ng g c components\add-to-watchlist ``` Add the following code to the **src\app\components\add-to-watchlist\add-to-watchlist.component.ts** file. ``` import { Component, Input, OnChanges } from '@angular/core'; import { EMPTY, ReplaySubject, switchMap, takeUntil } from 'rxjs'; import { Movie } from 'src/app/models/movie'; import { SubscriptionService } from 'src/app/services/subscription.service'; import { WatchlistService } from 'src/app/services/watchlist.service'; import { ToastUtility } from '@syncfusion/ej2-notifications'; @Component({ selector: 'app-add-to-watchlist', templateUrl: './add-to-watchlist.component.html', styleUrls: ['./add-to-watchlist.component.css'], }) export class AddToWatchlistComponent implements OnChanges { @Input({ required: true }) movieId = 0; toggle = false; buttonText = ''; iconClass = 'e-zoom-in-2'; private destroyed$ = new ReplaySubject(1); constructor( private readonly watchlistService: WatchlistService, private readonly subscriptionService: SubscriptionService ) {} ngOnChanges() { this.subscriptionService.watchlistItem$ .pipe(takeUntil(this.destroyed$)) .subscribe((movieData: Movie[]) => { this.setFavourite(movieData); this.setButtonText(); }); } toggleValue() { this.toggle = !this.toggle; this.setButtonText(); this.subscriptionService.userData$ .pipe( switchMap((user) => { const userId = user.userId; if (userId > 0) { return this.watchlistService.toggleWatchlistItem( userId, this.movieId ); } else { return EMPTY; } }), takeUntil(this.destroyed$) ) .subscribe({ next: () => { if (this.toggle) { ToastUtility.show({ content: 'Movie added to your Watchlist.', position: { X: 'Right', Y: 'Top' }, cssClass: 'e-toast-success', }); } else { ToastUtility.show({ content: 'Movie removed from your Watchlist.', position: { X: 'Right', Y: 'Top' }, }); } }, error: (error) => { console.error('Error occurred while setting the Watchlist : ', error); }, }); } private setFavourite(movieData: Movie[]) { const favouriteMovie = movieData.find((f) => f.movieId === this.movieId); if (favouriteMovie) { this.toggle = true; } else { this.toggle = false; } } private setButtonText() { if (this.toggle) { this.buttonText = 'Remove from Watchlist'; this.iconClass = 'e-zoom-out-2'; } else { this.buttonText = 'Add to Watchlist'; this.iconClass = 'e-zoom-in-2'; } } ngOnDestroy(): void { this.destroyed$.next(); this.destroyed$.complete(); } } ``` The **AddToWatchlistComponent** class implements the ** OnChanges** method to handle changes to input properties. The constructor injects ** WatchlistService** and ** SubscriptionService** into the component. These are used to manage the user’s watchlist. The **movieId** is an input property that represents the ID of the movie to add to the watchlist. It’s required and defaults to 0. The **ngOnChanges** lifecycle hook is called when an input property changes. It subscribes to ** subscriptionService.watchlistItem$**, and when it emits, it calls ** setFavourite** and ** setButtonText**. The **toggleValue** method toggles the movie’s watchlist status. It subscribes to **subscriptionService.userData$**, gets the ** userId**, and calls ** watchlistService.toggleWatchlistItem** with the ** userId** and ** movieId**. If the user ID is not greater than 0, it returns ** EMPTY**. A toast notification is shown when a movie is added or removed from the watchlist, and any errors are logged to the console. The private method **setFavourite** sets the toggle value based on whether the movie is on the watchlist. The private method ** setButtonText** sets the button text and icon class based on the toggle value. Add the following code to the **src\app\components\add-to-watchlist\add-to-watchlist.component.html** file. ``` ``` We have added a button that toggles a movie’s presence in a watchlist. The **ejs-button** attribute indicates that the button is a Syncfusion [Button](https://www.syncfusion.com/angular-components/angular-button) . The method **toggleValue** is invoked at the click of the button. This ** ngClass** directive is used to apply the CSS classes dynamically based on the condition. If the ** toggle** is true, the ** e-warning** class is applied; if the ** toggle** is false, the ** e-success** class is applied. ## Create the Watchlist component Run the following command to create the Watchlist component. ``` ng g c components\watchlist ``` Add the following code to the **src\app\components\watchlist\watchlist.component.ts** file. ``` import { Component, OnDestroy } from '@angular/core'; import { EMPTY, ReplaySubject, switchMap, takeUntil } from 'rxjs'; import { SubscriptionService } from 'src/app/services/subscription.service'; import { WatchlistService } from 'src/app/services/watchlist.service'; import { ToastUtility } from '@syncfusion/ej2-notifications'; @Component({ selector: 'app-watchlist', templateUrl: './watchlist.component.html', styleUrls: ['./watchlist.component.css'], }) export class WatchlistComponent implements OnDestroy { private destroyed$ = new ReplaySubject(1); watchlistItems$ = this.subscriptionService.watchlistItem$; constructor( private readonly watchlistService: WatchlistService, private readonly subscriptionService: SubscriptionService ) {} clearWatchlist() { this.subscriptionService.userData$ .pipe( switchMap((user) => { const userId = user.userId; if (userId > 0) { return this.watchlistService.clearWatchlist(userId); } else { return EMPTY; } }), takeUntil(this.destroyed$) ) .subscribe({ next: () => { ToastUtility.show({ content: 'Watchlist cleared!!!', position: { X: 'Right', Y: 'Top' }, }); }, error: (error) => { console.error( 'Error occurred while deleting the Watchlist : ', error ); }, }); } ngOnDestroy(): void { this.destroyed$.next(); this.destroyed$.complete(); } } ``` The constructor of the class **WatchlistComponent** injects two services into the component: ** WatchlistService** and ** SubscriptionService**. These services manage the user’s watchlist. The property **watchlistItems$** is an Observable that emits the watchlist items. It’s assigned the value of ** subscriptionService.watchlistItem$**. The **clearWatchlist** method is used to clear the watchlist for the current user by subscribing to ** subscriptionService.userData$**, getting the ** userId**, and calling ** watchlistService.clearWatchlist** with the ** userId**. If the user ID is not greater than 0, it returns ** EMPTY**, an Observable that emits no items and immediately completes. The ** takeUntil** operator automatically unsubscribes from the Observable when ** destroyed$** emits a value. A toast notification is shown when the watchlist is successfully cleared and any errors are logged in the console. Add the following code to the **src\app\components\watchlist\watchlist.component.html** file. ```

My Watchlist

{{ movieData.title }}

Your watchlist is empty.

 ``` The **ngIf** directive subscribes to the ** watchlistItems$** Observable and assigns the emitted value to the local variable ** watchlistItems**. The content inside the ** ng-container** is only rendered if ** watchlistItems$** emits a truthy value. A Syncfusion Button with the **e-danger** CSS class is added. When clicked, it calls the ** clearWatchlist** method from the component. The **dataSource** input of the Syncfusion DataGrid component is bound to ** watchlistItems**, which displays the items in the watchlist. The ** e-column** elements define the grid’s columns. Each column has a ** headerText** attribute that sets the column header, and some have a ** field** attribute that binds the column to a property of the data items. Some columns also have an ** ng-template** that customizes how the data is displayed. The **app-add-to-watchlist** component’s**movieId input** is bound to ** movieData.movieId**, so the component knows which movie to add to or remove from the watchlist. When the watchlist is empty, the **emptyWatchlist** template is rendered. It displays a message and a button that navigates to the home page. ## Create the similar-movies component Run the next command to create the **SimilarMovies** component. ``` ng g c components\similar-movies ``` Add the following code in the **src\app\components\similar-movies\similar-movies.component.ts** file. ``` import { Component } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { EMPTY, map, switchMap } from 'rxjs'; import { FetchSimilarMoviesService } from 'src/app/services/fetch-similar-movies.service'; @Component({ selector: 'app-similar-movies', templateUrl: './similar-movies.component.html', styleUrls: ['./similar-movies.component.css'], }) export class SimilarMoviesComponent { readonly similarMovies$ = this.activatedRoute.paramMap.pipe( switchMap((params: Params) => { const selectedMovieId = Number(params.get('movieId')); if (selectedMovieId > 0) { return this.fetchSimilarMoviesService .watch( { movieId: Number(selectedMovieId), }, { fetchPolicy: 'network-only', } ) .valueChanges.pipe(map((result) => result?.data?.similarMovies)); } else { return EMPTY; } }) ); constructor( private readonly activatedRoute: ActivatedRoute, private readonly fetchSimilarMoviesService: FetchSimilarMoviesService ) {} } ``` The **SimilarMoviesComponent** class contains an observable ** similarMovies$**, which emits similar movies for a selected movie. It uses the ** paramMap** Observable from ** ActivatedRoute** to get the ** movieId** parameter from the route. It then uses the ** switchMap**method to call ** FetchSimilarMoviesService.watch** with the ** movieId** and fetch the policy ** network-only**. The ** watch** method returns an Observable that emits the result of the GraphQL query. The ** map** operator is used to extract the ** similarMovies** from the result. If ** movieId** is not greater than 0, it returns ** EMPTY**, an Observable that emits no items and immediately completes. Add the following code to the **src\app\components\similar-movies\similar-movies.component.html** file. ```

Similar Movies

 ``` The **ngIf** directive subscribes to the ** similarMovies$** Observable and assigns the emitted value to a local variable ** movies**. The async pipe subscribes to an Observable and automatically updates the view whenever a new value is emitted. If ** similarMovies$** does not emit a value (i.e., null or undefined), the ** ng-container** and its contents will not be rendered. The **ngFor** directive loops over the ** movies** array. For each movie, it creates a new ** div** and assigns the movie to the local variable ** movie**. We will then display the movie cards using the <**app-movie-card>** component, binding the movie input property of ** app-movie-card** to the ** movie** variable. ## Create the PageNotFound component Run the following command to create the **PageNotFound** component. ``` ng g c components\page-not-found ``` Add the following code to the **src\app\components\page-not-found\page-not-found.component.html** file. ```

The resource you are looking for is not found.

``` This page will be rendered when the user tries to access a route that does not exist. We display a message and a button to redirect the user to the home page. ## Update the MovieDetails component Update the **MovieDetailsComponent** class in the ** src\app\components\movie-details\movie-details.component.ts** file. ``` import { Component } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; export class MovieDetailsComponent { // Existing code. userData$ = this.subscriptionService.userData$; constructor( // Existing service injection. private readonly subscriptionService: SubscriptionService ) {} } ``` Add the selectors for the **SimilarMoviesComponent** and ** AddToWatchlistComponent** inside the template of the ** MovieDetailsComponent**. Add the selector for **AddToWatchlistComponent** just after the movie cover image’s**
element**. ```
``` Insert the selector for the **SimilarMoviesComponent** just before closing the <** ng-container>** element. ``` ``` ## Configure app routing Open the **src\app\app-routing.module.ts** file and add the route for the newly added components under the ** appRoutes** array. ``` const appRoutes: Routes = [ // Existing routes. { path: 'watchlist', component: WatchlistComponent, canActivate: [authGuard], }, { path: '**', component: PageNotFoundComponent }, ]; ``` The route configuration maps the path **/watchlist** to the ** WatchlistComponent**. The ** canActivate** option means that the ** authGuard** needs to return ** true** for the route to be activated. At the end of the array, we have added the wildcard route that maps any path not matched by the previous routes to the **PageNotFoundComponent**. **Note:** The order in which we define the application’s routes is very important. The router uses a first-match wins strategy when matching routes. Therefore, more specific routes should be placed above less specific routes. The wildcard route should be placed at the end because it matches every URL. It should be selected only if no other routes match first. ## Update the nav-bar component Update the **NavBarComponent** class under the ** src\app\components\nav-bar\nav-bar.component.ts** file. ``` export class NavBarComponent implements OnInit, OnDestroy { // Existing code readonly watchlistItemcount$ = this.subscriptionService.watchlistItemcount$; constructor( // Existing service injection private readonly watchlistService: WatchlistService ) {} ngOnInit(): void { this.subscriptionService.userData$ .pipe( switchMap((user: User) => { this.authenticatedUser = user; if (this.authenticatedUser.userId > 0) { return this.watchlistService.getWatchlistItems( this.authenticatedUser.userId ); } else { return EMPTY; } }), takeUntil(this.destroyed$) ) .subscribe({ error: (error) => { console.error('Error occurred while setting the Watchlist : ', error); }, }); } // Existing methods } ``` In this update, we subscribe to the **userData$** Observable from the s**ubscription service**. The ** RxJS** operator ** switchMap** cancels the previous Observable and switches to a new one. In this case, it takes the emitted ** User** object, assigns it to ** this.authenticatedUser**, and then returns a new Observable based on the ** userId**. If ** userId** is greater than 0, it calls the ** getWatchlistItems** method from the ** WatchlistService** to get the watchlist items for the user. If ** userId** is not greater than 0, it returns ** EMPTY**, an Observable that emits no items and immediately completes. If an error occurs, it logs the error message to the console. The next step is to update the **src\app\components\nav-bar\nav-bar.component.html** file by adding a button to navigate to the watchlist page. Add the following HTML template just before the code for the ** Login** button. ``` ``` This button will render only when the user is authenticated. It will also display a badge to show the number of items on the watchlist. When the button is clicked, it navigates to the **/watchlist** route. ## Set authorization header for API requests Since we have added authorization checks on the GraphQL server, we need to send the authorization bearer token with each API request. The Bearer token is set to authenticate the client with the GraphQL server. When a client sends a request to a server, the server needs a way to verify the client’s identity. This is especially important for operations requiring certain permissions, such as fetching sensitive or modifying data. Update the **createApollo** function in the ** src\app\graphql.module.ts** file. ``` // Existing code. export function createApollo(httpLink: HttpLink): ApolloClientOptions { const auth = setContext(() => { const headerToken = localStorage.getItem('authToken'); if (headerToken === null) { return {}; } else { return { headers: { Authorization: `Bearer ${headerToken}`, }, }; } }); const link = ApolloLink.from([auth, httpLink.create({ uri })]); const cache = new InMemoryCache(); return { link, cache, connectToDevTools: true, }; } // Existing code. ``` This function takes an **HttpLink** object as a parameter and returns an ** ApolloClientOptions** object. ** HttpLink** is used to connect to the GraphQL server. The ** setContext** function creates middleware that can modify requests before they are sent. The bearer token is retrieved from local storage and added to the Authorization header of each request. An empty object is returned if the authentication token is null, meaning no headers are added to the request. If the token is not null, an object with an Authorization header is returned. An Apollo Link is created that first applies the ** auth** link (which adds the Authorization header) and then the ** httpLink** (which sends the request to the server). The term bearer in the bearer token specifies the type of authentication. A bearer token means the bearer of this token is authorized, i.e., whoever presents this token has the right to access the data. This is a common pattern in web development, especially when working with APIs that require authentication. ## Execution demo After executing the previous code examples, we will get output like in the following image. ## ![Build a Dynamic Watchlist for Your Web App with Angular & GraphQL](https://www.syncfusion.com/blogs/wp-content/uploads/2024/07/Build-Dynamic-Watchlist.gif)GitHub resource For more details, refer to the [complete source code](https://github.com/SyncfusionExamples/full-stack-web-app-using-angular-and-graphql) on GitHub. ## Summary Thank you for reading this article. In it, we learned how to implement the watchlist feature in our application, which allows the user to add or remove movies from the watchlist. We also added a feature to display similar movies when users visit the movie details page. In the next and final article of this series, we will learn how to deploy this application to the IIS and Azure App Service. If you are new to our platform, we extend an invitation to explore our Syncfusion [Angular components](https://www.syncfusion.com/angular-components) with the convenience of a [free trial](https://www.syncfusion.com/downloads/angular) . This trial allows you to experience the full potential of our components to enhance your app’s user interface and functionality. Our dedicated support system is readily available if you need guidance or have any questions. Contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/angular) . Your success is our priority, and we’re always delighted to assist you on your development journey! ## Related Blogs [A Full-Stack Web App Using Angular and GraphQL: Part 1](https://www.syncfusion.com/blogs/post/full-stack-web-app-angular-graphql) [A Full-Stack Web App Using Angular and GraphQL: Data Fetching and Manipulation (Part 2)](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-2) [A Full-Stack Web App Using Angular and GraphQL: Perform Edit, Delete, and Advanced Filtering (Part 3)](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-3) [A Full-Stack Web App Using Angular and GraphQL: Adding User Registration Functionality (Part 4)](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-4) [A Full-Stack Web App Using Angular and GraphQL: Adding Login and Authorization Functionalities (Part 5)](https://www.syncfusion.com/blogs/post/full-stack-app-angular-graphql-5) [Deploy Angular App with GraphQL on IIS & Azure (Part 7)](https://www.syncfusion.com/blogs/post/deploy-graphql-angular-on-iss-azure-7)