Develop Reference

How to open modal for multiple components from same parent component

I am using angular 9.
I have a home page which has four buttons. I want to open separate modal on each button's click at a time.
I did research a lot, here is my trial and effort.
Thanks in advance :)
parent component
#Component({
selector: 'app-link-budget-view',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
#ViewChild('childOne') callChild_OneFn: ChildOneComponent;
#ViewChild('childTwo') callChild_TwoFn: ChildTwoComponent;
...
ngOnInit(): void {
}
openModalOne() {
this.callChild_OneFn.OpenModalFunction();
}
openModalOne() {
this.callChild_TwoFn.OpenModalFunction();
...
}
}
Home Html
<button class="btn btn-primary mb-2 mr-2" (click)="openModalOne()">Modal 1</button>
<button class="btn btn-primary mb-2 mr-2" (click)="openModalTwo()">Modal 2</button>
...
<app-child-one #childOne></app-child-one>
<app-child-two #childTwo></app-child-two>
...
childOne Component
#Component({
selector: 'app-link-budget-view',
templateUrl: './child-one.component.html',
styleUrls: ['./chile-one.component.scss']
})
export class ChildOneComponent implements OnInit {
constructor( private modalService: NgbModal) { }
ngOnInit(): void {
}
OpenModalFunction() {
console.log("component One function running...")
this.modalService.open('#ModalOneId', { size: 'xl' });
}
...
}
similarly there is a function in component two
OpenModalFunction() {
console.log("component Two function running...")
this.modalService.open('#ModalTwoId', { size: 'xl' });
}
Component One Html
<ng-template #ModalOneId let-modal>
<div class="modal-header">
<h4 class="modal-title">This is modal one</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card">
<div class=" card-body">
<div id="table" class="table-editable">
...
...
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>
similarly ng-templete is used in component two html

you didn't mention if what you wrote is working or not, or what errors you are getting. it looks like it should work to me. Although if you just want to open a modal, you can handle it completely in your html:
<button (click)="childOne.OpenModalFunction()">Modal 1</button>
<button (click)="childTwo.OpenModalFunction()">Modal 2</button>
<app-child-one #childOne></app-child-one>
<app-child-two #childTwo></app-child-two>
that should be the only thing you need in the parent. no code needed in the parent .ts file. if this is not working, there's something wrong with the code in your child class.

Finally I fixed it here is the code to help others
Parent ts
export class ParentComponent implements OnInit {
constructor(private modalService: CustomModalServiceService) { }
ngOnInit(): void {
}
openModal(modalName: string) {
this.modalService.openModalFunction(modalName);
}
}
Parent html
<button class="btn btn-primary mb-2 mr-2" (click)="openModal('childOne')">Modal_1</button>
<button class="btn btn-primary mb-2 mr-2" (click)="openModal('childTwo')">Modal_2</button>
child one or two ts code accordingly for one or two
export class ChildOneComponent implements OnInit {
constructor(private modalRef: NgbActiveModal) { }
ngOnInit(): void {
}
hideModalFunction() {
this.modalRef.close();
}
}
child one or two html for modal
<div class="modal-header">
<h4 class="modal-title">This is modal one</h4>
<button type="button" class="close" aria-label="Close" (click)="hideModalFunction()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card">
<div class=" card-body">
<div id="table" class="table-editable">
...
...
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" (click)="hideModalFunction()">Close</button>
</div>
and you need a custom modal service
Custom modal service
export class CustomModalService {
...
private modalRef: NgbModalRef;
constructor( private modalService: NgbModal) { }
ngOnInit(): void {
}
openModalFunction(modalName: string) {
switch(modalName) {
case 'one':
console.log("component One function running...");
// do any execution before opening child component
this.modalRef = this.modalService.open(ChildOneComponent, { size: 'xl' });
this.modalRef.componentInstance.testData = 'test';
break;
case 'two':
console.log("component Two function running...");
// do any execution before opening child component
this.modalRef = this.modalService.open(ChildTwoComponent, { size: 'xl' });
break;
case default:
// do nothing
}
}
}

You are repeating too much code here. You could make it more re-usable and less repetitive. Try to extract most of the business logic to a service. Leave the component as dumb(no business logic) as possible for better re-usability.
Parent component
#Component({
selector: 'app-link-budget-view',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
...
constructor(private myModalService: MyModalService)
ngOnInit(): void {
}
openModal(modelName: string) {
this.myModalService.openModalFunction(modalName);
}
}
Home Html
<button class="btn btn-primary mb-2 mr-2" (click)="openModal('one')">Modal 1</button>
<button class="btn btn-primary mb-2 mr-2" (click)="openModal('two')">Modal 2</button>
...
MyModal Service
#Injectable({
providedIn: 'root'
})
export class MyModalService {
...
private modalRef: NgbModalRef;
constructor( private modalService: NgbModal) { }
ngOnInit(): void {
}
openModalFunction(modalName: string) {
switch(modalName) {
case 'one':
console.log("component One function running...");
// do any execution before opening child component
this.modalRef = this.modalService.open(ChildOneComponent, { size: 'xl' });
this.modalRef.componentInstance.testData = 'test';
break;
case 'two':
console.log("component Two function running...");
// do any execution before opening child component
this.modalRef = this.modalService.open(ChildTwoComponent, { size: 'xl' });
case default:
// do nothing
}
}
hideModalFunction() {
//do something before closing the modal
this.modalRef.close();
}
}
Now no OpenModalFunction() required inside the child components as you have extracted the modal opening logic into the MyModalService. This will also adhere to the Single Functionality principle means every component has only single functionality to be fulfilled. Furthermore, you have now full control via MyModalService to handle popups. If you want to execute a common code before/after opening/closing the windows like notifying another service, you could do that.
Now this could be further optimized as all software codes do. Like extracting common code from Child Components to a single interface/abstract class. But it totally depends upon your requirements.

Show Bootstrap modal using (#myModal).modal('show') from Angular component

I have an Angular 8 project that is using bootstrap. I am trying to show the modal dialog inside my component using the $('myModal').modal('show') inside my component's Typescript file.
Here's my component's file:
import {Component, OnInit} from '#angular/core';
import {Router} from '#angular/router';
// import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
#Component({
selector: 'app-xyz',
templateUrl: './xyz.component.html',
styleUrls: ['./xyz.css']
})
export class XyzComponent implements OnInit {
constructor(private router: Router) {
}
ngOnInit() {
}
submit() {
$('#confirm').modal('show');
}
}
Upon invoking the submit() funciton on click I get the following error: ERROR TypeError: $(...).modal is not a function
I installed bootstrap and jquery using npm install bootstrap --save and npm install jquery --save.
I even installed ngx-bootstrap.
However, when I uncomment the line importing jQuery I get a different error: ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_3__(...).modal is not a function

Check your angular.json file to make sure that the Jquery js file is included in your scripts array.
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
]
Then in your component TS file declare var $ instead of trying to import it:
declare var $: any;
That should allow you to trigger the modal via
$('#confirm').modal();
Also make sure that the HTML is correct. Example Modal:
<div class="modal fade" id="confirm" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="noDataModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:lightgrey">
<h5 class="modal-title" id="noDataModalLongTitle">No Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<i class="fas fa-check fa-4x mb-3 animated rotateIn"></i>
No Data Found. Please expand your search criteria and try again.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
Hope this helps!

Angular 6 Passing data from parent to child Bootstrap Modal

being a newbie to the angular 6 I am having a issue in passing data from one component to another component.
Actually i am opening child component bootstrap modal from parent modal and want to pass string parameter to child modal component and also want to call function as soon as modal opens and functions returns a array which is shown in table only.
Parent Component HTML
<div class="parent-comp">
<div id="ext-modal" class="modal fade" role="dialog">
<!-- Modal content Starts-->
<app-f-ext [Id]="Id"></app-f-ext>
<!-- Modal content Ends-->
</div>
</div>
Child component TS
import { Component, Input } from '#angular/core';
#Component({
selector: 'app-premium-extension',
templateUrl: './premium-extension.component.html',
styleUrls: ['./premium-extension.component.css']
})
export class ExtensionComponent implements OnInit {
#Input() Id: string;
constructor() {
}
ngOnInit() {
}
callThisFunctionOnOpeningModal(){
console.log(Id)
}
}
Child component HTML
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Ext {{Id}}</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
Parent Component TS
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'ap-detail',
templateUrl: './p-details.component.html',
styleUrls: ['./p-details.component.css']
})
export class PDetailsComponent implements OnInit {
Id: string;
constructor(){
this.Id = "test";
}
}
When i open the modal it shows in the modal header but how to on call function on modal loads and passing the Id in that function.
Please don't down mark the question as i am in really big issue with this. Thanks in advance for the help.

You have to use the right selector to call your child component. So replace:
<!-- Modal content Starts-->
<app-f-ext [Id]="Id"></app-f-ext>
<!-- Modal content Ends-->
By:
<!-- Modal content Starts-->
<app-premium-extension [Id]="Id"></app-premium-extension>
<!-- Modal content Ends-->
And make sure to declare and initialize the Id var in your parent.component.ts file
You can then have access to the Id property in the ngOnInit function:
ngOnInit() {
console.log(Id);
}

Angular 6 modal, increasing the width of the modal when used as a separate component

Similar questions have been asked before but I can't seem to apply their solution to this specific use case.
I'm trying to increase the width of my modal window, the most common solutions are to encase the content in a <div class="modal-dialog"></div> However, when I try this solution the modal becomes completely unresponsive, the formatting gets strange and the buttons stop working.
I used this ng-bootstrap guide for making the component and my desired end-result is a 90% width modal window in which I can place other components based on situation.
Here is the containing component code:
<p>You can pass an existing component as content of the modal window. In this case remember to add content component
as an <code>entryComponents</code> section of your <code>NgModule</code>.</p>
<button class="btn btn-lg btn-outline-primary" (click)="openModal()">Launch demo modal</button>
Here is the containing component.ts:
import { Component, OnInit } from '#angular/core';
import {NgbModal, NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
import {ModalInvoicePopupComponent} from '../modal-invoice-popup/modal-invoice-popup.component';
#Component({
selector: 'app-about-us',
templateUrl: './about-us.component.html',
styleUrls: ['./about-us.component.css']
})
export class AboutUsComponent implements OnInit {
constructor(private modalService: NgbModal) {}
openModal() {
const modalRef = this.modalService.open(ModalInvoicePopupComponent);
}
ngOnInit() {
}
}
Here is the modal-component html:
<div class="modal-header">
<h4 class="modal-title">myModal title</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>myModal body</p>
<p>Size differences when a large string is inserted, test of scaling</p>
<p>Importing an existing app into the modal, what happens then?</p>
<app-invoices></app-invoices>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
If I try to encase the modal-component inside a modal-dialog div it just breaks, and starts looking like this:
And becomes completely unresponsive.
Is there a good way to increase the size of a modal popup when used as a component in Angular?

Change your function like below :
openModal() {
const modalRef = this.modalService.open(ModalInvoicePopupComponent, {
width: '78vw'
});
}
It will give the width of modal 78vw and you can change it according to your mobile devices.

You have used NgbModal, in that case for defining the size of modal you can go for NgbModalOptions.
There you can define the size of the modal while opening it, say
this.modalService.open(content,{
size: 'xl'
});
refer https://ng-bootstrap.github.io/#/components/modal/api for detailed information.

Inputting data into a modal from a parent component Angular 5

I am trying to create a cancel function that cancels a specific viewing based on its id. I have a viewings model that I retrieve from firebase as an observable, I then input it into a child div. The problem being that when I click cancel, it always cancels the first viewing on the page, not the specific one that I click.
The strange thing is, that I created a new component on the same level as my modal component, Input the data in the exact same way, and that works perfectly. It only seems to be with the modal that It does not work.
<div class="col-md-3 buttons" [hidden]='!hidden' [#sliderDiv]="out">
<button class="button button-primary button-sm button-green text-center" (click)="updateViewingStatus()">Update Time</button>
<button data-toggle="modal" data-target="#cancelModal" class="button button-primary button-sm button-previous text-center">Cancel Viewing</button>
</div >
<viewings-cancel-modal [viewings]="viewings"></viewings-cancel-modal>
<testing-cancel [viewings]="viewings"></testing-cancel>
</div>
this is where I input viewings property into the child components. Both identical.
this is my test logic (using just a button) that works perfectly:
export class TestingCancelComponent implements OnInit {
#Input() viewings: TenantViewingModel;
private viewingsId;
constructor(private _viewings: ViewingsService) { }
ngOnInit() {
this.viewingsId = this.viewings.viewings_id;
console.log(this.viewings.viewings_id)
}
updateViewingStatus() {
this._viewings.updateViewingStatus(this.viewingsId);
}
}
And this is my modal logic (that doesnt work) :
export class PropertyViewingsCancelModalComponent implements OnInit {
#Input() viewings: TenantViewingModel;
private viewingsId;
constructor(private _viewings: ViewingsService) { }
ngOnInit() {
this.viewingsId = this.viewings.viewings_id;
// console.log(this.viewings.viewings_id)
}
updateViewingStatus() {
this._viewings.updateViewingStatus(this.viewingsId);
}
}
Which again are identical. The html for the working button is as follows:
<button (click)="updateViewingStatus()"></button>
and the non-working modal:
<div class="modal" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="text-center modal_title"> Are you sure you want to </div>
<h1 class="text-center" id="exampleModalLongTitle">Cancel Viewing? {{viewingsId}}</h1>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container">
<img src="/assets/img/site/cancel.svg" alt="" style="height: auto; width: 100%; padding: 25px">
<div class="row">
<div class="col-md-6">
<button data-dismiss="modal" class="button button-primary button-xs button-previous text-center" (click)="updateViewingStatus()">confirm</button>
</div>
<div class="col-md-6 text-right">
<button data-dismiss="modal" (click)="logViewings()" class="button button-primary button-xs button-blue text-center">back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So just as a re-cap:
The button test works perfectly, removing the specific viewing that I want to remove or cancel. But with the modal, it only removes the first viewing on the page, even though the logic is identical, and I pass the data through to each child component in the exact same way.

Here some working example let's try this,
Html File,
<!--Pass your id as argument to your method.-->
<button (click)="onCancel(id)" class="button button-primary button-sm button-previous text-center">Cancel Viewing</button>
<!--This button has been hiden element is used to call your method -->
<button type="button" class="hideElement" data-toggle="modal" data-target="#cancelModal" #cancelModal></button>
<viewings-cancel-modal [viewings]="viewings"></viewings-cancel-modal>
Typescript File,
import { ElementRef, ViewChild } from '#angular/core';
#ViewChild('cancelModal') private cancelModal: ElementRef;
public onCancel(id:number) {
//set some global variable has been id value
localstorage.setItem("Id",id); //here set value as local storage.
this.viewings.viewings_id=id;
this.cancelModal.nativeElement.click(); //then here iam doing call that modal
}
Modal typescript File,
export class PropertyViewingsCancelModalComponent implements OnInit {
#Input() viewings: TenantViewingModel;
private viewingsId;
constructor(private _viewings: ViewingsService) { }
ngOnInit() {
//this.viewingsId = this.viewings.viewings_id;
this.viewingsId = localstorage.getItem("Id"); //here iam getting id value in localstorage
console.log("View Id",this.viewingsId) //here you getting your id you can proceed your process in modal button click time.
}
updateViewingStatus() {
this._viewings.updateViewingStatus(this.viewingsId);
}
}
It is a simple logic you have to implement your convenient. I hope it's helpful to solve your problem.
Thanks,
Muthukumar