/Javascript/AngularJS/Searchbox in api news in angular

Searchbox in api news in angular

<div>

  <mat-form-field>
    <input matInput placeholder="Search" aria-label="State" [matAutocomplete]="auto" [formControl]="searchMoviesCtrl">
    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
      <mat-option *ngIf="isLoading" class="is-loading">Loading...</mat-option>
      <ng-container *ngIf="!isLoading">
        <mat-option *ngFor="let movie of filteredMovies" [value]="movie.Title">
          <span><b>{{movie.Title}}</b> ({{movie.Year}})</span>
        </mat-option>
      </ng-container>
    </mat-autocomplete>
  </mat-form-field>

  <br>

<ng-container *ngIf="errorMsg; else elseTemplate">
  {{errorMsg}}
</ng-container>
<ng-template #elseTemplate>
  <h5>Selected Value: {{searchMoviesCtrl.value}}</h5>
</ng-template>

</div>Copy

Source: freakyjolly.com

Similar codes

0 vote135 views2 answers
This version of CLI is only compatible with Angular versions 0.0.0 || ^9.0.0-beta || >=9.0.0 <10.0.0, but Angular version 10.0.14 was found instead.
Javascript AngularJS
12 votes140 views6 answers
Angular conditional class
Javascript AngularJS
0 vote79 views4 answers
How to implement read more and readless in angular
Javascript AngularJS
2 votes123 views1 answer
How to put background image in angular 11
Javascript AngularJS
0 vote114 views1 answer
Adding bootstrap to angular global styles
Javascript AngularJS
1 vote75 views1 answer
Check angular js , how to set selected values in dropdown
Javascript AngularJS
0 vote115 views1 answer
Add comma after each valiue but don't add in last in angular 6
Javascript AngularJS
10 votes123 views3 answers
Pipe of date angular
Javascript AngularJS
24 votes220 views2 answers
Date format in angular ts
Javascript AngularJS
0 vote126 views1 answer
Custom search filter in angular 8
Javascript AngularJS