Hello i want to pass single property (groupId) from parent component to child component, Here my child component is ngx-bootstrap modal, so is there any solution. Basically I want to create the group post, in which post object also contain the groupId, and the groupId is available in the parent component
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';
}
<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>
Here child component is basically the ngx-bootrap modal
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();
}
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 id = +this.route.snapshot.paramMap.get('id');
const initialState = {
title: 'Add new post',
groupId: id
};
this.bsModalRef = this.modalService.show(PostModalComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
}
title: string;
groupId: number;
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();
}
group.component.ts
openModalWithComponent() {
const id = +this.route.snapshot.paramMap.get('id');
const initialState = {
title: 'Add new post',
groupId: id
};
this.bsModalRef = this.modalService.show(PostModalComponent, {initialState});
this.bsModalRef.content.closeBtnName = 'Close';
this.bsModalRef.content.onClose = (myData) => {
// Do something with myData and then hide
this.bsModalRef.hide();
};
}
post-modal.component.ts
onClose: any;
submit() {
this.postService.createPost(this.post)
.subscribe(post => {
this.onClose({ value: post})
})
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.