CODEWITHSUNDEEP
angulartypescriptangular-ng-ifng-showangularjs-ng-if
developer1
developer1

Reputation: 25

How to show and hide the calendar based on condition in angular

I have an angular application in that I need to show the caledar based selected dropdown list.

.component.ts

OptionList: LookupActionCode[]=[];
public setList(actionType: any):void{
  this.anotherOptionList = [];
   if(actionType == dataConstant.calendar){
  this.List.push(
       {
          
          Name: dataConstant.calendar
       },
      {
       Name: dataConstant.showCalendar
      },
 {
  Name: dataConstant.hideCalendar
       },
   )}

 switch(actionType){
    case dataConstant.memberdata:
      this.OptionList = this.memberDataCodes;
      break;
      case dataConstant.referral:
        this.OptionList= this.referralCodes;
      break;
     
      case dataConstant.Calendar:
        this.OptionList = this.List;
        break;
     }

.component.html

//first dropdown
<label for="OptionList" class="cpp-required"> <b>Action</b></label>
 <select id=action class="form-control"  required  (change) ="setList($event.target.value)">
               <option value="" disabled [selected]="true"></option>
             <option [value] = "dataConstant.referral">{{dataConstant.referral}}</option>
 <option [value] = "dataConstant.memberdata">{{dataConstant.memberdata}}</option>
 <option [value] = "dataConstant.calendar">{{dataConstant.calendar}}</option>
             </select>    
//second dropdown


<label> <b>Action</b></label>
 <select id=action class="form-control"  required>
               <option value="" disabled [selected]="true"></option>
               <option *ngFor="let option of OptionList" [value] ="option">{{option.Name}} </option>
             </select>   

<div >
 <angular2-fullcalendar [options]="Options" id="Calendars"></angular2-fullcalendar>
        </div>

So my requirement is when we select the dataConstant.calendar from the firstdropdown category list, It will show the releted lists in Action dropdown second list(Implemented) from the seconfd dropdown if I select the dataConstant.showCalendar option I need to show the calendar

I have tried <div *ngIf =" OptionList.Name===dataConstant.showCalendar">But not working Can anyone helpme on this

Upvotes: 0

Views: 466

Answers (1)

Joosep Parts
Joosep Parts

Reputation: 6245

You could two-way bind what is current selected value of select and using *ngIf if selectedOption is dataConstant.showCalendar we show calendar. Because this is regular HTML select we must use [(ngModel)]. https://stackoverflow.com/a/37109241/15439733

<select id="action" class="form-control" required [(ngModel)]="selectedOption">
   <option value="" disabled [selected]="true"></option>
   <option *ngFor="let option of OptionList" [value] ="option">{{option.Name}} </option>
</select> 

<div *ngIf="selectedOption.Name === 'dataConstant.showCalendar'">
   <angular2-fullcalendar [options]="Options" id="Calendars"></angular2-fullcalendar>
</div>

This part you have to look over yourself so that the if check for === operator would match your case. I don't quite understand what exactly must match. Hope you get the general idea of it.

*ngIf="selectedOption.Name === 'dataConstant.showCalendar'"

PS. In javascript we name variables and properties in camelCase. OptionList -> optionList, Name -> name. https://www.w3schools.com/js/js_conventions.asp

Upvotes: 0

Related Questions