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 :

  1. 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.

  1. dynamic component loader : https://angular.io/guide/dynamic-component-loader

Comments

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

angular - DownloadURL return null in below code -

php - Cannot override Laravel Spark authentication with own implementation -