Angular7 toogle switch by changing text

I have a nz-switch using ng.ant.design and am using the api for getting dynamic data. i have given this toogle switch and when it is ON then the text will be as Active once it is OFF then the text will be as inactive. Now if switch on then all are getting active and once it is off all are inactive.how to solve this

HTML:

  <div nz-row [nzGutter]="8" class="mt-20" *ngIf="users">
            <div nz-col [nzSpan]="6" *ngFor="let user of users.data" >
              <nz-card class="text-center" [nzCover]="coverTemplate" >
                  <nz-card-meta ></nz-card-meta>
                  <div class="text-left" routerLink="detail" style="outline:none">
                    <p class="mbtm-10 head-font">{{ user.first_name  }} {{ user.title }}</p>
                    <p>Provides access of full site of capabilities, including administration and settings</p>
                  </div>
                  <!-- <div class="text-right"><strong>{{status}} </strong><nz-switch nzSize="small"  [ngModel]="active"  (click)="toggle()"></nz-switch></div> -->
                  <div class="text-right" *ngIf="active; else inactive"><strong>Active </strong><nz-switch nzSize="small" [(ngModel)]="active" ></nz-switch></div>
                    </nz-card>
                    <ng-template #inactive>
                      <div class="text-right"><strong>InActive</strong><nz-switch nzSize="small" [(ngModel)]="active" ></nz-switch></div>
                    </ng-template>
                <ng-template #coverTemplate >
                  <p  class="sub-card">{{user.id}}</p>
                </ng-template>
            </div>
          </div>

Component.ts:

public status : any = 'Active';
 public active:boolean = true;
  users: Object;
  constructor(private setup: SetupService) { }
  ngOnInit() {
    this.setup.getUsers().subscribe(setup => {
        this.users = setup
        console.log(this.users);
      }
    );

can anyone suggest me how to achieve this, thanks in advance.