the array dict as below

Data: Array<any> = [
      { name: 'A No',      dshow: true,    show: ''},
      { name: 'X No',      dshow: false,   show: false },
      { name: 'Y'   ,      dshow: false,   show: false }];

UPDATED HTML:

   <div   *ngFor="let shw of Data; let i=index">
      <div *ngIf="(shwcol.dshow== false)">

        <input type="checkbox"  name= "{{shw.name}}" id= "{{shw.name}}" autocomplete="off" *ngIf="(shw.dshow== false)">
                
        <label  for="{{shw.name}}" *ngIf="(shw.dshow== false)">{{shw.name}}</label></div>
    </div>

css:

.flex-child1 {
    flex: auto;
} 

Above code generating two checkboxes and I guess one hidden chekbox X, Y, the issue is empty space.

desire output X Y

Updated code helping not generate input for false values, but that generating button like X Y

Actual getting output after using updated code

CodePudding user response：

my.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
import { IMyPipe } from "./app.component";

@Pipe({ name: "myPipe" })
export class MyPipe implements PipeTransform {
  transform(item: IMyPipe): IMyPipe {
    if (!item.dshow) { // <--- your logic
      return item;
    }
  }
}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { MyPipe } from "./my.pipe";

@NgModule({
  declarations: [AppComponent, MyPipe],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component } from "@angular/core";

export interface IMyPipe {
  name: string;
  dshow: boolean;
  show: boolean;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  data: IMyPipe[] = [
    { name: "A No", dshow: true, show: false },
    { name: "X No", dshow: false, show: false },
    { name: "Y", dshow: false, show: false }
  ];
}

app.component.html

<div  *ngFor="let shw of data | myPipe">
  <input
    type="checkbox"
    
    name="{{shw.name}}"
    id="{{shw.name}}"
    autocomplete="off"
  />
  <label  for="{{shw.name}}">
    {{shw.name}} 
  </label>
</div>