# Creating a custom field type for Media with Angular

**URL:** <https://forum.litium.com/t/creating-a-custom-field-type-for-media-with-angular/38>\
**Category:** Questions\
**Tags:** litium-6, field-framework\
**Created:** [May 2, 2018, 11:54am UTC](https://forum.litium.com/t/creating-a-custom-field-type-for-media-with-angular/38 "2018-05-02T11:54:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![joran.nordlund](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/joran.nordlund/32/15_2.png) [@joran.nordlund](https://forum.litium.com/u/joran.nordlund)\
**Post date:** [May 2, 2018, 11:54am UTC](https://forum.litium.com/t/creating-a-custom-field-type-for-media-with-angular/38/1 "2018-05-02T11:54:54Z")

</div>

I’m creating a custom media field type in Litium 6 using Angular, I’ve followed the guide ([https://docs.litium.com/documentation/architecture/field-framework/creating-a-custom-field-type#Edit%20panel%20controller](https://docs.litium.com/documentation/architecture/field-framework/creating-a-custom-field-type#Edit%20panel%20controller)) but can’t get it right.

In AngularJS, it seems that you populate the field type data in the script files? ("~/Site/Administration/fieldFramework/accelerator\_filterFieldEdit.js" & “~/Site/Administration/fieldFramework/accelerator\_filterFieldSettings.js” in the guide)

Where do I do this in Angular?

Litium version: 6

---

<div class="post-metadata">

**Author:** ![marten](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/marten/32/11_2.png) [@marten](https://forum.litium.com/u/marten)\
**Post date:** [May 2, 2018, 12:16pm UTC](https://forum.litium.com/t/creating-a-custom-field-type-for-media-with-angular/38/2 "2018-05-02T12:16:23Z")

</div>

Look at **Edit panel controller** where the field is accessed using `var field = $scope.model.fields[$scope.model.formField.id]`.

And in **Edit template** accessed via `model.fields[model.formField.id][model.culture]` / `model.fields[model.formField.id]['*']`

---

<div class="post-metadata">

**Author:** ![joran.nordlund](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/joran.nordlund/32/15_2.png) [@joran.nordlund](https://forum.litium.com/u/joran.nordlund)\
**Post date:** [May 2, 2018, 12:25pm UTC](https://forum.litium.com/t/creating-a-custom-field-type-for-media-with-angular/38/3 "2018-05-02T12:25:44Z")

</div>

Your answer is for AngularJS from what I can see. The custom field types in the Media and Customer areas use Angular.

---

<div class="post-metadata">

**Author:** ![marten](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/marten/32/11_2.png) [@marten](https://forum.litium.com/u/marten)\
**Post date:** [May 2, 2018, 1:23pm UTC](https://forum.litium.com/t/creating-a-custom-field-type-for-media-with-angular/38/4 "2018-05-02T13:23:18Z")

</div>

The example on Docs is listing options using `<field-selector #control [areaName]="areaName" (onFieldSelect)="onFieldSelect($event.option, $event.checked)" [value]="fields" [visibleIds]="visibleIds"></field-selector>`.

- The field-selector component is only used to list fields (in this case using visibleIds to limit the fields avaliable to select).
- `[value]="fields"` is used to set fields to hold the selected items, `fields` is declared in the base class `FieldEditorFieldSelector`

If you want to look at how it works or see which other components are avaliable you can find the source to the `litium-ui` npm-package in folder `../Web/obj/litium-ui.tgz`.

Perhaps the components `multi-select` or `single-select` works for your needs?

Single-select example:

```auto
<single-select 
    [label]="'Gender'"
    [options]="options"
    [idSelector]="idSelector"
    [textSelector]="textSelector"
    (onOptionChange)="onOptionChange($event.option, $event.checked)">
</single-select>

.ts code:

options = [{ id: 0, text: 'Male' }, { id: 1, text: 'Female' }];
idSelector = option => option.id; // to get the Id prop from the option item
textSelector = option => option.text; // to get the Text prop from the option item

onOptionChange(option, checked) {
    // process when an option is checked or unchecked
}
```

---

<div class="post-metadata">

**Author:** ![joran.nordlund](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.litium.com/joran.nordlund/32/15_2.png) [@joran.nordlund](https://forum.litium.com/u/joran.nordlund)\
**Post date:** [May 8, 2018, 9:06am UTC](https://forum.litium.com/t/creating-a-custom-field-type-for-media-with-angular/38/5 "2018-05-08T09:06:09Z")

</div>

Finally, my solution was to make a “simple” list in the template.