# MUK LIST_LOOPING

## Usage

```html
<lib-muk-list-looping [list]="buttons">
  <ng-template #listItem let-item="item">
    <lib-muk-button [config]="item"></lib-muk-button>
  </ng-template>
</lib-muk-list-looping>
```

```typescript
import { Component } from "@angular/core";
import { ButtonType, IButton, MukButtonTypes, MukThemePalette, TooltipPositions } 
from "ngx-mui-kit/components/muk-button";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  buttons: IButton[] = [
    {
      text: "Add",
      isMukButton: false,
      isLoading: false,
      color: MukThemePalette.Primary,
      matType: MukButtonTypes.Raised,
      spinnerColor: "white",
      icon: "add",
      isDisabled: false,
      type: ButtonType.Button,
      toolTip: {
        position: TooltipPositions.Below,
        toolTip: "Add",
      },
      onClick: (e: any) => {
        console.log("event", e);
      },
    },
    {
      text: "Save",
      isMukButton: false,
      isLoading: false,
      color: MukThemePalette.Accent,
      matType: MukButtonTypes.Raised,
      spinnerColor: "white",
      icon: "close",
      isDisabled: false,
      type: ButtonType.Button,
      toolTip: {
        position: TooltipPositions.Below,
        toolTip: "Save",
      },
      onClick: (e: any) => {
        console.log("event", e);
      },
      className: "mx-2",
    },
  ];
}
```

### Properties

| Name             | Type                 | Description                                         |
| ---------------  | ----------------     | -------------------------------------------         |
| list             | unknown[]            | List of items you want to display                   |
| listItem         | TemplateRef<unknown> | Template to be displayed in the content of the list |
<!-- | isShowLoadMore   | boolean              | flag to show more items                     | -->