CODEWITHSUNDEEP
angular
yavg
yavg

Reputation: 3051

to reuse html content in angular 5

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

Upvotes: 1

Views: 1677

Answers (1)

BeeBee8
BeeBee8

Reputation: 3074

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

Upvotes: 2

Related Questions