ae-select is not exported to use in select button

[jainshubh0612]

I am trying to use ae-select to add custom template variables to display merge vars in my editor.

Options

customOptions = [
    {
      label: 'Name',
      value: '{{name}}',
    },
    {
      label: 'Email',
      value: '{{email}}',
    },
  ];

Editor

<ng-template #customButtons let-executeCommandFn="executeCommandFn">
<ae-toolbar-set>
  <ae-select
  class="select-heading"
  [options]="customOptions "
  [(ngModel)]="block"
  (change)="test()"
  tabindex="-1"
></ae-select>
</ae-toolbar-set>
</ng-template>
</angular-editor>

It throws an error Can't bind to 'options' since it isn't a known property of 'ae-select'.

Here is the screenshot -

I also checked the export array of angular-editor.module.ts
https://github.com/kolkov/angular-editor/blob/12e1f8846a411b51f6f1d7946ea7f312e2c54927/projects/angular-editor/src/lib/angular-editor.module.ts#L15

And it seems AeSelectComponent is not exported.

Can you please fix it ? or suggest how to use the ae-select in editor to display a custom dropdown with options to execute custom command.

[vickyRathee]

@kolkov any chance? I think this will be a quick fix if you agree that AeSelectComponent should be on exports list to allow ae-select dropdown in toolbar.

[gtteamamxx]

up

[KhadijaSaoulajane]

Here's a solution I used : <angular-editor> <ng-template #customButtons > <ae-toolbar-set class="toolbar-set"> <mat-select [(ngModel)]="allergy" class="editor-select" name="app{{allergy.id}}"> <mat-option [value]=""></mat-option> <mat-option *ngFor="let al of allergies" [value]="al.id">{{al.name}}</mat-option> </mat-select> </ae-toolbar-set> </ng-template> </angular-editor>

The CSS for it to positon the select button : .toolbar-set{ display:inline-block; }

.editor-select{ background: white; width: 150px; border: 1px solid #ddd; padding: .4rem; min-width: 2rem; float: left; }

I hope this helps someone :D

[ptoner1]

After you've npm installed the angular-editor, you can go to your node module and manually add the export. In your code editor, go to: node_modules/@kolkov/angular-editor/lib/angular-editor.module.d.ts

Line 11 should look like this (you can just copy and paste):

static ɵmod: i0.ɵɵNgModuleDeclaration<AngularEditorModule, [typeof i1.AngularEditorComponent, typeof i2.AngularEditorToolbarComponent, typeof i3.AeSelectComponent, typeof i4.AeButtonComponent, typeof i5.AeToolbarSetComponent], [typeof i6.CommonModule, typeof i7.FormsModule, typeof i7.ReactiveFormsModule], [typeof i1.AngularEditorComponent, typeof i2.AngularEditorToolbarComponent, typeof i3.AeSelectComponent, typeof i4.AeButtonComponent, typeof i5.AeToolbarSetComponent]>;

This line of code has the necessary "typeof i3.AeSelectComponent" added to the second array.