# Muk-Card

A Wrapper Component for Mat-Stepper.

## Usage

```html
<ng-template #content>
  <lib-muk-status [data]="data1"></lib-muk-status>
</ng-template>
<ng-template #content2>
  <lib-muk-nav-tabs [tabLinks]="tabs" [isBorderTabs]="true" color="primary">
    <ng-container content>
        <router-outlet></router-outlet>
    </ng-container>
</lib-muk-nav-tabs>
</ng-template>
<lib-muk-stepper [config]="dataConfigStepper"></lib-muk-stepper>
```

```typescript
import { Component, TemplateRef, ViewChild } from "@angular/core";
import { IStepperConfig } from 'ngx-mui-kit/components/muk-stepper/interfaces/stepper-config.interface';
import { NavTabLink } from 'ngx-mui-kit/components/muk-nav-tabs';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  @ViewChild("content") content!: TemplateRef<unknown>;
  @ViewChild("content2") content2!: TemplateRef<unknown>;
  dataConfigStepper!: IStepperConfig;
  ngAfterViewInit(): void {
    this.dataConfigStepper = {
      isVertical: true,
      data: [
        {
          title: "First",
          content: this.content,
        },
        {
          title: "Second",
          content: this.content2,
        },
      ],
    };
  }
   ngOnInit() {
    this.dataConfigStepper = {
      isVertical:true,
      data: [
        {
          title: 'First',
          content: this.content,
        },
        {
          title: 'Second',
          content: this.content2,
        },
      ],
    };
  }
    tabs: NavTabLink[] = [
    {
      title: 'View Request',
      link: 'test',
    },
    {
      title: 'View User',
      link: '',
    },
  ];
}
```

### Properties

| Name   | Type    | Description                         |
| ------ | ------- | ----------------------------------- |
| `data` | `IData` | The data to be passed to the modal. |