Implement selectedDocument (communication between parent-child components
This commit is contained in:
@ -3,7 +3,9 @@
|
|||||||
<p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p>
|
<p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<app-signing-sidebar-item *ngFor="let doc of documents" [document]="doc"></app-signing-sidebar-item>
|
<app-signing-sidebar-item *ngFor="let doc of documents"
|
||||||
|
(click)="selectDocument(doc)"
|
||||||
|
[document]="doc"></app-signing-sidebar-item>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div class="mt-6 flex justify-between">
|
<div class="mt-6 flex justify-between">
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import {Component, Input} from '@angular/core';
|
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||||
import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen';
|
import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -10,4 +10,10 @@ import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen';
|
|||||||
})
|
})
|
||||||
export class SigningSidebarComponent {
|
export class SigningSidebarComponent {
|
||||||
@Input() documents!: GetSigningRequestResponseSigningRequestDocument[];
|
@Input() documents!: GetSigningRequestResponseSigningRequestDocument[];
|
||||||
|
|
||||||
|
@Output() documentSelected = new EventEmitter<GetSigningRequestResponseSigningRequestDocument>();
|
||||||
|
|
||||||
|
selectDocument(doc: GetSigningRequestResponseSigningRequestDocument): void {
|
||||||
|
this.documentSelected.emit(doc);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<div class="flex h-screen bg-gray-100">
|
<div class="flex h-screen bg-gray-100">
|
||||||
<div class="w-1/4">
|
<div class="w-1/4">
|
||||||
<app-signing-sidebar [documents]="documents"></app-signing-sidebar>
|
<app-signing-sidebar [documents]="documents" (documentSelected)="setActiveDocument($event)"></app-signing-sidebar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-3/4 p-6">
|
<div class="w-3/4 p-6">
|
||||||
|
@ -14,6 +14,9 @@ import {
|
|||||||
})
|
})
|
||||||
export class SigningComponent implements OnInit {
|
export class SigningComponent implements OnInit {
|
||||||
documents: GetSigningRequestResponseSigningRequestDocument[] = [];
|
documents: GetSigningRequestResponseSigningRequestDocument[] = [];
|
||||||
|
selectedDocument: GetSigningRequestResponseSigningRequestDocument = {
|
||||||
|
confirmed: false, id: '', name: ''
|
||||||
|
}
|
||||||
|
|
||||||
constructor(private route: ActivatedRoute, private signingRequestService: SigningRequestService) {
|
constructor(private route: ActivatedRoute, private signingRequestService: SigningRequestService) {
|
||||||
}
|
}
|
||||||
@ -30,4 +33,9 @@ export class SigningComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setActiveDocument(document: GetSigningRequestResponseSigningRequestDocument): void {
|
||||||
|
this.selectedDocument = document;
|
||||||
|
console.log(this.selectedDocument);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user