I'm working on a service called cart-movie.service.ts which has a method called addMovies for adding movies to the selected-movie class. However, I'm having trouble figuring out how to implement this.
app.component.html
<div class="col-2" *ngFor="let movie of moviesList" (click)="addMovies(movie)">
<div class="movie">
{{ movie.attributes.title }}
<img [src]="movie.thumbnails.small">
<p><strong>Duration:</strong> {{ movie.attributes.duration | formatime}}mn</p>
<div class="details">
<p><strong>Director:</strong><br> {{ movie.attributes.director }}</p>
<p><strong>the actors:</strong><br>{{ movie.attributes.actors }}</p>
<p><strong>the release year:</strong><br>{{ movie.attributes.year }}</p>
</div>
</div>
</div>
</div>
<div class="row">
<h1 class="col-12">
Movies Selected
</h1>
<div class="col-12 selected-movie">
</div>
</div>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { MoviesService, Movie } from './shared/services/movies.services';
import { CartMoviesService } from './shared/services/cart-movies.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'app-entretien';
moviesList: Movie[];
moviesSelected: Movie[];
currentPage: number = 0;
constructor(private moviesService: MoviesService, private cartMoviesService: CartMoviesService) {
}
ngOnInit() {
this.moviesService.getList(1, 20).subscribe(data => {
this.moviesList = data.content;
});
this.cartMoviesService.addMovies(this.movie);
}
I have attempted to call the service in the code above but am unsure about what argument to pass it.
cart-movies.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CartMoviesService {
public cart = [];
movie: any;
constructor() { }
addMovies(movie) {
this.cart.push(movie);
alert(movie + 'was added to cart');
}
}