html
<div class="backgr">
<div class="search" >
<input style="height: 40px; width: 320px; border-radius: 5px;" type="search" placeholder="Enter Your Mobile Number to get ticket details" #details>
<button mat-button style="background-color: #FB8122;color: white;margin-left: 10px;" (click)="getdetails(details.value)">Get Details</button>
</div>
<div class="container" *ngFor="let data of TicketData">
<div class="booking">Fight ID:<span> {{data.flightID}}</span></div>
<div class="booking">Flight Name:<span>{{data.flightName}}</span></div>
<div class="booking">Source: <span>{{data.arrival}}</span></div>
<div class="booking">Destination:<span>{{data.departure}}</span></div>
<div class="booking">Departure Time:<span>{{data.arrivalTime}}</span></div>
<div class="booking">Arrival Time:<span>{{data.departureTime}}</span></div>
<div class="booking">Duration:<span>{{data.durationTime}}</span></div>
<div class="booking">Fare:<span>{{data.price}}</span></div>
<div class="booking">No of Passengers:<span>{{data.noofpassengers}}</span></div>
<div class="booking">1st Passenger <br>Full Name:<span> {{data.title}} {{data.fname}} {{data.lname}}</span></div>
<div class="booking">Email:<span>{{data.email}}</span></div>
<div class="booking">Mobile Number:<span>{{data.phno}}</span></div>
<div class="booking">2nd Passenger <br><span>{{data.title1}} {{data.fname1}} {{data.lname1}}</span></div>
<div class="booking">3rd Passenger <br><span>{{data.title2}} {{data.fname2}} {{data.lname2}}</span></div>
<div class="booking"></div>
<div class="booking"></div>
<div class="booking">Total Fare=<span>{{data.fareprice}}</span> <br>Coupon = <span> -{{data.discountedamount.slice(4,7)}}</span> <br>Total Amount=<span>{{data.totalprice}}</span></div>
<br>
<div class="booking" style="text-align: center;">THANK YOU FOR BOOKING, VISIT AGAIN!</div>
<div class="booking">
<button mat-button routerLink="/home" style="color: white; background-color: #FB8122;">Back to Home</button>
</div>
</div></div>
ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { FooterService } from '../footer.service';
import { NavbarService } from '../navbar.service';
import { Ticketdata } from '../ticketdata';
import { TicketdataService } from '../ticketdata.service';
@Component({
selector: 'app-bookingdetails',
templateUrl: './bookingdetails.component.html',
styleUrls: ['./bookingdetails.component.css']
})
export class BookingdetailsComponent implements OnInit {
public TicketData: any[] = [];
// public response: Observable<Ticketdata[]>;
constructor(private router : ActivatedRoute, private apii : TicketdataService,public nav: NavbarService,public footer:FooterService) {
// this.response = this.apii.getticketdataapi();
// this.apii.getticketdataapi().subscribe(data => {
// console.log(data)
// })
this.footer.show();
this.nav.show();
}
ngOnInit(): void {
// console.warn(this.router.snapshot.params['_id']);
// this.apii.getticketData(this.router.snapshot.params['_id']).subscribe((result: any)=>{
// console.warn(result)
// })
}
getdetails(val:any){
this.apii.getticketdataapi().subscribe((data: any) => {
console.log(data);
this.TicketData = []
for (let i = 0; i < data.length; i++)
// {
// console.warn(source==data[i].arrival || destination==data[i].destination)
// }
{
if (val == data[i].phno) {
this.apii.getticketData(data[i]._id).subscribe((result: any) => {
console.warn(result);
this.TicketData.push(result);
// this.response = (result);
})
}
}
}
)}}