to reuse html content in angular 5

Question

Before starting this question, I clarify that I am new so please be patient. I will try to explain myself. In bootstrap I can generate modals in the following way:

[modal.component.html]

    <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

I am trying to create a service so that I can invoke the previous modal where it requires it.

I imagine something like that inside my service file.

generatePopup(){
  $('#myModal').modal('show');
}

then every time you call the service (generatePopup) the modal should appear. I'm not sure how to do this, if you can guide me I would be very grateful. what I'm trying to do is save code and in any component I do not have to keep the html code in every view, but I do call generatePopup and it invokes me to the modal.

thanks

dont you want your modal data to be dynamic? Header, body text, etc? — BeeBee8, May 11 '18 at 17:29
@BhushanBabar of course! and that is my next step. for now I need to understand how I would do it. — yavg, May 11 '18 at 17:43
ok, I am working on example on stackblitz, will get back soon. — BeeBee8, May 11 '18 at 17:44
@BhushanBabar great! taking advantage of this ... my idea is to customize a modal and besides that, it is possible to pass the name of a function that is contained in the component that calls the dynamic popup in a modal button? — yavg, May 11 '18 at 17:47
yes, you can, you can just pass a function name as a parameter when you call the service function — BeeBee8, May 11 '18 at 19:18

BeeBee8 · Accepted Answer · 2018-05-18T13:32:43.203

2

This is how I would do it, link below to stackblitz.

https://stackblitz.com/edit/ngx-bootstrap-fh92s3

modal.service.ts

import {Injectable} from '@angular/core';
import {ModalModel} from './modal.model';
import {Subject} from "rxjs/Subject";

declare let $: any;

@Injectable()
export class ModalService {

  modalData = new Subject<ModalModel>();

  modalDataEvent = this.modalData.asObservable();

  open(modalData: ModalModel) {

    this.modalData.next(modalData);

    $('#myModal').modal('show');
  }

}

modal.component.ts

import { Component } from '@angular/core';
import { ModalService } from './modal.service';
import {ModalModel} from './modal.model';

declare let $: any;

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: [ './modal.component.css' ]
})
export class ModalComponent  {

  modalData: ModalModel;

  constructor(private modalService: ModalService) {
    this.modalService.modalDataEvent.subscribe((data) => {
      this.modalData = data;
    })
  }

}

calling this service from any component

import { Component } from '@angular/core';
import { ModalService } from '../modal/modal.service';
import { ModalModel } from '../modal/modal.model';


declare let $: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [ './home.component.css' ]
})
export class HomeComponent  {

  modelData = new ModalModel();

  constructor(private modalService: ModalService) {

  }

  open() {
    this.modelData.header = 'This is my dynamic HEADER from Home component';
    this.modelData.body = 'This is my dynamic BODY from Home component';
    this.modelData.footer = 'This is my dynamic footer from Home component';
    this.modalService.open(this.modelData);
  }
}

Hope it helps, let me know if you need any explanations.

EDIT

If someone is looking for ngx-bootstrap version of this, (without using jQuery). Here is a Stackblitz link.

https://stackblitz.com/edit/angular-ngx-bootstrap-modal

edited May 18 '18 at 13:32

answered May 11 '18 at 19:14

BeeBee8

2,944
1
27
39

great friend, thank you very much! at the moment I can not sit down to analyze it. but I have a question, the page where you uploaded the code allows me to see the files? (something like the style of jsdfiddle, plnkr). I cant see the template html. 2. for what is "new Subject" . 3 for what this "this.modalData.asObservable();"? – yavg May 11 '18 at 19:21
You are very kind, excuse my ignorance. I followed a course and these are topics that I did not see. About adding a function contained in the component, can you please show me the correct way? thank you very very much. – yavg May 11 '18 at 19:24
@yavg yes its like jsfiddle for angular, 2&3. those are very broad questions, you should read docs for that, or this article https://blog.angularindepth.com/rxjs-understanding-subjects-5c585188c3e1 , basically you are creating observable of an object to which you can subscribe when ever that object is changes from somewhere. – BeeBee8 May 11 '18 at 19:25
@yavg you should get your basics clear about angular by following 'getting started' https://angular.io/guide/quickstart – BeeBee8 May 11 '18 at 19:27
I learned the basics, there is a lot to learn, but without a doubt, thanks to you I will be able to learn more. very friendly. many thanks. – yavg May 11 '18 at 19:29
@yavg all the best, this is how generally services are written in angular and components functions are written, it will all make sense when learning further, don't forget to upvote and mark this as an answer if it helped. – BeeBee8 May 11 '18 at 19:34
an ultimate dude.... how can put a dynamic name for the function? in the example is `open()` more or less this is correct? on html `` on component.. `public name_function="open()"` – yavg May 11 '18 at 19:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170879/discussion-between-bhushan-babar-and-yavg). – BeeBee8 May 11 '18 at 19:37
Friend, I understood the code a little more. I've noticed something. When the code executes, an error occurs due to properties that have not been defined for the popup. look at the browser console please. – yavg May 13 '18 at 03:48
Yes, initially modalData is not available, its fixed now by adding `?` after `modalData?` in `modal.component.html` , you can show some appreciation by accepting the answer and upvoting it as I have posted what you asked. – BeeBee8 May 13 '18 at 17:25
yes! thanks... can yo help me with this question. is applied to structure of my real project. https://stackoverflow.com/questions/50317845/modal-from-a-service-it-is-not-shown#50317845 – yavg May 13 '18 at 18:28

to reuse html content in angular 5

1 Answers1

Linked