Create angular project
To create an Angular project, follow these steps:
1. Install Node.js: Angular requires Node.js and npm (Node Package Manager) to be installed on your machine. Visit the official Node.js website (https://nodejs.org) and download the latest LTS version suitable for your operating system. Follow the installation instructions.2. Install Angular CLI: Angular CLI (Command Line Interface) is a powerful tool that simplifies the process of creating and managing Angular projects. Open a terminal or command prompt and run the following command to install Angular CLI globally:
npm install -g @angular/cli
3. Create a new Angular project: Once Angular CLI is installed, you can create a new Angular project using the ng new command. Navigate to the directory where you want to create your project using the cd command, and then run the following command:
ng new my-angular-project
4. Replace my-angular-project with the name you want to give to your project. Angular CLI will generate a new project structure with all the necessary files and dependencies. Navigate to the project directory: After the project is created, navigate to the project directory using the cd command:
cd my-angular-project
5. Serve the application: To see your Angular project in action, you can use the Angular CLI's development server. Run the following command to start the server:
ng serve
This will compile the project and launch a development server. Open your web browser and visit http://localhost:4200 to see your Angular application.
Congratulations! You have successfully created an Angular project. You can now start building your application by modifying the files in the project structure, including the main HTML template (src/index.html) and the root component (src/app/app.component.ts). Refer to the official Angular documentation (https://angular.io/docs) for more information on how to work with Angular and build powerful web applications.
Angular material
1. Install required dependencies: Install the necessary dependencies for autocomplete functionality. You'll need @angular/material and @angular/cdkfor the autocomplete component. Run the following command to install them:
npm install @angular/material @angular/cdk
1. Import required modules: Open the app.module.ts file located in the autocomplete folder and import the necessary modules from @angular/material and @angular/forms. Your imports should look like this:
app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule,BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ReactiveFormsModule} from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule,
MatAutocompleteModule,
ReactiveFormsModule,
BrowserAnimationsModule,
NoopAnimationsModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
Autocomplete
Start by creating the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option's value property to whatever you'd like the value of the text input to be when that option is selected.
1. Create an autocomplete input field: Open the autocomplete.component.html file and add the following code:
app.compoent.html
<div class="content">
<mat-card style="width: 20%; margin-top: 60px;">
<h1>{{selectedValue}}</h1><br>
<mat-card-content>
<mat-form-field>
<input type="text" placeholder="Search" matInput
[formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"
(optionSelected)="onOptionSelected($event)">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</mat-card-content>
</mat-card>
</div>
1. Set up the autocomplete functionality in the component: Open the autocomplete.component.ts file and add the following code:
Include the AutocompleteComponent in your application: Open the app.module.ts file located in the src/app folder and import the AutocompleteComponent and AutocompleteModule. Add the AutocompleteComponent to the declarations and exports arrays, and import the AutocompleteModule in the imports array. Your app.module.ts file should look like this:
app.component.ts
import { Component } from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
myControl = new FormControl();
options: string[] = ['Orange', 'Panana', 'Apple', 'Mango', 'Pear', 'Kiwi', 'Blueberry', 'Grape', 'Strawberry'];
filteredOptions: Observable<string[]>;
selectedValue: any;
constructor() {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
onOptionSelected(event: any): void {
this.selectedValue = event.option.value;
console.log(this.selectedValue); // Output the selected value
}
}
In the above code:
° The options array represents the available autocomplete options.
° The myControl variable is used to bind the input field to a FormControl.
° The filteredOptions variable holds the filtered options based on the user's input. It is updated using the valueChanges observable of the FormControl.
° The filterOptions function filters the available options based on the user's input.
° The onOptionSelected function is called when an option is selected from the autocomplete list. It retrieves the selected value and performs any desired actions.
With this setup, whenever the user selects an option from the autocomplete list, the onOptionSelected function will be triggered, allowing you to access the selected value and handle it as needed.