I have a officeLocations Array and I want to display it in html with the help of isOpened property in angular

Question

I have an array named officeLocationsArray in officeLocation.ts file as follows.

export class OfficeLocation
{
    officeLocationName:string;
    Isopened:boolean;
}
export const officeLocationArray : OfficeLocation[] = [
    {officeLocationName : 'India' , Isopened:false },
    {officeLocationName : 'UK' , Isopened:false },
    {officeLocationName : 'USA' , Isopened:false }
];

Now in my html I am doing an iteration of this officeLocationArray

  <select class="form-control" name="officeLocation" id="officeLocation" formControlName="officeLocation">
                                                <option *ngFor="let countryName of officeLocations" value="{{countryName.officeLocationName}}">{{countryName.officeLocationName}}</option>
                                        </select>

Now I wanted to display the officeLocationNames based on the IsOpened property. When I apply ngIf it is popping an error that ngIf and ngFor cant be applied to single element in html .

You can write a pipe. See https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor or https://stackoverflow.com/questions/44888331/how-to-filter-items-inside-ngfor-loop-in-angular-4-using-input-field — StephaneM, Nov 30 '17 at 09:10

score 0 · Answer 1 · answered Nov 30 '17 at 09:13

0

You can filter the array for just opened offices and iterate over it.

export const openedOfficeLocations: OfficeLocation[] = officeLocationArray.filter((office) => office.Isopened);

answered Nov 30 '17 at 09:13

Fernando Farias

196
1
8

1

Thank You Fernando Fairas. It helped. – roopteja Nov 30 '17 at 10:15

I have a officeLocations Array and I want to display it in html with the help of isOpened property in angular

1 Answers1