include angular autocomplete with angular material mat-autocomplete

[r_gissarl_]

Hi,

I want to use the Angular autocompleter (https://material.angular.io/components/autocomplete/overview) to help our users to complete email fields (not reference fields because the same field is used for new and existing addresses). My widget is ready, but I need to import the autocomplete component to my Service Portal (or in the widget or in the page).

On a server it would be :

npm install @angular/material/autocomplete --sav

Is anyone able to explain me on how to do this with service now (we are on Kingston) ?

Regards.

[Omkar Mone]

Hi 

Please add these two lines to add angular material design in your service portal here :-

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>

In Dependency related List add these and click the Include on page load check box.

[r_gissarl_]

Hello Omkar,

Thanks for your help. I added the Angular modules as you proposed (note that the browser warns me that we tried to load Angular multpiple times so angular.min.js may not be mandatory) and added it as a dependency to the widget :

But I still have no success in making autocomplete work. Even the simplest (and first) exemple ( here : https://material.angular.io/components/autocomplete/overview#simple-autocomplete) is still not working. I tried many ways to adapt it to the service portal but no succes. Can you tell me if you can make it work with :

HTML :

  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="c" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

Client script :

function($scope) {
  /* widget controller */
  var c = this;
  c.options= ['One', 'Two', 'Three'];
}

Thanks.

[Omkar Mone]

Hi 

Have you tried including the CSS too?

[r_gissarl_]

Yes and no.

The CSS from the material.angular.io exemple, I included it in the widget :

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

But I saw a CSS Include in your widget dependecy, and I didn't include it because I don't know what it is referring to.