Movie app using angular

Total Blog Views: 49

Blog Status: publish

Created By: asad_fazlani Created at: 08-22-2021

Tags: web development angular web app

In this blog i am going to develop movie app using angular.

create angular app , then generate service .

Api link given below,

url = 'https://api.themoviedb.org/3/search/movie?api_key=cdaa68790f7a7ae489aec9ad67eab53c&query=';

in your service.ts past this code,

@Injectable({
	providedIn: 'root'
	})
	export class RestService {

	constructor(private http: HttpClient) { }

	url = 'https://api.themoviedb.org/3/search/movie?api_key=cdaa68790f7a7ae489aec9ad67eab53c&query=';
	data :string = 'avengers'
	query :any




	changedata(data) {
	this.data = JSON.stringify(data.mname);
	// this.data = "Avengers"

	}

	GetData() {
	// console.log('url' + this.url + this.data);
	return this.http.get(this.url + this.data)

	}
	}

now create one home component,

past below code in home.component.ts

constructor(private http: RestService ,private route :Router) { }

	loginForm = new FormGroup({
	mname: new FormControl('')
	});


	ngOnInit() {

	}


	submit() {


	this.http.changedata(this.loginForm.value);


	}

we required on search bar for searching movie ,

when we enter movie movie name in input feild then the data transfer to .ts file and then we call api function.

paset below code in home.html for search.

<form [formGroup] = "loginForm" >
<div id="input" class="md-form active-pink active-pink-2 mb-3 mt-0" >
<input class="form-control " type="text" placeholder="Enter Movie Name" formControlName="mname">
</div>
<button class="btn btn-outline-success active-pink active-pink-2 mb-3 mt-0 ml-3" routerLink="/result" (click) = "submit()">Submit</button>
</form>

add some css,

form{

margin: 0; padding: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: black;

}

#input{

width: 40%; padding :20px

} .

btn{ width: 10%; }

and finally we required one result page generate one result component,

and paste below code in .ts file

constructor(private http: RestService) { }
data: any = []
results :any=[]
ngOnInit(): void
{ this.http.GetData().subscribe(
query => { this.data = query
// console.log(this.data.results);
this.submit();
});
}

submit(){ this.results = this.data.results console.log(this.results); }

Now add design code ,

<h1 style="margin-left: 35%;">Search Results </h1>
<div class="card promoting-card" *ngFor = "let item of results" style="width :40% ;margin-left: 25%;margin-top: 2%;">


<div class="card-body d-flex flex-row">





<div>


<h4 class="card-title font-weight-bold mb-2">{{item.original_title}}</h4>

<h5 class="mb-1"> vote_average : {{item.vote_average}}</h5>
</div>
</div>

<div class="view overlay">
<img class="card-img-top rounded-0"style="width :40%; height:50%; margin-left :20%" src="https://image.tmdb.org/t/p/w600_and_h900_bestv2{{item.poster_path}}" alt="Card image cap">
<div class="card-body d-flex flex-row">
<h6 class="mb-1" style="margin-top: 10px;">release date : {{item.release_date}}</h6>


</div>
<p class="card-body">Description : {{item.overview}}</p>

</div>
</div>