basic autocomplete framework

@angular material esm5 autocomplete.es5.js

Rate this article

Share this article

Read @angular material esm5 autocomplete.es5.js for more information.


If you are new in Angular and want to install material on your project, you can face some basic errors when running your project.
Don’t worry I will tell you step by step how to resolve your problem in a few seconds.

@angular material esm5 autocomplete.es5.js

Install Material

So now first of all install Material using CLI like this
  1. npm install –save @angular/material @angular/cdk @angular/animations
After installing material add material css in styles.css
  1. @import “~@angular/material/prebuilt-themes/indigo-pink.css”;
Now create a component (example: home.components) in home.components.html file add a sample material input tag,
  1. <form class=“example-form”>  
  2.    <mat-form-field class=“example-full-width”>  
  3.       <input matInput placeholder=“StudentName”>  
  4.    </mat-form-field>  
  5. </form>  
Configure your components in app-routing.module.ts,
  1. import { NgModule } from ‘@angular/core’;  
  2. import { Routes, RouterModule } from ‘@angular/router’;  
  3. import { HomeComponent } from ‘./components/home/home.component’;  
  5. const routes: Routes = [  
  6.    { path: ‘home’, component: HomeComponent },  
  7.    { path: ‘**’, redirectTo: ‘home’ },  
  8. ];  
  9. @NgModule({  
  10.    imports: [RouterModule.forRoot(routes)],  
  11.       exports: [RouterModule]  
  12.    })  
  13. export class AppRoutingModule { }  

After that run your project then you will get the following error,

  1. Uncaught TypeError: Object(…) is not a function  
  2. at platform.es5.js:102  
  3. at Object../node_modules/@angular/cdk/esm5/platform.es5.js (platform.es5.js:104)  
  4. at __webpack_require__ (bootstrap:76)  
  5. at Object../node_modules/@angular/cdk/esm5/a11y.es5.js (a11y.es5.js:1)  
  6. at __webpack_require__ (bootstrap:76)  
  7. at Object../node_modules/@angular/material/esm5/autocomplete.es5.js (autocomplete.es5.js:1)  
  8. at __webpack_require__ (bootstrap:76)  
  9. at Object../node_modules/@angular/material/esm5/material.es5.js (material.es5.js:1)  
  10. at __webpack_require__ (bootstrap:76)  
  11. at Object../src/app/app.module.ts (app.component.ts:8)  
So the question is how to resolve the problem, and the answer is so simple. Update your Material using CLI and run your project.
  1. npm install –save @angular/material@6.4.7 @angular/cdk@6.4.7 @angular/animations@6.1.0  


Add Search to your Website

Are you showing the right products, to the right shoppers, at the right time? Contact us to know more.
You may also like