angular - ng boostrap + angular4: dynamical html modal content loading -
i have following architecture:
. ├── companies.component.ts ├── companies.html ├── companies.service.ts └── components └── modal ├── modal.component.html └── modal.component.ts my modal component looks this:
@component({ selector: 'service-modal', templateurl: './modal.component.html' }) export class modalcomponent implements oninit { public modalheader: string; public modalcontent: string; constructor(private activemodal: ngbactivemodal) { } public ngoninit() { } public closemodal() { this.activemodal.close(); } } and use companies.component.ts this:
const activemodal = this.modalservice.open(modalcomponent, { size: 'lg' }); activemodal.componentinstance.modalheader = 'create company'; activemodal.componentinstance.modalcontent = 'company form'; i use modal component create company or user entities. practice bind html form modalcontent? there other way so? should create 2 different modal components (one user, 1 company)?
first, might re-use modal in other places. should put component in 'shared' folder.
then have multiple solutions :
- with ng-content. create modal component or use bootstrap's.
<my-modal> <my-comp-to-create-companies> </my-comp-to-create-companies> </my-modal> <my-modal> <my-comp-to-edit-companies></my-comp-to-edit-companies> </my-modal>
you might able merge edit/create components, because form might have same properties.
- dynamic component loader : https://angular.io/guide/dynamic-component-loader
Comments
Post a Comment