I am trying to call modal from my cardetails page
normla modals didnt fit for me and i used angular ngb bootstrap modal
Modal opens when i click open button
BUT
it gives error no the console.
error at console: picture
Actually there are two modals at different pages and they have different component ts code but they give same error.
IT is not related with html code .
this is cardetails.html where is modal .open button is located(at the bottom)
<div class="card" style="width:100%;margin-top: 20px;">
<div class="row"style="max-height: 80%;">
</div>
<carousel style="height:95%; width: 100%;" >
<slide *ngFor="let imagePath of carImagePaths; let index=index" >
<img [src]="imageUrl+imagePath" alt="image slide"class="image-fluid" style=" height:400px;width: 100%; object-fit: cover">
<div class="carousel-caption">
<h4>Görsel: {{index+1}} </h4>
<p></p>
</div>
</slide>
</carousel>
<!-- car detail sayfası araç detay bilgileiri -->
<div *ngFor="let car of cars" class="card-body">
<div class="card-body detailsFontInfo">
<h5 class="card-title">
{{ car?.brandName }} || {{ car?.modelName }}
</h5>
</div>
<ul class="list-group list-group-flush detailsFontInfo">
<li class="list-group-item"><b>Renk :</b> {{ car?.colorName }}</li>
<li class="list-group-item detailsFontInfo"> <b>Model Yılı :</b> {{ car?.modelYear }}</li>
<li class="list-group-item detailsFontInfo"> <b>Günlük Fiyat :</b> {{ car?.dailyPrice | currency: "USD":true:"1.2-2" }}</li>
<li class="list-group-item detailsFontInfo"><b>Açıklama:</b> {{ car?.description }}</li>
<li class="list-group-item detailsFontInfo"><b>Kira Durumu :</b> {{ car?.isRentable ? "Uygun Değil" : "Müsait" }}</li>
<!-- <b>Status : </b> {{ carDetail?.isRentable ? "Available" : "Not Available" }} -->
</ul>
</div>
<!-- alt butonlar -->
<div style="margin-bottom: 4%;">
<div class="row">
<div class="btn-goback col-md-2 offset-md-8">
<button style="width: 100%;" routerLink="/cars" type="button" class="btn btn-outline-dark">
Geri Dön
</button>
</div>
<!-- giriş yapılmamışsa giriş yap -->
<div class="col-md-2"*ngIf="!isAuthenticated()">
<!-- burada modal çıksın ve desin ki kiralayabilmek için kayıt olun veya giriş yapın -->
<button (click)="openLoginModal()" style="width: 100%;" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#carDetailIsAuthModal">
Kirala
</button>
</div>
<!-- giriş yapılmamışsa rentala git -->
<div class="col-md-2" *ngIf="isAuthenticated()">
<!-- eğer giriş yapılı ise kirala butonuna bassın RENT MODAL GELSİN -->
<button (click)="openRentalModal()" style="width: 100%;" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#carDetailsRentalModal">
Kirala
</button>
</div>
</div>
</div>
this is cardetails.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CarDetails } from 'src/app/models/carDetails';
import { CarImage } from 'src/app/models/carImage';
import { CarImageService } from 'src/app/services/car-image.service';
import { CarService } from 'src/app/services/car.service';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NonNullAssert } from '@angular/compiler';
import { LoginComponent } from '../login/login.component';
import { RentalComponent } from '../rental/rental.component';
import { RentalService } from 'src/app/services/rental.service';
@Component({
selector: 'app-cardetail',
templateUrl: './cardetail.component.html',
styleUrls: ['./cardetail.component.css']
})
export class CardetailComponent implements OnInit {
//carDetail:CarDetails[]= [];
cars: CarDetails[] = [];
carImagePaths:string[] = [];
carDetail: CarDetails;
dataLoaded = false;
imageUrl:string="https://localhost:44396/Uploads/images/"
//--for rental
carImages:CarImage[]=[];//slider için
constructor(private carImageService: CarImageService,
private carService: CarService,
private activatedRoute: ActivatedRoute,
public modalService:NgbModal,
private rentalService:RentalService,
) { }
ngOnInit(): void {
this.activatedRoute.params.subscribe(params => {//car id verilirse ki arabaya tiklayinca verilmis olur: icerdeki emthodlari calistir
if(params['carId']){
this.getCarsDetailsByCarId(params['carId'])
// this.getImagesByCarId(params['carId'])
}
})
}
getCarsDetailsByCarId(carId: number){//details sayfamızdaki araç detaylarını çekiyor
this.carService.getCarsDetailsByCarId(carId).subscribe((response)=>{
this.cars=response.data
this.carDetail = response.data[0];//sıfırıncı eement bilgilerin olduğu kısım,sonra mesaj felan geliyor
this.carImagePaths=this.carDetail.imagePath
this.dataLoaded = true;
})
}
// geçici olarak login li isAuthenticated:true/false mutlaka sil bunu sonra
isAuthenticated(){
return false
}
openLoginModal() {//LOGİN MODAL ı açar (cardetailhtmldeki buton)
let modalRef=this.modalService.open(LoginComponent)
}
openRentalModal(){
let modalRef= this.modalService.open(RentalComponent)
//buraya tıkalyınca hem rentala gitmeli
}
}
MODALS HTML İS EMTY OR FULL DOESNT MATTER SAME ERROR
MODALS TS
import { Component, OnInit } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(public modal:NgbActiveModal) { }
ngOnInit(): void {
}
}
Any ideas might help
