unable to display modal based on condition using bootstrap 4& angular 6

Question

here i am having 2 modals and a dropdown if user unable to select any option and press button then an modal has to be displayed and if user selects the dropdown press button then another dropdown has to been displayed . But here i am getting both the modals are displaying the modals

below is my code

.html code

<div class="col-md-10">
  <div class="form-group">
    <span class="custom-dropdown">
      <select id="SelectCars" class="form-control dropdown-class">
          <option value="none" disabled>Select Cars</option>
          <option *ngFor="let car of cars">
          {{car.data}}</option>
      </select>
    </span>
  </div>
</div>

<hr>
<button class="btn btn-primary" (click)="getData()">getData</button>


<div id="alertOne" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">

      </div>
      <div class="modal-body">
        <p class="modal-text">Modal1 {{alert}}</p>

      </div>

      <div class="modal-footer">

        <div class="row">

          <div class="col-sm-6 text-right">

          </div>
          <div class="col-sm-6 text-right alrt-btn-w">

            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div id="alertTwo" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body">
        <p class="modal-text">Modal 2 {{alert}}</p>

      </div>

      <div class="modal-footer">

        <div class="row">

          <div class="col-sm-6 text-right">

          </div>
          <div class="col-sm-6 text-right ">

            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.ts code

  alert:any;
  chooseView:any = $('#SelectCars').val();


  cars = [
    {
      data :"astonMartin"
    },
    {
      data :"landrover"
    },
    {
      data :"ferrai"
    }

  ]

  getData(){
    if (this.chooseView == null) {
      this.alert = "Choose a option";
      $('#alertOne').modal('show');

    }
   this.alert = "this is second modal";
     $('#alertTwo').modal('show');


  }

below is my stackblitz link

https://angular-arrsnp.stackblitz.io

here if dont choose a option then modal one has to be pop up and if user selects option and press button and modal 2 has to be displayed

Answer 1

Two issues with your implementation:

Issue 1: There should be an else statement in the getData function. Also, once that's the case, you can check for the existence of data on the chooseView variable.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

declare var $: any;
declare var require: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  alert: any;
  chooseView = 'none';
  @ViewChild('alertOne') alertOne: ElementRef;
  @ViewChild('alertTwo') alertTwo: ElementRef;

  cars = [{
      data: "astonMartin"
    },
    {
      data: "landrover"
    },
    {
      data: "ferrai"
    }
  ]

  getData() {
    if (this.chooseView && this.chooseView.data) {
      this.alert = "this is second modal";
      $('#alertTwo').modal('show');
    } else {
      this.alert = "Choose a option";
      $('#alertOne').modal('show');
    }
  }


  ngOnInit() {}

}

Issue 2: In the template, use [(ngModel)]. You'll also have to use [ngValue] to get the Select Cars lable appear on the dropdown:

<div class="col-md-10">
  <div class="form-group">
    <span class="custom-dropdown">
      <select 
        id="SelectCars" 
        class="form-control dropdown-class"
        [(ngModel)]="chooseView">
        <option [ngValue]="'none'" disabled>Select Cars</option>
        <option *ngFor="let car of cars" [ngValue]="car">
        {{car.data}}</option>
      </select>
    </span>
  </div>
</div>

<hr>
<button class="btn btn-primary" (click)="getData()">getData</button>

<div #alertOne id="alertOne" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">

    <div class="modal-content">
      <div class="modal-header">
      </div>

      <div class="modal-body">
        <p class="modal-text">Modal1 {{alert}}</p>
      </div>

      <div class="modal-footer">
        <div class="row">
          <div class="col-sm-6 text-right">
          </div>
          <div class="col-sm-6 text-right alrt-btn-w">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>


<div #alertTwo id="alertTwo" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
      </div>

      <div class="modal-body">
        <p class="modal-text">Modal 2 {{alert}}</p>
      </div>

      <div class="modal-footer">
        <div class="row">
          <div class="col-sm-6 text-right">
          </div>
          <div class="col-sm-6 text-right ">
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Here's an Updated StackBlitz.

Answer 2

You forgot to add else statement. Try this:

   getData(){
        if (this.chooseView == null) {
            this.alert = "Choose a option";
            $('#alertOne').modal('show');
        } else {
            this.alert = "this is second modal";
            $('#alertTwo').modal('show');
        }
    }