Two components were developed, one to display a list of all loans and the other to view detailed information about each loan upon clicking on a card in the list. Despite being able to see the data console logged within the subscribe function, no data is appearing on the HTML page.
loan.ts
export class Loan
{
id: number;
title: string;
description: string;
amount: number;
}
list-loan-component.ts
import { Component, OnInit } from '@angular/core';
import * as EventEmitter from 'events';
import { Loan } from '../loan';
import { LoanService } from '../loan.service';
@Component({
selector: 'app-list-loans',
templateUrl: './list-loans.component.html',
styleUrls: ['./list-loans.component.css']
})
export class ListLoansComponent implements OnInit {
loans:Loan[];
constructor(private loanService: LoanService) { }
ngOnInit(): void {
this.loans = this.loanService.getLoans();
}
openLoan(loan: Loan)
{
this.loanService.loan.emit(loan);
}
}
list-loan-component.html
<div class="container">
<div class="card-deck">
<div *ngFor="let loan of loans">
<div class="card" routerLink="/loan/view" routerLinkActive="active"
(click)="openLoan(loan)">
<div class="card-header"> {{loan.title}} - {{loan.amount}}</div>
<div class="card-body">
<p class="card-text">{{loan.description}}</p>
</div>
</div>
</div>
</div>
</div>
view-loan.component.ts
import { ChangeDetectorRef, Component, Input, OnChanges, OnInit } from '@angular/core';
import { ActivatedRoute, ActivatedRouteSnapshot, Params } from '@angular/router';
import { Loan } from '../loan';
import { LoanService } from '../loan.service';
@Component({
selector: 'app-view-loan',
templateUrl: './view-loan.component.html',
styleUrls: ['./view-loan.component.css']
})
export class ViewLoanComponent implements OnInit {
selectedLoan: Loan ;
constructor(private loanService: LoanService, private router:ActivatedRoute) { }
ngOnInit() {
this.loanService.loan.subscribe(loan =>
{
this.selectedLoan = loan;
}
);
}
}
view-loan.component.html
<div class="card text-center">
<div class="card-header">
{{selectedLoan['title']}}
</div>
<div class="card-body">
<h5 class="card-title">Loan From : {{selectedLoan['title']}}</h5>
<h3 style="text-align: left; text-decoration: underline;">Details:</h3>
<p class="card-text">{{selectedLoan['description']}}</p>
<p class="card-text">{{selectedLoan['amount']}}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
loan.service.ts
import { Injectable, Output, EventEmitter } from "@angular/core";
import { Loan } from "./loan";
@Injectable({
providedIn: 'root'
})
export class LoanService
{
loan = new EventEmitter<Loan>();
private loans:Loan[] = [
{
"id":1,
"title" : "HDFC Credit Loan",
"description" :"Loan to clear all credit card payments",
"amount" : 24958.23
},
{
"id":2,
"title" : "Aditya birla personal Loan",
"description" :"Loan to personal expenses",
"amount" : 12000.00
}
]
constructor(){}
getLoans(): Loan[]{
return this.loans.slice()
}
getLoan(id:number): Loan{
this.loans.forEach(loan =>
{
if(loan["id"] === id)
return loan;
}
);
return new Loan();
}
}
Note: Usage of routing has been implemented as well. If there are any concerns regarding routing causing these issues, please address them accordingly.