Angular-Materials

Angular Material is one of the most popular front-end UI frameworks that provides components that work very well across mobile, web and desktop applications. Angular Material ensures that all modern design principles are adhered to during application development.

To use materials in your project, you need to install two packages: materials and cdk. Following is the command to add materials in project.

This command will ask you three questions.

1. Choose a prebuilt theme name, or “custom” for a custom theme: Here we choose our own custom theme.

2. Set up HammerJS for gesture recognition: HammerJS is a popular library that helps you add support for touch gestures (e.g. swipe, pan, zoom, rotate) to your page.

3. Set up browser animations for Angular Material: Material components depend on the animation module for advanced features. Hence we need the animation package.

Let us now see the package.json. @angular/material and @angular/cdk are installed.

If we want to import datepicker material to our project, we want to do these things.

In your IDE navigate to the file “src/app/app.module.ts”, and import the needed modules. And then add them to the imports array:

The next step is to add some components, so go to “src/app/app.component.html” and add the following code:

Now you can run the application using ng serve.

The output is:

Thus we can add needed materials to our project.