Newbe Dev Stack

Answer : You would simply use jQuery like so... <script> jQuery(function(){ jQuery('#modal').click(); }); </script> Use the click function to auto-click the #modal button JavaScript Pure: <script type="text/javascript"> document.getElementById("modal").click(); </script> JQuery: <script type="text/javascript"> $(document).ready(function(){ $("#modal").trigger('click'); }); </script> or <script type="text/javascript"> $(document).ready(function(){ $("#modal").click(); }); </script> Use the following code $("#modal").trigger('click');

Answer : As of today the open method of https://ng-bootstrap.github.io/#/components/modal has the following signature: open(content: string | TemplateRef<any>, options: NgbModalOptions) . As you can see from this signature you can open a modal providing content as: string TemplateRef The string -typed argument is not very interesting - in fact it was mostly added to aid debugging / unit-testing. By using it you can pass just ... well, a piece of text , without any markup not Angular directives. As such it is really a debug tool and not something that is useful in real-life scenarios. The TemplateRef argument is more interesting as it allows you to pass markup + directives to be displayed. You can get a hand on a TemplateRef by doing <template #refVar>...content goes here...</template> somewhere in your component template (a template of a component from which you plan to open a modal). As such the TemplateRef argument is powerful as it allows you to ha...

Answer : You can just change data of the component instance, like this: this.dialogRef.componentInstance.data = {numbers: value}; Example here: https://stackblitz.com/edit/angular-dialog-update There are 2 ways I can think of at the moment, I don't really like either, but hey... Both ways involve sending an observable to the dialog through the data. You could pass on the observable of the part to the part component, and then pass the observable in the data to the dialog. The dialog could then subscribe to the observable and get the updates that way. AreaComponent @Component({ selector: 'app-area', template: '<app-part *ngFor="let part of planAsync$ | async; i as index" [partData]="part" [part$]="part$(index)"></app-part>' }) export class AreaComponent { plan = []; constructor(private wampService: WampService) { } part$(index) { return this.planAsync$ .map(plan => plan[index]); ...