I am working on a CreateProjectComponent, which is a child component. My goal is to close a div in the parent component when the closeModal function is triggered.
Here is the template (html) code:
<div (click)="closeModal(true)"></div>
And here is the component.ts code for CreateProjectComponent:
@Component({
moduleId: module.id,
selector: "th-create-project",
templateUrl: "create-project.component.html",
styleUrls: ["create-project.scss"],
directives: [
ThAutocomplete,
MD_CARD_DIRECTIVES,
MD_BUTTON_DIRECTIVES,
],
})
export class CreateProjectComponent {
@Output() onVoted = new EventEmitter<boolean>();
public closeModal(agreed: boolean) {
console.log("vote() on CHILD")
this.onVoted.emit(true);
}
}
Now let's look at the parent component:
In the parent component's template, I have the following code:
<div *ngIf="(isNewProjectVisible === true)" (onVoted)="receivedEvent()">
And in the parent component's TypeScript file, I have the following code:
@Component({
selector: "projects-component",
templateUrl: `client/+projects/projects.component.html`,
styleUrls: ["client/+projects/projects.scss"],
directives: [ProjectListComponent, SelectListComponent, CreateProjectComponent],
providers: [ProjectService, StateService, CreateProjectService],
})
export class ProjectsComponent extends MeteorComponent implements OnInit {
public receivedEvent() {
this.isNewProjectVisible = false;
console.log("receivedEvent() on PARENT")
}