import { Component, ViewChild } from '@angular/core';
import { IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective, IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from '../list/public_api';
import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
import { IgxIconComponent } from '../icon/icon.component';
@Component({
template: `
face
Text-Line
Title
Subtitle
share
`,
standalone: true,
imports: [
IgxListComponent,
IgxListItemComponent,
IgxIconComponent,
IgxListThumbnailDirective,
IgxListLineDirective,
IgxListLineTitleDirective,
IgxListLineSubTitleDirective,
IgxListActionDirective
]
})
export class ListDirectivesComponent {
}
@Component({
template: `
Item 1
Item 2
Item 3
`,
standalone: true,
imports: [IgxListComponent, IgxListItemComponent]
})
export class BasicListComponent {
@ViewChild(IgxListComponent, { static: true }) public list: IgxListComponent;
@ViewChild('wrapper', { static: true }) public wrapper;
}
@Component({
template: `
Header
Item 1
Item 2
Item 3
`,
standalone: true,
imports: [IgxListComponent, IgxListItemComponent]
})
export class ListWithHeaderComponent extends BasicListComponent {
}
@Component({
template: `
Item 1
Item 2
Item 3
`,
standalone: true,
imports: [IgxListComponent, IgxListItemComponent]
})
export class ListWithPanningComponent extends BasicListComponent {
public allowRightPanning = true;
public allowLeftPanning = true;
}
@Component({
template: `
`,
standalone: true,
imports: [IgxListComponent]
})
export class EmptyListComponent extends BasicListComponent {
}
@Component({
template: `
Custom no items message.
`,
standalone: true,
imports: [IgxListComponent, IgxEmptyListTemplateDirective]
})
export class CustomEmptyListComponent extends BasicListComponent {
}
@Component({
template: `
`,
standalone: true,
imports: [IgxListComponent]
})
export class ListLoadingComponent extends BasicListComponent {
public isLoading = true;
}
@Component({
template: `
Loading data...
`,
standalone: true,
imports: [IgxListComponent, IgxDataLoadingTemplateDirective]
})
export class ListCustomLoadingComponent extends ListLoadingComponent {
}
@Component({
template: `
Header 1
Item 1
Header 2
Item 2
Item 3
`,
standalone: true,
imports: [IgxListComponent, IgxListItemComponent]
})
export class TwoHeadersListComponent extends ListWithPanningComponent {
}
@Component({
template: `
Header 1
Item 1
Header 2
Item 2
Item 3
`,
standalone: true,
imports: [IgxListComponent, IgxListItemComponent]
})
export class TwoHeadersListNoPanningComponent extends ListWithHeaderComponent {
}
@Component({
template: `
Left
Right
Header
Item 1
Item 2
Item 3
`,
standalone: true,
imports: [IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective]
})
export class ListWithPanningTemplatesComponent extends ListWithPanningComponent {
}
@Component({
template: `
{{ item.key }}
{{ item.name }}
`,
styles: [`.item-container {
display: flex;
}`],
standalone: true,
imports: [IgxListComponent, IgxListItemComponent, IgxForOfDirective]
})
export class ListWithIgxForAndScrollingComponent {
@ViewChild('forOfList', {read: IgxListComponent, static: true })
public forOfList: IgxListComponent;
@ViewChild(IgxForOfDirective)
public igxFor: IgxForOfDirective;
public data = [
{key: 1, name: 'John'},
{key: 2, name: 'Brian'},
{key: 3, name: 'Christian'},
{key: 4, name: 'Mark'},
{key: 5, name: 'William'},
{key: 6, name: 'Dave'},
{key: 7, name: 'Riley'},
{key: 8, name: 'Terrance'},
{key: 9, name: 'Erick'},
{key: 10, name: 'Victor'},
{key: 11, name: 'Rick'},
{key: 12, name: 'Stefan'}
];
}