***
title: "AssetPickerDialogComponent"
generated: true
---------------
A dialog which allows the creation and selection of assets.
*Example*
```ts
selectAssets() {
this.modalService
.fromComponent(AssetPickerDialogComponent, {
size: 'xl',
})
.subscribe(result => {
if (result && result.length) {
// ...
}
});
}
```
```ts title="Signature"
class AssetPickerDialogComponent implements OnInit, AfterViewInit, OnDestroy, Dialog {
assets$: Observable;
allTags$: Observable;
paginationConfig: PaginationInstance = {
currentPage: 1,
itemsPerPage: 25,
totalItems: 1,
};
multiSelect = true;
initialTags: string[] = [];
resolveWith: (result?: Asset[]) => void;
selection: Asset[] = [];
searchTerm$ = new BehaviorSubject(undefined);
filterByTags$ = new BehaviorSubject(undefined);
uploading = false;
constructor(dataService: DataService, notificationService: NotificationService)
ngOnInit() => ;
ngAfterViewInit() => ;
ngOnDestroy() => void;
pageChange(page: number) => ;
itemsPerPageChange(itemsPerPage: number) => ;
cancel() => ;
select() => ;
createAssets(files: File[]) => ;
}
```
* Implements: OnInit, AfterViewInit, OnDestroy, [`Dialog`](/current/core/reference/admin-ui-api/services/modal-service#dialog)`<`[`Asset`](/current/core/reference/typescript-api/entities/asset#asset)`[]>`
### assets$
\
`} />
### allTags$
\`} />
### paginationConfig
\
### multiSelect
\
### initialTags
\
### resolveWith
\Asset[]) => void`} />
### selection
\Asset[]`} />
### searchTerm$
\
### filterByTags$
\
### uploading
\
### ngOnInit
\ `} />
### ngAfterViewInit
\ `} />
### ngOnDestroy
\ void`} />
### pageChange
\ `} />
### itemsPerPageChange
\ `} />
### cancel
\ `} />
### select
\ `} />
### createAssets
\ `} />