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
Style
Add this link to style css file style.css
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
MatStepper
Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps.Material stepper builds on the foundation of the CDK stepper that is responsible for the logic that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design styling.
Step 1: Import the required modules and dependencies
Make sure you have the necessary dependencies installed. You will need the Angular Material module and the MatStepperModule for two-way data binding. Add the following imports to your module file (e.g., app.module.ts):
app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatStepperModule } from '@angular/material/stepper';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule,NoopAnimationsModule } from '@angular/platform-browser/animations';
import {MatRadioModule} from '@angular/material/radio';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatStepperModule,
BrowserAnimationsModule,
NoopAnimationsModule,
MatButtonModule,
MatRadioModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
App component ts
Step 2: open app component tsStep 3: Handle stepper logic in the component
To handle the stepper logic, you can use the MatStepper API in the component class. For example, you can use it to programmatically navigate between steps:
import { StepperSelectionEvent } from '@angular/cdk/stepper';
import { Component, ViewChild } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(MatStepper) stepper!: MatStepper;
validedStepper = true;
data: any;
totalStepsCount = 0;
isLinear = true;
showBackButton = false;
constructor() {
this.data = [
{
title: 'Step 1 content goes here Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo vel ut ullam facilis, placeat magnam itaque error quisquam praesentium assumenda, qui, commodi deleniti repellat. Cum dolores fuga assumenda cumque maxime.',
id: 'Step 1'
},
{
title: 'Step 2 content goes here Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo vel ut ullam facilis, placeat magnam itaque error quisquam praesentium assumenda, qui, commodi deleniti repellat. Cum dolores fuga assumenda cumque maxime.',
id: 'Step 2'
},
{
title: 'Step 3 content goes here Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo vel ut ullam facilis, placeat magnam itaque error quisquam praesentium assumenda, qui, commodi deleniti repellat. Cum dolores fuga assumenda cumque maxime.',
id: 'Step 3'
},
{
title: 'Step 4 content goes here Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo vel ut ullam facilis, placeat magnam itaque error quisquam praesentium assumenda, qui, commodi deleniti repellat. Cum dolores fuga assumenda cumque maxime.',
id: 'Step 4'
},
{
title: 'Step 5 content goes here Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo vel ut ullam facilis, placeat magnam itaque error quisquam praesentium assumenda, qui, commodi deleniti repellat. Cum dolores fuga assumenda cumque maxime.',
id: 'Step 5'
}
]
}
selectionChange(event: StepperSelectionEvent) {
const stepLabel = event.selectedStep.label;
const showBackButton = Number(stepLabel);
if((showBackButton: any)=>2) {
this.showBackButton=true;
}
if(showBackButton==1) {
this.showBackButton=false;
}
}
goToNextStep() {
this.stepper.next();
}
goToPreviousStep() {
this.stepper.previous();
}
resetStepper() {
this.stepper.reset();
}
}
App component html
Step 4: Add the MatStepper in the templateIn the app.component.html template, you can use the <mat-horizontal-stepper> or <mat-vertical-stepper> elements to define the stepper layout. Here's an example using the horizontal stepper:
app.component.html
<div>
<mat-vertical-stepper #stepper [linear]="isLinear" (selectionChange)="selectionChange($event)">
<mat-step label="{{d.id}}" *ngFor="let d of data">
<p>{{d.title}}</p>
<button mat-raised-button color="accent" *ngIf="showBackButton" matStepperPrevious>Back</button>
<button mat-raised-button color="primary" matStepperNext>Next</button>
</mat-step>
</mat-vertical-stepper>
<section>
<div class="example-button-row">
<button mat-stroked-button color="primary" (click)="goToNextStep()">Go To Next Step</button>
<button mat-raised-button color="accent" (click)="goToPreviousStep()">Go To Previous Step</button>
<button mat-stroked-button color="warn" (click)="resetStepper()">Reset Stepper</button>
</div>
</section>
</div>
App component css
Open the app.component.css file and start writing your custom CSS code. You can define styles for specific elements or create your own classes.For example, let's say you want to change the background color of a specific page. You can add the following code to app.component.css:
app.component.css
::ng-deep .mat-horizontal-stepper-header,
::ng-deep .mat-vertical-stepper-header {
pointer-events: none !important;
border-radius: 6px !important;
}
::ng-deep .mat-step-header {
padding: 10px !important;
margin-bottom: 10px !important;
}
button {
margin: 10px;
}
p {
padding: 10px;
background: aliceblue;
font-size: 20px;
font-family: initial;
}
In the above example, the @ViewChild decorator is used to get a reference to the MatStepper component, allowing you to call its methods.
That's it! You can now use the MatStepper component in your Angular application.