Develop Reference

Vuejs 3 - Problem with data function inside a component

I have a list of projects which I get from an api. They get forwarded one by one to this component:
<template>
<button id="project-button" #contextmenu="handler($event)" class="btn btn-outline-secondary mt-1 ms-1" data-bs-toggle="collapse" :data-bs-target="`#${project.Name + project.ID}`">{{project.Name}}</button>
<div :id="`${project.Name + project.ID}`" class="collapse">
<button #click="setProjectId" id="add-object-button" class="btn btn-outline-secondary mt-1 ms-1" data-bs-toggle="modal" data-bs-target="#createObject">
<b>Add Data Object</b>
<i id="plus-icon" class="fas fa-plus"></i>
</button>
<DataObjects :dataObjects="dataobjects"/>
</div>
<CreateObjectModal #add-object="addObject" :projectId="projectId"/>
</template>
<script>
import DataObjects from './DataObjects'
import CreateObjectModal from './CreateObjectModal'
export default {
name: 'Project',
data() {
return {
dataobjects: [],
projectId: 0,
}
},
props: {
project: Object,
},
components: {
DataObjects,
CreateObjectModal
},
methods: {
setProjectId() {
console.log(this.project.ID)
this.projectId = this.project.ID
console.log(this.projectId)
},
async addObject(objectName) {
console.log(objectName)
console.log("After adding object: " + this.projectId)
console.log("Event arrived")
},
Inside the data function I have an object which has the attribute projectId. When I click on the Add Data Object button a modal opens where the user can type in the name of the data object. The modal opens through the data-bs-toggle and data-bs-target attributes. Now in my click event for this button I can get the individual id of a project depending on which button I click. But the problem here is that I will need the specific id of a project inside my addObject function. The addObject function gets called when I click 'Ok' in my modal after the user types in a name. The logs show clearly that if I click on a button the different id gets set correctly but when I click 'Ok' from the modal and the AddObject function gets called then the id remains 1 which is the first id of the projects
I dont know if I am complicating things but I tried to send the id to my modal component which didnt work. The idea was to send it back to the addObject function via $emit. I am kinda stuck with this problem and hope someone can help me. Here is the Modal Component:
<template>
<div>
<div class="modal fade" id="createObject" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Data Object</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating mb-3">
<input v-model="objectName" class="form-control" id="input">
<label for="input">Object Name:</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<Button data-bs-dismiss="modal" #click="createObject" :text="'Save'"/>
<p>{{projectId}}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Button from './Button'
export default {
name: 'CreateObjectModal',
data() {
return {
objectName: '',
}
},
props:{
projectId: Number
},
methods: {
createObject() {
this.$emit('add-object', this.objectName)
}
},
components: {
Button
},
emits: ['add-object']
}
</script>

Javascript not triggering on modal open with Twig Template

Note: I've tried the various solutions found online for my issue, but none of them have worked.
I am trying to pass content from a table where each row has its own button to edit the content in that row. The button opens a Twitter Bootstrap dropdown, which has two buttons, one being the "Edit" button. The edit button opens a modal which has a text-area input. I want the text-area to have the current text present in the table for editing. I am using PHP with Symfony for the forms and Twig for the page rendering.
the button that triggers the modal
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="btn btn-sm dropdown-item edit-button" data-toggle="modal" data-target="#announcementEditModal" data-id="{{ announcement.id }}" data-content="{{ announcement.content }}" type="button">
<div class="announcement-actions">
<span class="fas fa-pencil-alt"></span> Edit announcement
</div>
</button>
The modal
<div class="modal fade" id="announcementEditModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header announcement-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="fas fa-edit"></span> Edit new announcement</h5>
</div>
<div class="announcement-card-header card m-3 border-0">
<div class="announcement-card-header card-body border-0 p-1">
<span class="fa fa-info-circle fa-lg header-icon"></span>
<h5 class="align-header">ANNOUNCEMENT TEXT</h5>
</div>
<div class="announcement-card-body modal-body card border-0">
{{ form_start(editForm) }}
<div class="announcement-card-body">
<label for="exampleInputEmail1">ANNOUNCEMENT (SUPPORTS MARKDOWN)</label>
<textarea class="form-control" id="announcementText" rows="5" name="content"></textarea>
</div>
</div>
</div>
<div class="card-footer border-0 bg-white pt-0">
<div>
{{ form_widget(editForm.edit, {'left_icon': 'fas fa-check'}) }}
<button type="button" class="btn btn-light" data-dismiss="modal" aria-label="Close">
Cancel
</button>
</div>
</div>
{{ form_end(editForm) }}
</div>
</div>
</div>
The JavaScript
<script type="text/javascript">
$(".edit-button").click(function(){
var content = $(this).data("content");
alert(content);
});
$('#announcementEditModal').on('shown.bs.modal', function () {
alert("modal open");
document.getElementById("#announcementText").val(content);
})
</script>
The alert("modal open") does not fire.I have tried'shown.bs.modal'and'show.bs.modal'`. I'm using Bootstrap 4.12
EDIT: Solution: Once I moved the JS to an announcements.js file where I was doing some stuff with my forms the trigger works.

It appears you either have an incomplete html code or have not shared it all with us.
dropdown-menu does not have a closing div.
wrap dropdown-menu inside dropdown or btn-group.
var content will not be available inside your shown.bs.modal function, so declare it globally, not a very good advice but for simplicity sake.
Fix Javascript error, since you are using jQuery, use it.
document.getElementById("#announcementText").val(content); // val is not function
Replace with
document.getElementById("#announcementText").value = content;
$("#announcementText").val(content); // or jQuery way
And here is the fiddle: https://jsfiddle.net/7onyuw9f/1/
Attempt 2
Below is an example of revealing module pattern to show how you can avoid global variables and also a lot cleaner. You can read more about this pattern here
// Revealing Module Pattern
var MyProject = MyProject || {}; // Your global object
MyProject.Modal = function() { // Namespacing to Modal
var content = ""; // now content is local to this function;
var onEditClick = function() {
$(".edit-button").click(function() {
content = $(this).data("content");
alert(content);
});
};
var onModalShow = function() {
$('#announcementEditModal').on('shown.bs.modal', function() {
alert("modal open");
// $("#announcementText").val(content); <-- jQuery way
document.getElementById("announcementText").value = content;
});
};
var init = function() {
onEditClick();
onModalShow();
};
return {
init: init // expose this for other functions to call
}
}();
$(document).ready(function() {
MyProject.Modal.init();
});
And the fiddle https://jsfiddle.net/x28s3uc9/1/

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.

How to edit passed data from parent to child component in Angular 4

I have parent component with all teams and child component for displaying each of team in box using *ngFor and #Input. All child components are displayed fine but when I want to change each of them opening modal I always get the data from first object in array of teams.
team.component.html
<app-team-box *ngFor="let team of teams" [team]="team"></app-team-box>
team-box.component.html
<div class="ibox">
<div class="ibox-title">
<h5>{{this.team.name}}</h5>
<a class="btn btn-xs" (click)="openEditTeamModal(this.team)">Edit</a>
</div>
</div>
<div class="modal fade" id="edit_team_modal">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" (ngSubmit)="editTeam()" novalidate>
<div class="modal-body">
<div class="row" *ngIf="this.team">
<label>Team name:</label>
<input type="text" id="name" name="name" [(ngModel)]="this.team.name" #name="ngModel">
</div>
</div>
<div class="modal-footer">
<button type="submit">Save</button>
</div>
</form>
</div>
</div>
team-box.component.ts
export class TeamBoxComponent implements OnInit {
#Input() team;
constructor(private teamService: TeamService) {}
openEditTeamModal(selectedTeam): void {
this.team = selectedTeam;
$("#edit_team_modal").modal();
$(".modal").appendTo("html");
}
editTeam(): void {
this.teamService.update(this.team).subscribe((team: Response) => {
$("#edit_team_modal").modal("hide");
});
}
}
The problem is when I change first one everything is fine, modal is populated with name and after changing it's get saved. But when I click on edit button for example second team, in modal I get the data for first team. Why this.team is always referencing to first object in array of teams?

Ngx Bootstrap Template Modal Destroyed / Removed From Dom When Hidden

import { Component, TemplateRef } from '#angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
#Component({
selector: 'demo-modal-service-static',
templateUrl: './service-template.html'
})
export class DemoModalServiceStaticComponent {
public modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
public openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
}
Create template modal
<template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
</template>
http://valor-software.com/ngx-bootstrap/#/modals#directive-section
Hi, as seen above, creating modal with template will destro the template when, it is hidden. However; I don't want to be hidden. That is because, I use the modal for selecting some property multiple times from a list. Thus, every time, I have to load the modal. That causes a performance issue. Thus, Is there any way to stop it removing the modal from the dom.