Hey there, I'm looking for a way to pass a single property (groupId) from a parent component to a child component. In this case, my child component is using ngx-bootstrap modal. Is there a solution available for this scenario? Essentially, I need to include the groupId in the group post object, and this groupId is currently accessible in the parent component.
Parent Component
group.component.ts
bsModalRef: BsModalRef;
group: any = {};
constructor(
private router: Router,
private route: ActivatedRoute,
private alertify: AlertifyService,
private groupService: GroupService,
private modalService: BsModalService
) { }
ngOnInit() {
const id = +this.route.snapshot.paramMap.get('id');
if (id) {
this.groupService.getGroup(id)
.subscribe(group => this.group = group);
}
}
openModalWithComponent() {
const initialState = {
title: 'Add new post'
};
this.bsModalRef = this.modalService.show(PostModalComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
group.component.html
<div class="container">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary btn-block">
<button class="btn btn-primary fa fa-plus" (click)="openModalWithComponent()">Add
Post</button>
</a>
</div>
<div class="col-md-3">
<a class="btn btn-success btn-block" data-toggle="modal" data-target="#addCategoryModal">
<i class="fa fa-plus"></i> Add Category
</a>
</div>
<div class="col-md-3">
<a class="btn btn-warning btn-block" data-toggle="modal" data-target="#addUserModal">
<i class="fa fa-plus"></i> Add User
</a>
</div>
</div>
</div>
Child Component
In this case, the child component utilizes the ngx-bootstrap modal.
post-modal.component.ts
title: string;
closeBtnName: string;
post: any = {};
postCaterogies;
constructor(
public bsModalRef: BsModalRef,
private postService: PostService
) { }
ngOnInit() {
this.postService.getPostCategories()
.subscribe(pCategories => this.postCaterogies = pCategories);
}
submit() {
this.postService.createPost(this.post)
.subscribe(post => {
console.log(post);
})
this.bsModalRef.hide();
}