How to open bootstrap modal with ngIf

Question

bear with me I'm a beginner! I am trying to open a bootstrap modal with an ngIf condition. That is if there is an object artwork present it should open the modal to add another artwork!

here is my add button component which triggers the event too:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { AddArtModalComponent } from '../add-art-modal/add-art-modal.component';


@Component({
  selector: 'app-add-art-button',
  templateUrl: './add-art-button.component.html',
  styleUrls: ['./add-art-button.component.css']
})
export class AddArtButtonComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();

  constructor(
    private addModalService: NgbModal
  ) { }

  ngOnInit() {
  }

  addArtwork() {
    this.add.emit();
    const modalRef = this.addModalService.open(AddArtModalComponent, { size: 'lg' });
  }

}

and here is the actual modal component:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Artwork, ArtworkService } from '../../../_services/artwork.service';

@Component({
  selector: 'app-add-art-modal',
  templateUrl: './add-art-modal.component.html',
  styleUrls: ['./add-art-modal.component.css']
})
export class AddArtModalComponent implements OnInit {
  @Output() ok = new EventEmitter<Artwork>();
  @Output() cancel = new EventEmitter();
  artwork: Artwork;

  constructor(
    public activeModal: NgbActiveModal,
    private artworkService: ArtworkService
  ) { }

  ngOnInit() {
  }

  startAddingArtwork() {
    console.log('start adding artwork');
    this.artwork = new Artwork();
  }
}

the html of the modal:

<div *ngIf="artwork">

  <div class="modal-content" tabindex="-1" role="dialog" aria-labelledby="Add New Art" aria-hidden="true">
    <!-- Modal Header -->
    <form novalidate #form="ngForm">
      <div class="modal-header">
        <h5 class="modal-title">Add Artwork</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-4">
              <div class="uploadImage">
                <img src="assets/images/modalPic.jpg" alt="Uploaded Image" class="img-fluid samplePic">
                <!-- <button type="submit" class="imgUploadButton mt-2 ml-5 modalButtons">Upload Image</button> -->
                <!-- <img src="{{artwork.imageBase64}}" alt=""> -->
                <app-image-upload #imageUpload (uploadcompleted)="imageUploadCompleted($event)"></app-image-upload>
              </div>
            </div>
            <div class="col-sm-8">
              <div class="artInfo">
                <!-- <form> -->
                <!-- <div class="row" *ngIf="artwork.id">
                    <div class="col-25">
                      <label for="id">ID:</label>
                    </div>
                     <div class="col-75">
                      <input type="number" [value]="artwork.id" id="id" name="id" readonly>
                    </div>
                  </div> -->
                <div class="form-group">
                  <label for="Art work name">Art Work Name</label>
                  <input type="text" class="form-control" id="title" name="title" required minlength="2" placeholder="Art Work">
                </div>
                <div class="form-row">
                  <label for="Artist Name">Artist Name</label>
                </div>
                <div lass="col">
                  <input type="text" class="form-control" id="firstname" name="firstname" required minlength="2" placeholder="First Name">
                </div>
            <div lass="col">
              <input type="text" class="form-control mt-1" id="lastname" name="lastname" required minlength="2" placeholder="Last Name">
            </div>
            <!-- </div> -->
            <div class="form-row">
              <label for="Artist Name">Location</label>
              <div class="form-row">
                <div class="col">
                  <!-- <button class="getLocationButton ml-1 modalButtons">My Location</button> -->
                  <input type="text" class="form-control ml-1" id="streetNameInput" placeholder="Streetname">
                </div>
                <div lass="col">
                  <input type="number" class="form-control mt-1" id="numberInput" placeholder="Number">
                </div>
                <div class="form-row">
                  <div lass="col">
                    <input type="number" class="form-control mt-1 ml-3" id="zipcodeInput" placeholder="Zipcode">
                  </div>
                  <div lass="col">
                    <input type="text" class="form-control mt-1 ml-3" id="cityInput" placeholder="City">
                  </div>
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="col">
                <input type="text" class="form-control mt-1" id="longitude" name="longitude" min="0.0" max="360.0" placeholder="Latitude">
              </div>
              <div class="col">
                <input type="text" class="form-control mt-1" id="latitude" name="latitude" min="0.0" max="360.0" placeholder="Longitude">
              </div>
            </div>
          </div>
          <!-- <div class="form-group mt-2">
              <label for="Artist Name">Addtional Information</label> <br>
              <textarea name="name" rows="2" cols="49" class="additionalInfoText"></textarea>
            </div> -->
          <!-- </form> -->
        </div>
      </div>
    </div>
  </div>

  <!-- Modal footer -->

  <div class="modal-footer">
    <button type="button" class="saveArtButton modalButtons">Save</button>
  </div>
</form>
  </div>
</div>

it definitely triggers the modal to open, as in the back ground turns darker, but the actual html of the modal is not being render because of the ngIf condition, which should work because i do create a new instance of artwork when i click the button!

Answer 1

Call your method in lifecycle hook to get create actual object of the Artwork

ngOnInit() {
   this.startAddingArtwork()    
}

Above code will create artwork object and ngIf condition will be true