Dropdown selection to show/hide based on selection using ng-bootstrap Angular 8

Question

I'm using ng-bootstrap and Angular 8 and trying to show/hide a div based on the selection of the dropdown. It's not a usual dropdown using <select> Here's the code:

<div ngbDropdown class="d-inline-block ml-3">
  <button class="btn btn-outline-success" id="dropdownBasic1" ngbDropdownToggle>Login</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1" [(ngModel)]="partnerValue" ngDefaultControl>
    <button ngbDropdownItem value="one">One</button>
    <button ngbDropdownItem value="two">Two</button>
    <button ngbDropdownItem value="three">Three</button>
  </div>
</div>

<div *ngIf="partnerValue == ''">
  Show if any of the above button is selected.
</div>

I want to show the DIV only if one/any of the button is selected else keep it hiding by default.

Eliseo · Accepted Answer · 2019-11-17 12:24:50Z

1

I think you want to do some like

<div ngbDropdown class="d-inline-block ml-3">
  <button class="btn btn-outline-success" id="dropdownBasic1" 

ngbDropdownToggle>Login</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1" >
        <button ngbDropdownItem (click)="partnerValue='one'">One</button>
        <button ngbDropdownItem (click)="partnerValue='two'">Two</button>
        <button ngbDropdownItem (click)="partnerValue='three'">Three</button>
      </div>
    </div>

That's, there're not [(ngModel)], just in click you change the variable "partnerValue"

answered Nov 17, 2019 at 12:24

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kiran Mistry · Accepted Answer · 2019-11-17 17:12:05Z

Just Simply use show_hide_div:boolean = false; in ur ts file it will hide the div when ur component is load

after that u can do like this

show_hide_div:boolean = false;

one(){
  this.show_hide_div = true;
  console.log("one method");
}

two(){
  this.show_hide_div = true;
  console.log("two method");
}

three(){
  this.show_hide_div = true;
  console.log("three method");
}

and here is the Html file just add like this *ngIf="show_hide_div"

<div ngbDropdown class="d-inline-block ml-3">
  <button class="btn btn-outline-success" id="dropdownBasic1" ngbDropdownToggle>Login</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1" [(ngModel)]="partnerValue" ngDefaultControl>
    <button ngbDropdownItem value="one" (click)="one(e)">One</button>
    <button ngbDropdownItem value="two" (click)="two()">Two</button>
    <button ngbDropdownItem value="three" (click)="three()">Three</button>
  </div>
</div>


<div *ngIf="show_hide_div">
  Show if any of the above button is selected.
</div>

Here is the Example you can edit or preview code Here On Stackblitz with *ngIf

And another Way you can do like this with hidden attribute [hidden] is a special case binding to hidden property. It is closest cousin of ng-show and ng-hide.

when ur component is load it hide the div with show_hide_div:boolean = true; here is change the boolean value

show_hide_div:boolean = true;

one(){
   this.show_hide_div = false;
   console.log("one method");
  }

  two(){
    this.show_hide_div = false;
    console.log("two method");
  }

  three(){
    this.show_hide_div = false;
    console.log("three method");
  }

check with hiddenattribute example on Stackblitz

Collectives™ on Stack Overflow

Dropdown selection to show/hide based on selection using ng-bootstrap Angular 8

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related